Cara menggunakan metode formulir html

Question

Anda pasti sudah familiar dengan form login. Formulir ini biasanya meminta username dan password pengguna sebelum masuk ke layanan online. Tampilan form loginnya sendiri cukup sederhana. Namun tahukah Anda bahwa form login juga bisa terlihat tidak biasa?

Table of Contents Show

Apa yang Perlu Anda Persiapkan?
Persiapan Cara Membuat Form Login yang Menarik dengan HTML dan CSS
1. Buat Folder Khusus untuk Menyimpan File Form Login
2. Buat file HTML dan CSS dengan Editor Teks
Cara Membuat Form Login yang Menarik dengan HTML
1. Deklarasikan Dokumen HTML Anda
2. Buat Header Halaman Formulir Login
3. Berikan Judul Halaman Form Login
3. Tempel File CSS
4. Buat Badan Formulir Masuk
5. Buat Tata Letak Formulir Login
6. Beri Judul pada Form Login
7. Buat Kotak Formulir Login
8. Buat Kolom Username dan Password
9. Buat Tombol Formulir Login
Cara Membuat Form Login yang Menarik dengan CSS
1. Desain Format Tata Letak Form Login
2. Berikan Latar Belakang pada Formulir Login
3. Desain Kotak Formulir Login
4. Desain Judul Formulir Login
5. Desain Kolom Username dan Password
6. Desain Tombol Formulir Login
Syntax Lengkap Cara Membuat Form Login Menarik di HTML dan CSS
Sintaks Lengkap Cara Membuat Form Login Menarik di HTML
Sintaks Lengkap Cara Membuat Form Login yang Menarik di CSS
Cara Menjalankan Formulir Login
1. Buka Form Login dengan Browser
2. Proyek Anda online
Berlangganan sekarang
Langkah demi langkah untuk membuat formulir login HTML?
Apa fungsi dari metode dalam tag formulir?
Elemen formulir HTML digunakan untuk apa?
Tag apa yang digunakan untuk membuat Formulir HTML?

Pada artikel ini, Anda akan belajar cara membuat form login dengan HTML dan CSS. HTML adalah bahasa markup untuk membuat halaman web dan struktur formulir login. Sedangkan CSS untuk mendesain tampilan form login

Tidak sabar untuk mempelajari cara membuat form login dengan HTML dan CSS?

Daftar Isi

Apa yang Perlu Anda Persiapkan?

Sebelum membuat form login yang keren dengan HTML dan CSS, ada dua hal yang perlu anda persiapkan yaitu

Editor Teks. Editor teks adalah perangkat lunak atau program komputer untuk menulis kode program. Gunakan editor teks yang membuat Anda paling nyaman. Bisa Notepad++, Sublime Text, Visual Code Studio, dll
Peramban. Browser berfungsi untuk melihat hasil form login yang telah Anda buat. Anda bebas menggunakan browser terbaik seperti Chrome, Mozilla Firefox, atau browser lainnya

Baca Juga. 25+ Contoh Coding HTML untuk Pemula

Sebelum melakukan cara membuat form login yang menarik di HTML dan CSS, ada beberapa hal yang perlu anda persiapkan. Berikut detailnya

Langkah pertama adalah membuat folder khusus. Ini akan menjadi wadah untuk menyimpan file HTML dan CSS dari form login

Ingat, file HTML dan CSS harus berada di folder yang sama untuk memastikan keduanya dapat ditautkan

Sebagai catatan, jangan gunakan spasi untuk memberi nama folder. Karena spasi memungkinkan terjadinya kesalahan. Alih-alih spasi, gunakan tanda hubung (-), garis bawah (_), dll

2. Buat file HTML dan CSS dengan Editor Teks

Langkah selanjutnya adalah membuat file HTML dan CSS. Buka editor teks, lalu buat file HTML dan CSS. Untuk file HTML beri nama index. html. Untuk file CSS, beri nama style. css.

Di sini, kami menggunakan editor teks Notepad ++

Baca Juga. Editor HTML Terbaik Untuk Pengembang Web

Setelah persiapan selesai, Anda bisa memulai cara membuat form login yang menarik di HTML. Kami akan menjelaskannya satu per satu dan detail, jadi anda tidak perlu takut bingung

Mari kita mulai sekarang

1. Deklarasikan Dokumen HTML Anda

Sekarang, buka file html formulir login Anda. Agar formulir Anda dapat ditampilkan dengan benar, kita harus mendeklarasikannya terlebih dahulu

Deklarasi ini akan memberi tahu browser web bahwa Anda sedang menulis instruksi dalam versi HTML. Penulisan sendiri ditandai dengan adanya DOCTYPE atau Document Type Declaration (DTD) pada baris pertama text editor.

<!DOCTYPE HTML>
<html>
</html>

Setelah mendeklarasikan dokumen HTML, Anda bisa memulai proses pembuatan form dengan tag .

Di dalam tag , silakan masukkan tag . Tag ini berfungsi untuk membuat kepala dokumen.

<!DOCTYPE HTML>
<html>
    <head>
    </head>
</html>

_

Tag head berisi berbagai metadata atau informasi teknis yang berkaitan dengan dokumen HTML yang dibuat. Misalnya, judul halaman, deskripsi halaman, sumber file eksternal, dll

Seperti pembahasan pada poin sebelumnya, kita dapat mengisi metadata di dalam tag . Salah satu komponennya yaitu judul. Untuk membuat judul halaman, kita menggunakan tag .</p><pre><code><title>Masukkan Judul Halaman Form Login</title></code></pre><p>Anda dapat melihat sintaks lengkap di bawah ini</p><pre><code><!DOCTYPE HTML> <html> <head> <title>Halaman Login</title> </head> </html></code></pre><p>Nantinya, Anda bisa melihat hasilnya pada tab title web browser Anda. Mudah, bukan?</p><p><div class="imgBox"><img alt="Cara menggunakan metode formulir html" src="/dist/images/loading.svg" data-orgimg="https://sg.cdnki.com/cara-menggunakan-metode-formulir-html---aHR0cHM6Ly9pMC53cC5jb20vd3d3Lm5pYWdhaG9zdGVyLmNvLmlkL2Jsb2cvd3AtY29udGVudC91cGxvYWRzLzIwMjAvMTEvTWVtYnVhdF9UaXRsZV9Gb3JtX0xvZ2luLnBuZw==.webp" ></div></p><div style="width:100%; margin:10px auto; display:block"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3058041951894594" data-ad-slot="8760943885" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div></p><h3 id="3-tempel-file-css">3. Tempel File CSS</h3><p>Cara membuat form login yang menarik dengan HTML berikutnya, yaitu menyisipkan file CSS. Masih di dalam tag <head>, sekarang kita akan menyelipkan file CSS ke dalam dokumen HTML. Lho, kenapa harus diselipkan?</p><p>Alasannya, file CSS terpisah dari dokumen HTML. Oleh karena itu diperlukan sebuah bridge untuk menghubungkan kedua file tersebut. Jika tidak terhubung, browser akan gagal mengintegrasikan desain dari file CSS</p><blockquote><p>Ingat, file CSS harus berada di folder yang sama dengan file HTML</p></blockquote><p>Nah, jembatan ini bisa kamu buat dengan atribut rail link</p><pre><code><link rel="stylesheet" href="Masukkan file CSS"></code></pre>_<p>Style sheet dalam atribut rail link berarti memberi tahu browser bahwa file eksternal yang dimasukkan adalah tipe style sheet dengan ekstensi. css</p><p>Selengkapnya berikut adalah script untuk memasukkan file CSS ke dalam dokumen HTML</p><pre><code><!DOCTYPE HTML> <html> <head> <link rel="stylesheet" href="style.css"> </head> </html></code></pre><p>Untuk pembahasan lengkap style sheet dan eksekusi hasilnya akan kita bahas pada bagian Cara Membuat Form Login yang Menarik dengan CSS</p><h3 id="4-buat-badan-formulir-masuk">4. Buat Badan Formulir Masuk</h3><p>Seusai membuat kepala form login, tahap berikutnya yaitu membuat badan. Untuk itu, Anda membutuhkan tag <body>. Bisa dibilang, ini adalah wadah untuk meletakkan seluruh komponen inti form. </p><pre><code><!DOCTYPE HTML> <html> <head> <link rel="stylesheet" href="style.css"> </head> <body> </body> </html></code></pre>_<p>Caranya, cukup letakkan tag <body> di bawah tag <head>. Jika sudah, berarti Anda siap untuk melangkah ke tahap berikutnya. </p><h3 id="5-buat-tata-letak-formulir-login">5. Buat Tata Letak Formulir Login</h3><p>Membuat tag <body> saja belum cukup untuk membuat form login yang baik. Alasannya, kemungkinan besar dokumen tidak akan rapi. Karena itu, dibutuhkan layout atau wadah untuk membungkus organ-organ form Anda.</p><p>Cara membuat layout ini yaitu menggunakan elemen <div> dengan class = “container”. Tag ini akan mengelompokkan atau menampung komponen tertentu ke dalam satu grup.</p><pre><code><div class="container"></code></pre><p>Karena kita akan menggunakan elemen ini untuk membungkus isi form, masukkan syntax tadi di dalam tag <body>. Jangan lupa juga untuk tutup bungkusnya dengan tag </div>.</p><pre><code><!DOCTYPE HTML> <html> <head> <title>Halaman Login</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> </div> </body> </html></code></pre>_<p>Sebagai petunjuk, fungsi dari elemen ini akan lebih terasa nantinya ketika kita sudah bermain-main dengan CSS. Tapi sebelum ke sana, kita fokus dulu untuk mengatur struktur form login yang keren</p><p>Nah, untuk seterusnya, kita akan membuat organ-organ form login keren di dalam tag <div> ini.</p><h3 id="6-beri-judul-pada-form-login">6. Beri Judul pada Form Login</h3><p>Hal pertama dan terpenting dalam form login adalah main title alias heading 1. Judul form ini berbeda dengan judul halaman yang kita buat tadi</p><p>Judul halaman seperti nama ruangan yang kita gunakan untuk menyimpan dokumen kerja. Sedangkan judul form adalah nama dokumen kerja yang ada di ruang penyimpanan</p><p>Oleh karena itu, heading 1 memuat topik utama atau informasi inti dari suatu dokumen/konten. Judul teks adalah apa yang digunakan mesin pencari untuk mengevaluasi kinerja SEO. </p><p>Nah, supaya judul form login Anda dapat dikenali oleh mesin pencari, gunakanlah tag <h1>. Tag ini juga akan membuat judul terlihat lebih penting dan menonjol.</p><pre><code><h1> Masukkan Judul <h1></code></pre>_<p>Di sini, kami akan menamai formulir ini sebagai 'LOGIN'. Berikut sintaks lengkapnya</p><pre><code><!DOCTYPE HTML> <html> <head> </head> </html></code></pre>_0<p>Dengan sintaks tersebut, Anda akan mendapatkan tampilan seperti ini</p><p><div class="imgBox"><img alt="Cara menggunakan metode formulir html" src="/dist/images/loading.svg" data-orgimg="https://sg.cdnki.com/cara-menggunakan-metode-formulir-html---aHR0cHM6Ly9pMC53cC5jb20vd3d3Lm5pYWdhaG9zdGVyLmNvLmlkL2Jsb2cvd3AtY29udGVudC91cGxvYWRzLzIwMjAvMTEvTWVtYnVhdF9KdWR1bF9Gb3JtX0xvZ2luLnBuZw==.webp" ></div></p><p>Yap, masih sangat polos, bukan? </p><h3 id="7-buat-kotak-formulir-login">7. Buat Kotak Formulir Login</h3><p>Setelah memiliki judul, sekarang saatnya membuat kotak form login. Kita akan menggunakan tag <form>.</p><p>Mirip seperti tag <div>, tag <form> juga berfungsi untuk mengelompokkan elemen. Bedanya, tag <form> secara khusus menampung seluruh elemen yang berkaitan dengan sebuah form. Seperti kolom username dan password.</p><pre><code><!DOCTYPE HTML> <html> <head> </head> </html></code></pre>_1<p>Untuk langkah-langkah selanjutnya, kita akan membuat organ form login di dalam tag <form>.</p><h3 id="8-buat-kolom-username-dan-password">8. Buat Kolom Username dan Password</h3><p>Setidaknya, ada tiga tag yang digunakan untuk membuat kolom username dan password. Anda akan membutuhkan tag: <label>, <input type>, dan <br>. Kita akan membahasnya satu per satu.</p><p>Tag <label> berfungsi untuk memberi keterangan teks pada halaman form.</p><pre><code><!DOCTYPE HTML> <html> <head> </head> </html></code></pre>_2<p><div class="imgBox"><img alt="Cara menggunakan metode formulir html" src="/dist/images/loading.svg" data-orgimg="https://sg.cdnki.com/cara-menggunakan-metode-formulir-html---aHR0cHM6Ly9pMC53cC5jb20vd3d3Lm5pYWdhaG9zdGVyLmNvLmlkL2Jsb2cvd3AtY29udGVudC91cGxvYWRzLzIwMjAvMTEvTWVtYnVhdF9Lb2xvbV9Vc2VybmFtZV9kYW5fUGFzc3dvcmQucG5n.webp" ></div></p><p>Setelah label jadi, berikutnya membuat kolom input dengan tag <input type>. Kolom input memungkinkan user memasukkan informasi yang diperlukan, seperti username dan password.</p><pre><code><!DOCTYPE HTML> <html> <head> </head> </html></code></pre>_3<p><div class="imgBox"><img alt="Cara menggunakan metode formulir html" src="/dist/images/loading.svg" data-orgimg="https://sg.cdnki.com/cara-menggunakan-metode-formulir-html---aHR0cHM6Ly9pMC53cC5jb20vd3d3Lm5pYWdhaG9zdGVyLmNvLmlkL2Jsb2cvd3AtY29udGVudC91cGxvYWRzLzIwMjAvMTEvTWVtYnVhdF9JbnB1dF9UeXBlX1RleHQucG5n.webp" ></div></p><p>Nah bicara tentang tag <input type>, ada dua tipe yang akan kita gunakan pada form login. Pertama, type=text. Tipe ini akan menampilkan tulisan yang Anda ketikkan di dalam kolom. Kedua, type=password. Menggunakan tipe ini, teks isian akan ditampilkan dalam bentuk karakter khusus, seperti dots.</p><p><div class="imgBox"><img alt="Cara menggunakan metode formulir html" src="/dist/images/loading.svg" data-orgimg="https://sg.cdnki.com/cara-menggunakan-metode-formulir-html---aHR0cHM6Ly9pMC53cC5jb20vd3d3Lm5pYWdhaG9zdGVyLmNvLmlkL2Jsb2cvd3AtY29udGVudC91cGxvYWRzLzIwMjAvMTEvUGVyYmVkYWFuX1RleHRfZGFuX1Bhc3N3b3JkLnBuZw==.webp" ></div></p><p>Supaya syntax Anda lebih rapi, silakan bubuhkan tag <br> di akhiran setiap tag di atas. Tag <br> berfungsi sebagai break atau penanda baris baru.</p><div style="width:100%; margin:10px auto; display:block"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3058041951894594" data-ad-slot="8760943885" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div></p><p>Anda dapat melihat contoh skrip lengkap dari kesatuan semua tag ini di bawah ini</p><pre><code><!DOCTYPE HTML> <html> <head> </head> </html></code></pre>_4<p>Anda bisa melihat hasilnya pada gambar berikut</p><p><div class="imgBox"><img alt="Cara menggunakan metode formulir html" src="/dist/images/loading.svg" data-orgimg="https://sg.cdnki.com/cara-menggunakan-metode-formulir-html---aHR0cHM6Ly9pMC53cC5jb20vd3d3Lm5pYWdhaG9zdGVyLmNvLmlkL2Jsb2cvd3AtY29udGVudC91cGxvYWRzLzIwMjAvMTEvTWVtYnVhdF9JbnB1dF9UeXBlLTEucG5n.webp" ></div></p><h3 id="9-buat-tombol-formulir-login">9. Buat Tombol Formulir Login</h3><p>Sampai disini struktur form login keren anda sudah hampir selesai. Tinggal menambahkan satu komponen lagi yaitu tombol. </p><p>Cara membuat tombol pada dokumen HTML cukup mudah. Di dalam tag <form>, silakan berikan tag <button>.</p><pre><code><!DOCTYPE HTML> <html> <head> </head> </html></code></pre>_5<p>Seluruh sintaks terperinci dapat ditemukan di bawah</p><pre><code><!DOCTYPE HTML> <html> <head> </head> </html></code></pre>_6<p>Sekarang, struktur formulir Anda sudah siap. Tampilannya seperti yang terlihat di sini</p><p><div class="imgBox"><img alt="Cara menggunakan metode formulir html" src="/dist/images/loading.svg" data-orgimg="https://sg.cdnki.com/cara-menggunakan-metode-formulir-html---aHR0cHM6Ly9pMC53cC5jb20vd3d3Lm5pYWdhaG9zdGVyLmNvLmlkL2Jsb2cvd3AtY29udGVudC91cGxvYWRzLzIwMjAvMTEvTWVtYnVhdF9Ub21ib2xfRm9ybS1Mb2dpbi5wbmc=.webp" ></div></p><p>Cara membuat form login yang menarik dengan HTML sudah selesai, Anda sudah melakukannya. Setelah itu mari kita lanjutkan mendesainnya dengan css agar terlihat lebih menawan</p><h2 id="cara-membuat-form-login-yang-menarik-dengan-css">Cara Membuat Form Login yang Menarik dengan CSS</h2><p>Tidak sabar untuk mendesain formulir login Anda? . Sedikit mengingatkan, CSS atau Cascading Style Sheets digunakan untuk menata tampilan yang ditulis dengan bahasa markup</p><p>Berikut adalah cara langkah demi langkah untuk membuat formulir login yang menarik dengan CSS</p><h3 id="1-desain-format-tata-letak-form-login">1. Desain Format Tata Letak Form Login</h3><p>Langkah pertama, desain tata letak formulir. Di sini Anda dapat mengatur margin, padding, outline, dan jenis font yang ingin Anda gunakan</p><p>Kalau bingung, yuk simak penjelasan masing-masing properti di bawah ini</p><ul><li>Batas. Fungsinya untuk mengatur tepi garis luar. Berdasarkan posisinya, ada empat jenis margin. margin atas, margin kanan, margin bawah, margin kiri;</li><li>Lapisan. Ini berarti jarak antara konten dan bingkai;</li><li>Garis besar. Berfungsi sebagai garis bingkai bentuk;</li><li>Keluarga font. Berperan untuk mengatur jenis font sesuai dengan yang anda inginkan</li></ul><p>Penerapan keempat sifat di atas dapat dilihat di bawah ini. Anda dapat mengubah ukuran dan jenis font ini sesuai kebutuhan</p><pre><code><!DOCTYPE HTML> <html> <head> </head> </html></code></pre>_7<p>Eksekusinya seperti gambar di bawah ini. Ini mulai terlihat sedikit berbeda dari sebelum format dan spasi disesuaikan, bukan?</p><p><div class="imgBox"><img alt="Cara menggunakan metode formulir html" src="/dist/images/loading.svg" data-orgimg="https://sg.cdnki.com/cara-menggunakan-metode-formulir-html---aHR0cHM6Ly9pMC53cC5jb20vd3d3Lm5pYWdhaG9zdGVyLmNvLmlkL2Jsb2cvd3AtY29udGVudC91cGxvYWRzLzIwMjAvMTEvRm9ybWF0X0xheW91dF9Gb3JtX0xvZ2luLnBuZw==.webp" ></div></p><h3 id="2-berikan-latar-belakang-pada-formulir-login">2. Berikan Latar Belakang pada Formulir Login</h3><p>Lanjut ke cara membuat form login keren berikutnya, yaitu memberi background. Silakan gunakan property <body>. Di dalam property ini, terdapat beberapa atribut:</p><ul><li>Tinggi. Fungsinya untuk mengatur ketinggian objek. Tinggi. 100vh berarti tinggi objek sama dengan 100% tinggi layar tab;</li><li>Gambar latar belakang. Peran untuk memasukkan alamat penyimpanan gambar latar belakang dalam bentuk tautan;</li><li>Ukuran latar belakang. Berfungsi untuk mengatur ukuran background gambar. Ada tiga jenis pengukuran yang dapat digunakan. otomatis, tutupi, dan isi;</li><li>Posisi latar belakang. Fungsinya mengatur posisi awal gambar background. Ada banyak pilihan untuk ini, yaitu. kiri atas, kiri tengah, kiri bawah, kanan atas, kanan tengah, kanan bawah, tengah atas, tengah, dan tengah bawah;</li><li>Pengulangan latar belakang. Ada kalanya dimensi gambar yang dipilih terlalu kecil atau memiliki pola berulang yang membutuhkan pengulangan agar background terisi penuh. Karena itu, ada dua nilai yang bisa Anda gunakan. ulangi dan tidak ulangi</li></ul><p>Penggunaan kelima atribut di atas pada form login yang keren ini bisa dilihat pada sintaks berikut</p><pre><code><!DOCTYPE HTML> <html> <head> </head> </html></code></pre>_8<p>Dengan sintaks itu, hasil yang Anda dapatkan adalah seperti ini. Ini sedikit lebih menarik, bukan?</p><div class="imgBox"><img alt="Cara menggunakan metode formulir html" src="/dist/images/loading.svg" data-orgimg="https://sg.cdnki.com/cara-menggunakan-metode-formulir-html---aHR0cHM6Ly93d3cubmlhZ2Fob3N0ZXIuY28uaWQvYmxvZy93cC1jb250ZW50L3VwbG9hZHMvMjAyMC8xMS9CYWNrZ3JvdW5kX0Zvcm1fTG9naW4tMTAyNHg0MzQucG5n.webp" ></div><h3 id="3-desain-kotak-formulir-login">3. Desain Kotak Formulir Login</h3><p>Beranjak dari background, kini saatnya mendesain form box. Nah, seperti yang kami janjikan pada bagian Cara Membuat Form Login yang Menarik dengan HTML, fungsi container akan cukup terasa disini</p><p>Pada awalnya, kita sudah menggunakan div class=”container”. Dengan begitu, komponen-komponen di dalam container dikelompokkan menjadi beberapa bagian sesuai dengan tag-nya. kotak formulir, judul formulir, kolom nama pengguna dan kata sandi, dan tombol formulir</p><p>Sebagai awalan, kita akan mendesain form box terlebih dahulu. Ada beberapa properti yang kami gunakan</p><ul><li>Position, untuk mengatur peletakan objek di halaman website. Ada lima jenis posisi. statis, relatif, tetap, absolut, dan lengket;</li><li>Left, yaitu penempatan objek mulai dari jarak dari tepi kiri layar;</li><li>Atas, adalah penempatan objek mulai dari tepi atas layar;</li><li>Transform, memungkinkan kita untuk membuat efek rotasi dan animasi pada suatu objek. Ada beberapa jenis gaya. terjemahkan, skala, miringkan, putar, dan matriks;</li><li>Padding, mengatur spasi atau jarak pada konten dengan satuan piksel;</li><li>Width, mengatur lebar objek dalam satuan piksel;</li><li>Background-color, desain pewarnaan pada latar belakang objek;</li><li>Box-shadow, fungsinya untuk membuat bayangan pada objek</li></ul><p>Berikut adalah sintaks lengkap untuk mendesain kotak form login yang keren</p><pre><code><!DOCTYPE HTML> <html> <head> </head> </html></code></pre>_9<p>Dari script diatas, kotak form login anda akan berubah menjadi seperti ini</p><p><div class="imgBox"><img alt="Cara menggunakan metode formulir html" src="/dist/images/loading.svg" data-orgimg="https://sg.cdnki.com/cara-menggunakan-metode-formulir-html---aHR0cHM6Ly9pMC53cC5jb20vd3d3Lm5pYWdhaG9zdGVyLmNvLmlkL2Jsb2cvd3AtY29udGVudC91cGxvYWRzLzIwMjAvMTEvRGVzYWluX0tvdGFrX0Zvcm1fTG9naW4ucG5n.webp" ></div></p><p>Sekarang, Anda sudah memiliki form box dengan warna yang cukup transparan. Berbeda dengan sebelumnya, di mana kotak formulir Anda belum terlihat dan teks masih tampak menyatu dengan gambar latar belakang</p><h3 id="4-desain-judul-formulir-login">4. Desain Judul Formulir Login</h3><p>Masih menggunakan kelas. container, sekarang kita akan mendesain judul form login atau H1. Dibandingkan dengan kotak formulir login, properti dalam mendekorasi judul formulir lebih sederhana, yaitu</p><ul><li>Text-align, yaitu memposisikan teks. Ada beberapa posisi yang bisa Anda pilih. kanan, kiri, tengah, dan ratakan;</li><li>Color, untuk mengatur warna teks. Silakan periksa kode warna yang Anda inginkan di sini → Kode Warna HTML</li><li>Margin-bottom, memberikan jarak di bagian bawah dalam satuan piksel;</li><li>Text-transform, bertanggung jawab untuk memodifikasi format teks. Ada tiga gaya yang bisa Anda pilih. huruf besar, huruf kecil, dan kapitalisasi;</li><li>Border-bottom, fungsinya menyediakan garis bingkai di bagian bawah teks. Anda juga dapat memodifikasi warnanya</li></ul><p>Untuk sintaks desain judul form seperti yang terlihat di bawah ini</p><pre><code><title>Masukkan Judul Halaman Form Login</title></code></pre>0<p>Kini, form login Anda semakin cantik. Namun, ini tidak sempurna. Mari kita pindah ke tingkat berikutnya</p><p><div class="imgBox"><img alt="Cara menggunakan metode formulir html" src="/dist/images/loading.svg" data-orgimg="https://sg.cdnki.com/cara-menggunakan-metode-formulir-html---aHR0cHM6Ly9pMC53cC5jb20vd3d3Lm5pYWdhaG9zdGVyLmNvLmlkL2Jsb2cvd3AtY29udGVudC91cGxvYWRzLzIwMjAvMTEvRGVzYWluX0p1ZHVsX0Zvcm1fTG9naW4ucG5n.webp" ></div></p><h3 id="5-desain-kolom-username-dan-password">5. Desain Kolom Username dan Password</h3><p>Di sini, kami akan merancang dua jenis komponen. label teks dan kolom masukan. Oleh karena itu, tahapan ini dibagi menjadi dua</p><h4><span>5. 1. Merancang Label Teks</span></h4><p>Pertama, kita akan mempercantik label teks terlebih dahulu. Hanya perlu dua properti untuk mendesain label teks</p><ul><li>Text-align, untuk mengatur posisi teks. Silakan pilih salah satunya. kiri, kanan, tengah, atau ratakan;</li><li>Warna, fungsinya mengubah warna teks</li></ul><p>Sintaks desain label teks cukup sederhana, seperti yang terlihat di bawah ini</p><div style="width:100%; margin:10px auto; display:block"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3058041951894594" data-ad-slot="8760943885" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div></p><pre><code><title>Masukkan Judul Halaman Form Login</title></code></pre>1<p>Nah, sekarang wujudmu lebih cantik. Warna label teks berubah sesuai keinginan</p><p><div class="imgBox"><img alt="Cara menggunakan metode formulir html" src="/dist/images/loading.svg" data-orgimg="https://sg.cdnki.com/cara-menggunakan-metode-formulir-html---aHR0cHM6Ly9pMC53cC5jb20vd3d3Lm5pYWdhaG9zdGVyLmNvLmlkL2Jsb2cvd3AtY29udGVudC91cGxvYWRzLzIwMjAvMTEvRGVzYWluX0xhYmVsX1Rla3NfRm9ybV9Mb2dpbi5wbmc=.webp" ></div></p><h4><span>5. 2. Merancang Kolom Input</span></h4><p>Sekarang, kita pindah ke label teks, yang merupakan kolom masukan. Kami telah mempelajari beberapa komponen yang diperlukan di level sebelumnya, jadi Anda hanya perlu mengulanginya</p><ul><li>Width, untuk mengatur lebar objek;</li><li>Padding, pengaturan jarak pada suatu objek;</li><li>Margin-bottom, mengatur jarak objek dari batas bawah;</li><li>Border, fungsinya memberi bingkai pada objek;</li><li>Background-color, untuk mengubah warna objek;</li><li>Perbatasan bawah; </li><li>Color, mengatur warna teks pada objek;</li><li>Font-size, mengubah jenis font pada objek</li></ul><p>Nah, berikut sintaks untuk mendesain kolom input form login yang keren</p><pre><code><title>Masukkan Judul Halaman Form Login</title></code></pre>2<p>Sintaks akan menghasilkan tampilan yang hampir lengkap. Namun bentuk tombol di sana masih terlihat sangat polos. Nah, kami akan memperbaikinya di tahap selanjutnya</p><p><div class="imgBox"><img alt="Cara menggunakan metode formulir html" src="/dist/images/loading.svg" data-orgimg="https://sg.cdnki.com/cara-menggunakan-metode-formulir-html---aHR0cHM6Ly9pMC53cC5jb20vd3d3Lm5pYWdhaG9zdGVyLmNvLmlkL2Jsb2cvd3AtY29udGVudC91cGxvYWRzLzIwMjAvMTEvRGVzYWluX0tvdGFrX0lucHV0X0Zvcm1fTG9naW4ucG5n.webp" ></div></p><h3 id="6-desain-tombol-formulir-login">6. Desain Tombol Formulir Login</h3><p>Sebentar lagi cara membuat form login yang menarik dengan CSS Anda akan selesai. Ada satu komponen lagi yang perlu dihias yaitu form button</p><p>Untuk mendesain tombol formulir, kita membutuhkan properti yang familiar ini</p><ul><li>Width, fungsinya mengatur lebar objek;</li><li>Padding, untuk mengubah spasi pada objek;</li><li>Border, memberi bingkai pada objek;</li><li>Background-color, mengatur warna gambar background pada objek;</li><li>Font-size, untuk mengatur ukuran font pada objek;</li><li>Color, berfungsi untuk mendesain warna objek</li></ul><p>Nah, sintak yang bisa kamu gunakan untuk membuat tombol form login yang keren adalah sebagai berikut</p><pre><code><title>Masukkan Judul Halaman Form Login</title></code></pre>_3<p>Eksekusinya cukup terlihat. Tombol bentuk jauh lebih indah dari sebelumnya</p><p><div class="imgBox"><img alt="Cara menggunakan metode formulir html" src="/dist/images/loading.svg" data-orgimg="https://sg.cdnki.com/cara-menggunakan-metode-formulir-html---aHR0cHM6Ly9pMC53cC5jb20vd3d3Lm5pYWdhaG9zdGVyLmNvLmlkL2Jsb2cvd3AtY29udGVudC91cGxvYWRzLzIwMjAvMTEvRGVzYWluX1RvbWJvbF9Gb3JtX0xvZ2luLnBuZw==.webp" ></div></p><h2 id="syntax-lengkap-cara-membuat-form-login-menarik-di-html-dan-css">Syntax Lengkap Cara Membuat Form Login Menarik di HTML dan CSS</h2><p>Sampai di sini, Anda sudah memahami berbagai tag yang dibutuhkan untuk membuat form login yang menarik dengan HTML dan CSS. Untuk memudahkan Anda, kami juga telah menyertakan sintaks lengkap sehingga Anda tinggal menyalinnya</p><h3 id="sintaks-lengkap-cara-membuat-form-login-menarik-di-html">Sintaks Lengkap Cara Membuat Form Login Menarik di HTML</h3><pre><code><!DOCTYPE HTML> <html> <head> </head> </html></code></pre>_6<h3 id="sintaks-lengkap-cara-membuat-form-login-yang-menarik-di-css">Sintaks Lengkap Cara Membuat Form Login yang Menarik di CSS</h3><pre><code><title>Masukkan Judul Halaman Form Login</title></code></pre>5<h2 id="cara-menjalankan-formulir-login">Cara Menjalankan Formulir Login</h2><p>Setelah cara membuat form login yang menarik dengan HTML dan CSS selesai, Anda bisa menikmati hasilnya. Berikut cara menjalankannya</p><h3 id="1-buka-form-login-dengan-browser">1. Buka Form Login dengan Browser</h3><p>Sekarang saatnya melihat form login keren yang telah Anda buat. Caranya, buka saja file index. html menggunakan browser favorit Anda. Setelah itu, akan terlihat seperti ini</p><div class="imgBox"><img alt="Cara menggunakan metode formulir html" src="/dist/images/loading.svg" data-orgimg="https://sg.cdnki.com/cara-menggunakan-metode-formulir-html---aHR0cHM6Ly93d3cubmlhZ2Fob3N0ZXIuY28uaWQvYmxvZy93cC1jb250ZW50L3VwbG9hZHMvMjAyMC8xMS9EZXNhaW5fRm9ybV9Mb2dpbi5wbmc=.webp" ></div><p>Jika Anda melakukan perubahan pada skrip HTML dan CSS, jangan lupa untuk menyimpannya terlebih dahulu. Untuk melihat hasilnya lagi, cukup muat ulang browser yang membuka halaman formulir Anda</p><h3 id="2-proyek-anda-online">2. Proyek Anda online</h3><p>Walaupun sudah selesai, form login keren kamu masih ada di direktori komputer saja. Oleh karena itu, perlu mengunggahnya secara online agar formulir dapat dilihat di situs web Anda</p><p>Ada tiga cara untuk mengunggah file HTML ke WordPress</p><ul><li>Buat template WordPress secara manual berdasarkan situs web HTML statis</li><li>Instal tema setengah matang dan migrasikan konten</li><li>Membayar pengembang untuk mengonversi HTML ke WordPress</li></ul><p>Namun, untuk melakukan cara-cara di atas, Anda harus menggunakan web hosting. Web hosting adalah layanan untuk membuat proyek Anda online sehingga orang dapat mengaksesnya</p><p>Nah, salah satu webhosting Indonesia terbaik yang bisa kamu coba adalah Niagahoster. Dengan fitur kecepatan, jaminan keamanan, dan berbagai keuntungan lainnya, Anda bisa menemukan hosting yang sesuai dengan kebutuhan. Baik dari tingkat pemula hingga tingkat perusahaan. Menarik, bukan?</p><h2><span>Penutupan</span></h2><p>Sekarang, Anda tahu cara membuat formulir login yang menarik dengan HTML dan CSS. Dengan langkah sederhana, Anda dapat memiliki formulir login yang menarik dan keren</p><p>Namun, itu baru satu contoh dari sekian banyak cara menggunakan HTML dan CSS lho. Jika Anda mempelajarinya lebih dalam, maka akan lebih banyak hal yang dapat Anda buat</p><p>Nah, untuk menunjang kemampuan Anda, silahkan belajar HTML di sini → Belajar HTML Lengkap Untuk Pemula. Jangan lupa juga untuk belajar CSS agar pengetahuan kamu semakin lengkap, ya</p><p><p>Membagikan</p><ul><li></li><li></li><li></li><li></li><li></li></ul></p><p><p></p><p>Benefita <span>Ikuti</span> <span>Benefita adalah seorang gadis Pisces. Dia bermimpi hidup di dunia Harvest Moon. </span></p><p><p><p><p><p><h3 id="berlangganan-sekarang">Berlangganan sekarang</h3><p>Dapatkan berbagai artikel tutorial, insight dan tips menarik seputar dunia online langsung melalui email Anda. Berlangganan sekarang dan raih kesuksesan bersama kami</p><div></div> <div></div> <h3 id="langkah-demi-langkah-untuk-membuat-formulir-login-html">Langkah demi langkah untuk membuat formulir login HTML?</h3> <div><div><span>Cara Membuat Formulir Login yang Menarik dengan HTML</span> . </div> <div>Deklarasikan Dokumen HTML Anda. Sekarang, buka file html formulir login Anda. . </div> <div>2. Buat Header Halaman Formulir Login. . </div> <div>3. Berikan Judul Halaman Form Login. . </div> <div>3. Tempel File CSS. . </div> <div>4. Buat Badan Formulir Masuk. . </div> <div>Buat Tata Letak Formulir Login. . </div> <div>6. Beri Judul pada Form Login. . </div> <div>7. Buat Kotak Formulir Login</div> </div> <h3 id="apa-fungsi-dari-metode-dalam-tag-formulir">Apa fungsi dari metode dalam tag formulir?</h3> <div>Atribut kedua adalah <span>method</span> , yang berfungsi untuk menjelaskan cara pengisian data <span>form</span> akan dikirim oleh web browser. Nilai <span> dari</span> atribut <span>metode</span> dapat berupa get atau post. </div> <h3 id="elemen-formulir-html-digunakan-untuk-apa">Elemen formulir HTML digunakan untuk apa?</h3> <div>Formulir adalah bagian dari HTML yang dapat digunakan untuk <span>membuat elemen Formulir di halaman Web</span> . Elemen formulir dapat terdiri dari kotak centang, tombol radio, menu, kotak teks, area teks, dan tombol. Bidang teks digunakan ketika pengguna ingin mengisi bidang seperti kata, angka, dan lainnya. </div> <h3 id="tag-apa-yang-digunakan-untuk-membuat-formulir-html">Tag apa yang digunakan untuk membuat Formulir HTML?</h3> <div>Untuk membuat form dengan menggunakan bahasa HTML, Anda dapat menggunakan elemen HTML yaitu <span><form></span> … . Pada elemen form harus ditambahkan elemen lain sesuai dengan jenis input yang digunakan yaitu elemen </div></p></td></tr></table> <script async src="/dist/js/lazyhtml.min.js" crossorigin="anonymous"></script> <div class="lazyhtml" data-lazyhtml> <script type="text/lazyhtml"> <div class="youtubeVideo"><h3>Video yang berhubungan</h3> <iframe width="560" height="315" src="https://www.youtube.com/embed/L4SvooMVNF4?controls=0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"allowfullscreen></iframe> </div> </script> </div> <div class="tags pt-3"> <a href="https://apacode.com/tags/kode" class="tag-link">kode</a> <a href="https://apacode.com/tags/html" class="tag-link">html</a> </div> <div class="post-tools"> <button data-postid="cara-menggunakan-metode-formulir-html" class="btn btn-answerModalBox"><img class="mr-1" alt="Cara menggunakan metode formulir html" src="/dist/images/svg/messages_16.svg">Reply</button> <button data-postid="cara-menggunakan-metode-formulir-html" data-vote="up" class="btn btn-doVote"><img class="mr-1" alt="Cara menggunakan metode formulir html" src="/dist/images/svg/face-smile_16.svg">4</button> <button data-postid="cara-menggunakan-metode-formulir-html" data-vote="down" class="btn btn-doVote"><img class="mr-1" alt="Cara menggunakan metode formulir html" src="/dist/images/svg/poo_16.svg">1</button> <button class="btn"><img class="mr-1" alt="Cara menggunakan metode formulir html" src="/dist/images/svg/facebook_16.svg">Membagikan</button> </div> </div> </div> </div> <div id="answers_cara-menggunakan-metode-formulir-html" class="answers"> </div> <div class="entryFooter"> <div class="footerLinkAds"><div style="width:100%; margin:0 auto;"> <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-3058041951894594" data-ad-slot="8760943885"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> <div class="footerRelated"><div class="postRelatedWidget"> <h2>Pos Terkait</h2> <div class="questions-snippet layoutNews border-top border-top-gray"> <div class="max-width:840px"> <ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-client="ca-pub-3058041951894594" data-ad-slot="8760943885"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div class="media media-card rounded-0 shadow-none mb-0 bg-transparent py-4 px-0 border-bottom border-bottom-gray"> <div class="media-image"> <a href="/penggunaan-fungsi-warisan"><img src="https://ap.cdnki.com/r_penggunaan-fungsi-warisan----bcfcfb92ac4c9ca9ae36ca2f5c996332.webp" alt="Penggunaan fungsi WARISAN. "></a> </div> <div class="media-body"> <h5 class="mb-2 fw-medium"><a href="/penggunaan-fungsi-warisan">Penggunaan fungsi WARISAN. </a></h5> <p class="mb-2 truncate lh-20 fs-15"></p> <div class="media media-card questionTags user-media px-0 border-bottom-0 pb-0"> <div class="tags"> </div> </div> </div> </div> <div class="media media-card rounded-0 shadow-none mb-0 bg-transparent py-4 px-0 border-bottom border-bottom-gray"> <div class="media-image"> <a href="/cara-menggunakan-php-class-define"><img src="https://ap.cdnki.com/r_cara-menggunakan-php-class-define---678a5d0f382d35b44de8dd2bce6ecc39.webp" alt="Cara menggunakan php class define"></a> </div> <div class="media-body"> <h5 class="mb-2 fw-medium"><a href="/cara-menggunakan-php-class-define">Cara menggunakan php class define</a></h5> <p class="mb-2 truncate lh-20 fs-15"></p> <div class="media media-card questionTags user-media px-0 border-bottom-0 pb-0"> <div class="tags"> </div> </div> </div> </div> <div class="media media-card rounded-0 shadow-none mb-0 bg-transparent py-4 px-0 border-bottom border-bottom-gray"> <div class="media-image"> <a href="/python-mengatur-zona-waktu-ke-est"><img src="https://ap.cdnki.com/r_python-mengatur-zona-waktu-ke-est---bd0584338a2b4ea920897656754b1c97.webp" alt="Python mengatur zona waktu ke est"></a> </div> <div class="media-body"> <h5 class="mb-2 fw-medium"><a href="/python-mengatur-zona-waktu-ke-est">Python mengatur zona waktu ke est</a></h5> <p class="mb-2 truncate lh-20 fs-15"></p> <div class="media media-card questionTags user-media px-0 border-bottom-0 pb-0"> <div class="tags"> </div> </div> </div> </div> <div class="media media-card rounded-0 shadow-none mb-0 bg-transparent py-4 px-0 border-bottom border-bottom-gray"> <div class="media-image"> <a href="/cara-menggunakan-log-likelihood-in-python"><img src="https://ap.cdnki.com/r_cara-menggunakan-log-likelihood-in-python---579fb4c264e69dbc578ff3d8d84b0aa3.webp" alt="Cara menggunakan log likelihood in python"></a> </div> <div class="media-body"> <h5 class="mb-2 fw-medium"><a href="/cara-menggunakan-log-likelihood-in-python">Cara menggunakan log likelihood in python</a></h5> <p class="mb-2 truncate lh-20 fs-15"></p> <div class="media media-card questionTags user-media px-0 border-bottom-0 pb-0"> <div class="tags"> </div> </div> </div> </div> <div class="media media-card rounded-0 shadow-none mb-0 bg-transparent py-4 px-0 border-bottom border-bottom-gray"> <div class="media-image"> <a href="/bisakah-saya-membuat-aplikasi-hanya-dengan-javascript"><img src="https://ap.cdnki.com/r_bisakah-saya-membuat-aplikasi-hanya-dengan-javascript---d778a2aaa55bbe5a2ba54e187ed0cda8.webp" alt="Bisakah saya membuat aplikasi hanya dengan javascript?"></a> </div> <div class="media-body"> <h5 class="mb-2 fw-medium"><a href="/bisakah-saya-membuat-aplikasi-hanya-dengan-javascript">Bisakah saya membuat aplikasi hanya dengan javascript?</a></h5> <p class="mb-2 truncate lh-20 fs-15"></p> <div class="media media-card questionTags user-media px-0 border-bottom-0 pb-0"> <div class="tags"> </div> </div> </div> </div> <div class="max-width:840px"> <ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-client="ca-pub-3058041951894594" data-ad-slot="8760943885"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div class="media media-card rounded-0 shadow-none mb-0 bg-transparent py-4 px-0 border-bottom border-bottom-gray"> <div class="media-image"> <a href="/kelas-master-visualisasi-analisis-data-python-2022"><img src="https://ap.cdnki.com/r_kelas-master-visualisasi-analisis-data-python-2022---3f7340b9976df4e8e3688dd30a670340.webp" alt="Kelas master visualisasi analisis data python 2022"></a> </div> <div class="media-body"> <h5 class="mb-2 fw-medium"><a href="/kelas-master-visualisasi-analisis-data-python-2022">Kelas master visualisasi analisis data python 2022</a></h5> <p class="mb-2 truncate lh-20 fs-15"></p> <div class="media media-card questionTags user-media px-0 border-bottom-0 pb-0"> <div class="tags"> </div> </div> </div> </div> <div class="media media-card rounded-0 shadow-none mb-0 bg-transparent py-4 px-0 border-bottom border-bottom-gray"> <div class="media-image"> <a href="/cara-menghapus-garis-di-google-sheets"><img src="https://ap.cdnki.com/r_cara-menghapus-garis-di-google-sheets---9e9b862fb3ed9a41e51cc8bf94b19317.webp" alt="Cara menghapus garis di google sheets"></a> </div> <div class="media-body"> <h5 class="mb-2 fw-medium"><a href="/cara-menghapus-garis-di-google-sheets">Cara menghapus garis di google sheets</a></h5> <p class="mb-2 truncate lh-20 fs-15"></p> <div class="media media-card questionTags user-media px-0 border-bottom-0 pb-0"> <div class="tags"> </div> </div> </div> </div> <div class="media media-card rounded-0 shadow-none mb-0 bg-transparent py-4 px-0 border-bottom border-bottom-gray"> <div class="media-image"> <a href="/tulis-kode-untuk-mengetahui-apakah-tahun-tertentu-adalah-tahun-kabisat-atau-bukan-dengan-python"><img src="https://ap.cdnki.com/r_tulis-kode-untuk-mengetahui-apakah-tahun-tertentu-adalah-tahun-kabisat-atau-bukan-dengan-python---e1dfedecd5e36d4a4ee060a772bf4d5c.webp" alt="Tulis kode untuk mengetahui apakah tahun tertentu adalah tahun kabisat atau bukan dengan python"></a> </div> <div class="media-body"> <h5 class="mb-2 fw-medium"><a href="/tulis-kode-untuk-mengetahui-apakah-tahun-tertentu-adalah-tahun-kabisat-atau-bukan-dengan-python">Tulis kode untuk mengetahui apakah tahun tertentu adalah tahun kabisat atau bukan dengan python</a></h5> <p class="mb-2 truncate lh-20 fs-15"></p> <div class="media media-card questionTags user-media px-0 border-bottom-0 pb-0"> <div class="tags"> </div> </div> </div> </div> <div class="media media-card rounded-0 shadow-none mb-0 bg-transparent py-4 px-0 border-bottom border-bottom-gray"> <div class="media-image"> <a href="/cara-menggunakan-python-datetime-utc"><img src="https://ap.cdnki.com/r_cara-menggunakan-python-datetime-utc---4678775fc3db129caa99f3c2ae97d496.webp" alt="Cara menggunakan python datetime utc"></a> </div> <div class="media-body"> <h5 class="mb-2 fw-medium"><a href="/cara-menggunakan-python-datetime-utc">Cara menggunakan python datetime utc</a></h5> <p class="mb-2 truncate lh-20 fs-15"></p> <div class="media media-card questionTags user-media px-0 border-bottom-0 pb-0"> <div class="tags"> </div> </div> </div> </div> <div class="media media-card rounded-0 shadow-none mb-0 bg-transparent py-4 px-0 border-bottom border-bottom-gray"> <div class="media-image"> <a href="/bagaimana-cara-membuat-daftar-loop-dengan-python"><img src="https://ap.cdnki.com/r_bagaimana-cara-membuat-daftar-loop-dengan-python---e2827d17a539944b57079a704925e0a8.webp" alt="Bagaimana cara membuat daftar loop dengan python?"></a> </div> <div class="media-body"> <h5 class="mb-2 fw-medium"><a href="/bagaimana-cara-membuat-daftar-loop-dengan-python">Bagaimana cara membuat daftar loop dengan python?</a></h5> <p class="mb-2 truncate lh-20 fs-15"></p> <div class="media media-card questionTags user-media px-0 border-bottom-0 pb-0"> <div class="tags"> </div> </div> </div> </div> </div> </div></div> <div class="footerRelated"></div> </div> </div> </div> </div> <div class="col-right"> <div class="sidebar"> <div class="ad-card"> <h4 class="text-gray text-uppercase fs-14 pb-3 pb-3 text-center">Periklanan</h4> <div class="mb-4 mx-auto"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3058041951894594" data-ad-slot="8760943885" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> <div class="card card-item"> <div class="card-body"> <h3 class="fs-14 text-uppercase pb-3">BERITA TERKINI</h3> <div class="divider"><span></span></div> <div class="sidebar-questions pt-3"> <div class="media media-card media--card media--card-2"> <div class="media-body"> <h5><a href="https://apacode.com/cara-membuat-kotak-ajaib-dengan-python">Cara membuat kotak ajaib dengan python</a></h5> <small class="meta"> <span class="pr-1">1 years ago</span> <span class="pr-1">. by</span> <a href="https://apacode.com/author/VerticalAnkle" class="author">VerticalAnkle</a> </small> </div> </div> <div class="media media-card media--card media--card-2"> <div class="media-body"> <h5><a href="https://apacode.com/cara-menggunakan-perintah-php-fpm">Cara menggunakan perintah php-fpm</a></h5> <small class="meta"> <span class="pr-1">1 years ago</span> <span class="pr-1">. by</span> <a href="https://apacode.com/author/HelmetedCloseness" class="author">HelmetedCloseness</a> </small> </div> </div> <div class="media media-card media--card media--card-2"> <div class="media-body"> <h5><a href="https://apacode.com/cara-membuat-tas-dari-kain-satin">Cara membuat tas dari kain satin</a></h5> <small class="meta"> <span class="pr-1">1 years ago</span> <span class="pr-1">. by</span> <a href="https://apacode.com/author/HomesickClerk" class="author">HomesickClerk</a> </small> </div> </div> <div class="media media-card media--card media--card-2"> <div class="media-body"> <h5><a href="https://apacode.com/tarik-data-dari-kamus-python-bersarang">Tarik data dari kamus python bersarang</a></h5> <small class="meta"> <span class="pr-1">1 years ago</span> <span class="pr-1">. by</span> <a href="https://apacode.com/author/SpecializedRegulator" class="author">SpecializedRegulator</a> </small> </div> </div> <div class="media media-card media--card media--card-2"> <div class="media-body"> <h5><a href="https://apacode.com/sesi-php-berakhir-terlalu-cepat">Sesi php berakhir terlalu cepat</a></h5> <small class="meta"> <span class="pr-1">1 years ago</span> <span class="pr-1">. by</span> <a href="https://apacode.com/author/ArrestingPneumonia" class="author">ArrestingPneumonia</a> </small> </div> </div> <div class="media media-card media--card media--card-2"> <div class="media-body"> <h5><a href="https://apacode.com/cara-menghapus-aplikasi-yang-tidak-bisa-dihapus-di-hp-realme">Cara menghapus aplikasi yang tidak bisa dihapus di HP Realme</a></h5> <small class="meta"> <span class="pr-1">1 years ago</span> <span class="pr-1">. by</span> <a href="https://apacode.com/author/TemptingHousing" class="author">TemptingHousing</a> </small> </div> </div> <div class="media media-card media--card media--card-2"> <div class="media-body"> <h5><a href="https://apacode.com/cara-mengecek-rumus-di-google-sheets">Cara mengecek rumus di google sheets</a></h5> <small class="meta"> <span class="pr-1">1 years ago</span> <span class="pr-1">. by</span> <a href="https://apacode.com/author/SaturatedAppraisal" class="author">SaturatedAppraisal</a> </small> </div> </div> <div class="media media-card media--card media--card-2"> <div class="media-body"> <h5><a href="https://apacode.com/how-to-install-php-gd-in-xampp">How to install PHP GD in xampp?</a></h5> <small class="meta"> <span class="pr-1">1 years ago</span> <span class="pr-1">. by</span> <a href="https://apacode.com/author/BorrowedFoyer" class="author">BorrowedFoyer</a> </small> </div> </div> <div class="media media-card media--card media--card-2"> <div class="media-body"> <h5><a href="https://apacode.com/concat-string-dalam-loop-php">Concat string dalam loop php</a></h5> <small class="meta"> <span class="pr-1">1 years ago</span> <span class="pr-1">. by</span> <a href="https://apacode.com/author/CardboardAllegation" class="author">CardboardAllegation</a> </small> </div> </div> <div class="media media-card media--card media--card-2"> <div class="media-body"> <h5><a href="https://apacode.com/di-mana-prosedur-tersimpan-di-mysql">Di mana prosedur tersimpan di mysql?</a></h5> <small class="meta"> <span class="pr-1">1 years ago</span> <span class="pr-1">. by</span> <a href="https://apacode.com/author/CounterproductiveLiterature" class="author">CounterproductiveLiterature</a> </small> </div> </div> </div> </div> </div> <div class="card card-item cardTopList"> <div class="card-body"> <h3 class="fs-14 text-uppercase pb-3">Toplist Popular</h3> <div class="divider"><span></span></div> <div class="sidebar-questions pt-3"> <div class="media media-card media--card media--card-2"> <div class="topListNum">#1</div> <div class="media-body"> <h5><a href="https://apacode.com/toplist-top-10-6-nilai-minimum-f-x-y-4x-2y-pada-d-16-e-14-2x-3y-18-4x-3y-24-x-0-y-0-adalah-a-40-b-36-c-2022">Top 10 6 nilai minimum f x y 4x 2y pada d 16 e 14 2x 3y 18 4x 3y 24 x 0 y 0 adalah a 40 b 36 c 2022</a></h5> <small class="meta text-right">1 years ago</small> </div> </div> <div class="media media-card media--card media--card-2"> <div class="topListNum">#2</div> <div class="media-body"> <h5><a href="https://apacode.com/toplist-top-10-dia-selalu-lupa-membawa-pensil-ke-sekolah-saran-yang-tepat-untuk-dia-adalah-2022">Top 10 dia selalu lupa membawa pensil ke sekolah saran yang tepat untuk dia adalah 2022</a></h5> <small class="meta text-right">1 years ago</small> </div> </div> <div class="media media-card media--card media--card-2"> <div class="topListNum">#3</div> <div class="media-body"> <h5><a href="https://apacode.com/toplist-top-10-diketahui-sebuah-data-tunggal-2-4-6-7-7-8-9-10-berapakah-modusnya-2022">Top 10 diketahui sebuah data tunggal 2 4 6, 7 7, 8, 9, 10 berapakah modusnya 2022</a></h5> <small class="meta text-right">1 years ago</small> </div> </div> <div class="media media-card media--card media--card-2"> <div class="topListNum">#4</div> <div class="media-body"> <h5><a href="https://apacode.com/toplist-top-10-persamaan-kuadrat-yang-akar-akarnya-7-2-dan-5-adalah-2022">Top 10 persamaan kuadrat yang akar akarnya 7/ 2 dan -5 adalah 2022</a></h5> <small class="meta text-right">1 years ago</small> </div> </div> <div class="media media-card media--card media--card-2"> <div class="topListNum">#5</div> <div class="media-body"> <h5><a href="https://apacode.com/toplist-top-10-jika-panjang-sisi-bangun-persegi-panjang-16-cm-dan-lebar-8-cm-maka-kelilingnya-adalah-2022">Top 10 jika panjang sisi bangun persegi panjang 16 cm dan lebar 8 cm maka kelilingnya adalah 2022</a></h5> <small class="meta text-right">1 years ago</small> </div> </div> <div class="media media-card media--card media--card-2"> <div class="topListNum">#6</div> <div class="media-body"> <h5><a href="https://apacode.com/toplist-top-9-perhatikan-gambar-mata-berikut-nama-bagian-mata-yang-ditunjukkan-angka-i-dan-ii-adalah-2022">Top 9 perhatikan gambar mata berikut nama bagian mata yang ditunjukkan angka i dan ii adalah 2022</a></h5> <small class="meta text-right">1 years ago</small> </div> </div> <div class="media media-card media--card media--card-2"> <div class="topListNum">#7</div> <div class="media-body"> <h5><a href="https://apacode.com/toplist-top-10-jelaskan-apa-yang-dimaksud-dengan-3-jenis-kemasan-2022">Top 10 jelaskan apa yang dimaksud dengan 3 jenis kemasan? 2022</a></h5> <small class="meta text-right">1 years ago</small> </div> </div> <div class="media media-card media--card media--card-2"> <div class="topListNum">#8</div> <div class="media-body"> <h5><a href="https://apacode.com/toplist-top-9-sebutkan-tiga-keadilan-yang-harus-terwujud-dalam-kehidupan-bermasyarakat-2022">Top 9 sebutkan tiga keadilan yang harus terwujud dalam kehidupan bermasyarakat 2022</a></h5> <small class="meta text-right">1 years ago</small> </div> </div> <div class="media media-card media--card media--card-2"> <div class="topListNum">#9</div> <div class="media-body"> <h5><a href="https://apacode.com/toplist-top-10-pada-getaran-harmonik-pegas-jika-massa-beban-yang-digantung-pada-ujung-bawah-pegas-100g-2022">Top 10 pada getaran harmonik pegas, jika massa beban yang digantung pada ujung bawah pegas 100g 2022</a></h5> <small class="meta text-right">1 years ago</small> </div> </div> <div class="media media-card media--card media--card-2"> <div class="topListNum">#10</div> <div class="media-body"> <h5><a href="https://apacode.com/toplist-top-10-permainan-bulu-tangkis-di-atas-meja-yang-dimainkan-oleh-dua-atau-empat-orang-2022">Top 10 permainan bulu tangkis di atas meja yang dimainkan oleh dua atau empat orang 2022</a></h5> <small class="meta text-right">1 years ago</small> </div> </div> </div> </div> </div> <div class="ad-card"> <h4 class="text-gray text-uppercase fs-14 pb-3 pb-3 text-center">Periklanan</h4> <div class="mb-4 mx-auto"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3058041951894594" data-ad-slot="8760943885" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> <div class="card card-item"> <div class="card-body"> <h3 class="fs-14 text-uppercase pb-3">Terpopuler</h3> <div class="divider"><span></span></div> <div class="sidebar-questions pt-3"> </div> </div> </div> <div class="ad-card fixedAds"> <h4 class="text-gray text-uppercase fs-14 pb-3 pb-3 text-center">Periklanan</h4> <div class="mb-4 mx-auto" style="text-align:center"> <ins class="adsbygoogle" style="display:inline-block;width:300px;height:600px" data-ad-client="ca-pub-3058041951894594" data-ad-slot="8760943885" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> </div> </div> </div> </div> </section>  <script>var questionId ='cara-menggunakan-metode-formulir-html'</script> <script>var postTime ='2023-01-28T01:48:28.438Z'</script> <script>var siteDomain ='apacode.com'</script> <script type="text/javascript" src="https://apacode.com/dist/js/pages/comment.js"></script>  <section class="footer-area pt-80px bg-dark position-relative"> <span class="vertical-bar-shape vertical-bar-shape-1"></span> <span class="vertical-bar-shape vertical-bar-shape-2"></span> <span class="vertical-bar-shape vertical-bar-shape-3"></span> <span class="vertical-bar-shape vertical-bar-shape-4"></span> <div class="container"> <div class="row"> <div class="col-lg-3 responsive-column-half"> <div class="footer-item"> <h3 class="fs-18 fw-bold pb-2 text-white">Tentang Kami</h3> <ul class="generic-list-item generic-list-item-hover-underline pt-3 generic-list-item-white"> <li><a href="/about.html">Hubungi Kami</a></li> <li><a href="/contact.html">Support</a></li> <li><a href="/contact.html">Careers</a></li> <li><a href="/contact.html">Periklanan</a></li> </ul> </div> </div> <div class="col-lg-3 responsive-column-half"> <div class="footer-item"> <h3 class="fs-18 fw-bold pb-2 text-white">Legal</h3> <ul class="generic-list-item generic-list-item-hover-underline pt-3 generic-list-item-white"> <li><a href="/privacy-statement.html">Privacy Policy</a></li> <li><a href="/terms-and-conditions.html">Terms of Services</a></li> <li><a href="/privacy-statement.html">Cookie Policy</a></li> </ul> </div> </div> <div class="col-lg-3 responsive-column-half"> <div class="footer-item"> <h3 class="fs-18 fw-bold pb-2 text-white">Dukungan</h3> <ul class="generic-list-item generic-list-item-hover-underline pt-3 generic-list-item-white"> <li><a href="/contact.html">Knowledge Base</a></li> <li><a href="/contact.html">Remove a post</a></li> <li><a href="/contact.html">Support</a></li> </ul> </div> </div> <div class="col-lg-3 responsive-column-half"> <div class="footer-item"> <h3 class="fs-18 fw-bold pb-2 text-white">Social</h3> <ul class="generic-list-item generic-list-item-hover-underline pt-3 generic-list-item-white"> <li><a href="#"><i class="fab fa-facebook-f mr-1"></i> Facebook</a></li> <li><a href="#"><i class="fab fa-twitter mr-1"></i> Twitter</a></li> <li><a href="#"><i class="fab fa-linkedin mr-1"></i> LinkedIn</a></li> <li><a href="#"><i class="fab fa-instagram mr-1"></i> Instagram</a></li> </ul> </div> </div> </div> </div> <div class="container networkLinks"> <a target='blank' href='https://apacode.com'>home</a><a target='blank' href='https://en.apacode.com'>en</a><a target='blank' href='https://de.apacode.com'>de</a><a target='blank' href='https://ja.apacode.com'>ja</a><a target='blank' href='https://ko.apacode.com'>ko</a><a target='blank' href='https://pt.apacode.com'>pt</a><a target='blank' href='https://zh.apacode.com'>zh</a><a target='blank' href='https://th.apacode.com'>th</a><a target='blank' href='https://it.apacode.com'>it</a><a target='blank' href='https://tr.apacode.com'>tr</a> </div> <hr class="border-top-gray my-3"> <div class="container"> <div class="row align-items-center pb-4 copyright-wrap"> <div class="col-6"> <img src ="/dist/images/dmca_protected_sml.png"/> </div> <div class="col-6"> <div class="copyright-desc text-right fs-14"> <div>Copyright © 2024 <a href="https://apacode.com"><span style="font-size:20px">apa<span style="color:#ff0000">code</span></span></a> Inc.</div> </div> </div> </div> </div> </section>    <div id="back-to-top" data-toggle="tooltip" data-placement="top" title="Go to top"> <img alt="" src="/dist/images/svg/arrow-up_20.svg"> </div>  <script src="https://apacode.com/dist/js/bootstrap.bundle.min.js"></script> <script src="https://apacode.com/dist/js/sweetalert2.js"></script> <script src="https://apacode.com/dist/js/moment.js"></script> <script src="https://apacode.com/dist/js/main.js?v=1"></script>  <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-WWPK8P2" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>  </body> </html>

Cara menggunakan metode formulir html

Apa yang Perlu Anda Persiapkan?

Persiapan Cara Membuat Form Login yang Menarik dengan HTML dan CSS

1. Buat Folder Khusus untuk Menyimpan File Form Login

2. Buat file HTML dan CSS dengan Editor Teks

Cara Membuat Form Login yang Menarik dengan HTML

1. Deklarasikan Dokumen HTML Anda

2. Buat Header Halaman Formulir Login

3. Berikan Judul Halaman Form Login