{"id":40776,"date":"2024-10-21T14:46:37","date_gmt":"2024-10-21T07:46:37","guid":{"rendered":"\/tutorial\/?p=40776"},"modified":"2025-01-08T15:22:39","modified_gmt":"2025-01-08T08:22:39","slug":"cara-membuat-form-login-html-css","status":"publish","type":"post","link":"\/id\/tutorial\/cara-membuat-form-login-html-css","title":{"rendered":"Cara Membuat Form Login untuk Website Menggunakan HTML dan CSS"},"content":{"rendered":"<p>Setiap website yang memiliki fitur login sebaiknya menyediakan form login yang tidak hanya fungsional, tapi juga menarik. Sebab, selain untuk autentikasi, tampilan halaman login website juga bisa membantu <a href=\"\/id\/tutorial\/cara-membuat-brand-sendiri\">membangun branding<\/a>.<\/p><p>Desain yang konsisten dengan logo dan warna brand bisa menunjukkan profesionalisme bisnis dan meningkatkan kepercayaan pengguna. Proses login yang lancar juga membantu membangun reputasi, terutama bagi bisnis online atau layanan berbasis akun.<\/p><p>Di artikel ini, kami akan menjelaskan cara membuat form login menggunakan HTML dan CSS, mulai dari persiapan awal hingga menguploadnya ke hosting. Yuk, langsung saja pelajari langkah-langkahnya!<\/p><h2 class=\"wp-block-heading\" id=\"h-persiapan-awal\">Persiapan Awal<\/h2><p>Sebelum mulai membuat form login, ada beberapa langkah persiapan yang perlu Anda lakukan agar prosesnya berhasil. Berikut hal-hal yang harus dipersiapkan:<\/p><ol class=\"wp-block-list\">\n<li><strong>Tool text editor<\/strong>. Siapkan atau instal <a href=\"\/id\/tutorial\/html-editor-terbaik\">aplikasi HTML editor<\/a> favorit Anda. Misalnya, Anda bisa menggunakan <strong>Notepad++<\/strong>, <strong>Visual Studio Code<\/strong>, <strong>TextEdit<\/strong> (menggunakan format plain text), atau <strong>Sublime Text<\/strong>.<\/li>\n\n\n\n<li><strong>Buat folder proyek<\/strong>. Buat folder khusus di komputer Anda, misalnya dengan nama <strong>form-login<\/strong>. Folder ini akan digunakan untuk menyimpan file <strong>HTML<\/strong> dan <strong>CSS<\/strong> Anda agar lebih mudah diakses. Pastikan file CSS dan HTML disimpan di folder yang sama agar bisa saling terhubung.<\/li>\n\n\n\n<li><strong>Aplikasi web browser<\/strong>. Anda memerlukan web browser seperti <strong>Chrome<\/strong> atau <strong>Firefox<\/strong> untuk meninjau hasil form yang dibuat.<\/li>\n<\/ol><p>Nah, kalau sudah siap, lanjutkan ke bagian berikutnya yuk!<\/p><h2 class=\"wp-block-heading\" id=\"h-cara-membuat-form-login-menggunakan-html-dan-css\">Cara Membuat Form Login Menggunakan HTML dan CSS<\/h2><p>Di bagian ini, kami akan menjelaskan langkah-langkah membuat form login menggunakan HTML dan CSS.<\/p><p>Untuk memulai, Anda perlu membuat dua file menggunakan aplikasi text editor dulu, lalu menyimpannya dengan ekstensi <a href=\"\/id\/tutorial\/apa-itu-html\">.html<\/a> dan <a href=\"\/id\/tutorial\/apa-itu-css\">.css<\/a>. File HTML berfungsi untuk menyimpan struktur halaman login Anda, sedangkan file CSS akan menentukan gaya dan tampilannya.<\/p><h3 class=\"wp-block-heading\" id=\"h-1-buat-struktur-html-form-login\">1. Buat Struktur HTML Form Login<\/h3><p>Pertama, Anda perlu menentukan struktur HTML halaman login Anda. Untuk membuatnya, buka file dengan ekstensi <strong>.html<\/strong> yang tadi sudah disiapkan, lalu tambahkan kode berikut ini:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;!DOCTYPE html&gt;\n&lt;html lang=\"id\"&gt;\n&lt;head&gt;\n  &lt;meta charset=\"UTF-8\"&gt;\n  &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\n  &lt;title&gt;Login Form&lt;\/title&gt;\n  &lt;link rel=\"stylesheet\" href=\"styles.css\"&gt;\n&lt;\/head&gt;<\/pre><p>Berikut penjelasan potongan kode di atas:<\/p><ul class=\"wp-block-list\">\n<li><strong>&lt;!DOCTYPE html&gt;<\/strong> &ndash; Mendeklarasikan dokumen sebagai HTML5 agar browser merender halaman sesuai standar terbaru.<\/li>\n\n\n\n<li><strong>&lt;html lang=&rdquo;id&rdquo;&gt;<\/strong> &ndash; Menetapkan bahasa Indonesia sebagai bahasa dokumen untuk SEO dan aksesibilitas website.<\/li>\n\n\n\n<li><strong>&lt;head&gt; &lt;\/head&gt;<\/strong> &ndash; Memuat <a href=\"https:\/\/id.wikipedia.org\/wiki\/Metadata\" target=\"_blank\" rel=\"noopener\">metadata<\/a> dan link eksternal untuk mengatur halaman.<\/li>\n\n\n\n<li><strong>&lt;meta charset=&rdquo;UTF-8&Prime;&gt;<\/strong> &ndash; Mengatur encoding karakter agar teks ditampilkan dengan benar.<\/li>\n\n\n\n<li><strong>&lt;meta name=&rdquo;viewport&rdquo;&gt;<\/strong> &ndash; Menyesuaikan tampilan halaman website agar tetap optimal di perangkat mobile.<\/li>\n\n\n\n<li><strong>&lt;title&gt;Login Form&lt;\/title&gt;<\/strong> &ndash; Menentukan judul yang ditampilkan di tab browser.<\/li>\n\n\n\n<li><strong>&lt;link rel=&rdquo;stylesheet&rdquo; href=&rdquo;styles.css&rdquo;&gt;<\/strong> &ndash; Menghubungkan file CSS eksternal yang tadi juga sudah disiapkan untuk styling halaman.<\/li>\n<\/ul><p>Setelah membuat struktur awal file HTML, sekarang saatnya menambahkan fitur-fitur yang perlu disertakan di halaman login.<\/p><p>Selain fitur dasar seperti kolom nama pengguna, kata sandi, dan tombol login, di tutorial ini kami akan menambahkan fitur centang untuk mengingat akun, fitur lupa kata sandi, dan fitur daftar kalau belum punya akun.<\/p><p>Tapi sebelumnya, buat dulu bagian judul halaman login Anda dengan menambahkan kode berikut:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;body&gt;\n  &lt;div class=\"login-container\"&gt;\n    &lt;h2&gt;Silakan login terlebih dahulu&lt;\/h2&gt;\n    &lt;form action=\"#\" method=\"POST\"&gt;<\/pre><p>Ganti simbol &ldquo;<strong>#<\/strong>&rdquo; dalam kode di atas dengan URL halaman login yang sebenarnya, lalu Anda bisa lanjut menambahkan fitur-fitur di bawah ini.<\/p><p><strong>Kolom Nama Pengguna dan Kata Sandi<\/strong><\/p><p>Kolom ini merupakan elemen utama yang berfungsi untuk merekam kredensial pengguna. Nama pengguna (username) bertindak sebagai identitas unik yang memverifikasi pengguna, sedangkan kata sandi (password) memastikan hanya pemilik akun yang bisa login.<\/p><p>Atribut <code><strong>required<\/strong><\/code> memastikan kolom tidak boleh kosong untuk menghindari kesalahan input.<\/p><p>Ini contoh kode HTML yang bisa Anda gunakan:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;label for=\"username\"&gt;Nama pengguna:&lt;\/label&gt;\n&lt;input type=\"text\" id=\"username\" name=\"username\" placeholder=\"Masukkan nama pengguna\" required&gt;\n\n&lt;label for=\"password\"&gt;Kata sandi:&lt;\/label&gt;\n&lt;input type=\"password\" id=\"password\" name=\"password\" placeholder=\"Masukkan kata sandi\" required&gt;<\/pre><p>Tampilan awal kolom nama pengguna dan kata sandi ini akan terlihat seperti berikut:<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"555\" height=\"111\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/10\/kolom-username-dan-password.png\/public\" alt=\"tampilan contoh form login html menunjukkan kolom username dan password\" class=\"wp-image-40829\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/10\/kolom-username-dan-password.png\/w=555,fit=scale-down 555w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/10\/kolom-username-dan-password.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/10\/kolom-username-dan-password.png\/w=150,fit=scale-down 150w\" sizes=\"(max-width: 555px) 100vw, 555px\" \/><\/figure><\/div><p><strong>Kotak Centang Ingat Saya<\/strong><\/p><p>Menggunakan opsi ini, pengguna bisa menyimpan sesi loginnya sehingga tidak perlu login berulang kali saat mengunjungi website lagi. Meskipun memerlukan pemrosesan backend untuk mengatur cookie, Anda bisa menambahkannya menggunakan HTML.<\/p><p>Kode yang perlu ditambahkan ke file <strong>index.html<\/strong> Anda adalah sebagai berikut:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;label&gt;\n  &lt;input type=\"checkbox\" name=\"remember\"&gt; Ingat saya\n&lt;\/label&gt;<\/pre><p>Berikut tampilan form login kami setelah fitur ini ditambahkan:<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"520\" height=\"145\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/10\/fitur-ingat-saya.png\/public\" alt=\"tampilan login html menunjukkan kotak centang ingat saya\" class=\"wp-image-40827\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/10\/fitur-ingat-saya.png\/w=520,fit=scale-down 520w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/10\/fitur-ingat-saya.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/10\/fitur-ingat-saya.png\/w=150,fit=scale-down 150w\" sizes=\"(max-width: 520px) 100vw, 520px\" \/><\/figure><\/div><p><strong>Tombol Login<\/strong><\/p><p>Tombol login berfungsi untuk memproses input pengguna dan mengirimnya ke server. Tanpa tombol ini, pengguna tidak bisa mengirimkan data untuk autentikasi.<\/p><p>Untuk fitur ini, tambahkan <code><strong>type=\"submit\"<\/strong><\/code> agar form terkirim secara otomatis saat tombol ditekan.<\/p><p>Masukkan kode berikut ini untuk menambahkan tombol login:<br><\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;button type=\"submit\"&gt;Login&lt;\/button&gt;<\/pre><p>Sampai di sini, semua fitur dasar untuk halaman login sudah berhasil ditambahkan. Begini tampilannya:<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"515\" height=\"175\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/10\/menambahkan-tombol-login-1.png\/public\" alt=\"tampilan halaman masuk yang sudah diberi tombol\" class=\"wp-image-40831\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/10\/menambahkan-tombol-login-1.png\/w=515,fit=scale-down 515w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/10\/menambahkan-tombol-login-1.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/10\/menambahkan-tombol-login-1.png\/w=150,fit=scale-down 150w\" sizes=\"(max-width: 515px) 100vw, 515px\" \/><\/figure><\/div><p><strong>Lupa Kata Sandi<\/strong><\/p><p>Nah, kalau sudah menyertakan semua fitur dasar, sekarang saatnya menambahkan fitur pelengkap, yaitu link <strong>lupa kata sandi<\/strong>.<\/p><p>Link ini membantu pengguna mengatur ulang kata sandinya kalau terlupa. Biasanya, link ini mengarah ke halaman pemulihan kata sandi dengan URL tertentu. Jadi, Anda nanti perlu menambahkan URL halaman tersebut dalam kode Anda.<\/p><p>Ini kode HTML yang perlu Anda tambahkan. Jangan lupa ganti <code><strong>#<\/strong><\/code> dengan URL halaman lupa kata sandi yang sebenarnya di website Anda.<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;p&gt;&lt;a href=\"#\"&gt;Lupa kata sandi Anda?&lt;\/a&gt;&lt;\/p&gt;<\/pre><p>Link ini akan ditampilkan di bawah tombol login seperti berikut:<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"525\" height=\"221\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/10\/lupa-kata-sandi-halaman-login.png\/public\" alt=\"tampilan fitur link lupa kata sandi pada halaman masuk\" class=\"wp-image-40830\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/10\/lupa-kata-sandi-halaman-login.png\/w=525,fit=scale-down 525w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/10\/lupa-kata-sandi-halaman-login.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/10\/lupa-kata-sandi-halaman-login.png\/w=150,fit=scale-down 150w\" sizes=\"(max-width: 525px) 100vw, 525px\" \/><\/figure><\/div><p><strong>Daftar untuk Pengguna Baru<\/strong><\/p><p>Terakhir, kami akan menambahkan fitur pendaftaran akun bagi pengguna baru. Kami akan meletakkannya di bawah tombol login agar alur perjalanan pengguna tetap terarah.<\/p><p>Sama seperti sebelumnya, ganti <strong>#<\/strong> dengan URL yang mengarah ke halaman pendaftaran di website Anda. Berikut kodenya:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;p&gt;Belum punya akun? &lt;a href=\"#\"&gt;Daftar sekarang&lt;\/a&gt;.&lt;\/p&gt;<\/pre><p>Setelah selesai memodifikasi setiap bagian kode di atas sesuai kebutuhan, sekarang Anda sudah punya struktur HTML lengkap yang diperlukan untuk membuat form login.<\/p><p>Dari contoh kami, berikut kode lengkapnya:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;!DOCTYPE html&gt;\n&lt;html lang=\"id\"&gt;\n&lt;head&gt;\n  &lt;meta charset=\"UTF-8\"&gt;\n  &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\n  &lt;title&gt;Login Form&lt;\/title&gt;\n  &lt;link rel=\"stylesheet\" href=\"styles.css\"&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n  &lt;div class=\"login-container\"&gt;\n    &lt;h2&gt;Silakan login terlebih dahulu&lt;\/h2&gt;\n    &lt;form action=\"#\" method=\"POST\"&gt;\n      &lt;label for=\"username\"&gt;Nama pengguna:&lt;\/label&gt;\n      &lt;input type=\"text\" id=\"username\" name=\"username\" placeholder=\"Masukkan nama pengguna\" required&gt;\n\n      &lt;label for=\"password\"&gt;Kata sandi:&lt;\/label&gt;\n      &lt;input type=\"password\" id=\"password\" name=\"password\" placeholder=\"Masukkan kata sandi\" required&gt;\n\n      &lt;label&gt;\n        &lt;input type=\"checkbox\" name=\"remember\"&gt; Ingat saya\n      &lt;\/label&gt;\n      &lt;button type=\"submit\"&gt;Login&lt;\/button&gt;\n      &lt;p&gt;&lt;a href=\"#\"&gt;Lupa kata sandi Anda?&lt;\/a&gt;&lt;\/p&gt;\n      &lt;p&gt;Belum punya akun? &lt;a href=\"#\"&gt;Daftar sekarang&lt;\/a&gt;.&lt;\/p&gt;\n    &lt;\/form&gt;\n  &lt;\/div&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/pre><p>Pastikan setiap tag sudah ditutup dengan benar. Dalam contoh di atas, tag penutupnya adalah&rdquo;<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;\/form&gt;\n  &lt;\/div&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/pre><p>Kemudian karena belum diberi gaya, halaman login ini masih akan terlihat sederhana seperti berikut:<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"558\" height=\"258\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/10\/contoh-halaman-login-html-sederhana.png\/public\" alt=\"tampilan halaman masuk sederhana\" class=\"wp-image-40826\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/10\/contoh-halaman-login-html-sederhana.png\/w=558,fit=scale-down 558w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/10\/contoh-halaman-login-html-sederhana.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/10\/contoh-halaman-login-html-sederhana.png\/w=150,fit=scale-down 150w\" sizes=\"(max-width: 558px) 100vw, 558px\" \/><\/figure><\/div><p>Selanjutnya, kami akan memandu Anda menyusun file <strong>styles.css<\/strong> yang akan menentukan gaya dan tampilan form login HTML Anda.<\/p><h3 class=\"wp-block-heading\" id=\"h-2-tambahkan-gaya-dengan-css\">2. Tambahkan Gaya dengan CSS<\/h3><p>Setelah selesai membuat struktur HTML form login, sekarang saatnya memodifikasi file <strong>styles.css<\/strong> untuk menambahkan gaya dengan file CSS agar tampilannya lebih menarik. Anda bisa mengatur elemen seperti tata letak, warna, dan tingkat respons form agar terlihat lebih profesional.<\/p><p>Di bagian ini, kami akan menunjukkan cara mengatur padding, margin, background, styling tombol, dan input, serta menyesuaikan tampilan login website dengan media queries untuk perangkat seluler.<\/p><p><strong>Menambahkan padding, margin, dan background<\/strong><\/p><p>Padding dan margin berfungsi untuk memberikan ruang di sekitar elemen agar tampilannya lebih rapi. Sementara itu, background menambahkan warna atau gambar latar belakang pada container form agar lebih mencerminkan brand Anda.<\/p><p>Untuk menambahkan gaya tersebut, sematkan kode berikut ke file <code><strong>styles.css<\/strong><\/code> Anda:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">.login-container {\n  width: 300px;\n  margin: 100px auto;\n  padding: 20px 40px;\n  background-color: #FFF8DC;\n  border-radius: 8px;\n  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n}<\/pre><p>Ini penjelasan kode di atas kalau Anda ingin mengeditnya lagi sesuai kebutuhan:<\/p><ul class=\"wp-block-list\">\n<li><strong>width<\/strong> &ndash; berfungsi untuk mengatur lebar form.<\/li>\n\n\n\n<li><strong>margin<\/strong> &ndash; menempatkan form di tengah halaman dengan jarak vertikal 100 piksel.<\/li>\n\n\n\n<li><strong>padding<\/strong> &ndash; memberikan ruang dalam container.<\/li>\n\n\n\n<li><strong>background-color<\/strong> &ndash; menentukan warna latar belakang. Pada contoh ini, kami menggunakan <a href=\"\/id\/tutorial\/daftar-kode-warna-html-dan-css\">kode warna HTML<\/a> untuk warna Cornsilk.<\/li>\n\n\n\n<li><strong>border-radius<\/strong> &ndash; mengatur sudut form dengan gaya membulat.<\/li>\n\n\n\n<li><strong>box-shadow<\/strong> &ndash; menambahkan efek bayangan halus di sekitar form.<\/li>\n<\/ul><p>Setelah itu, mari lanjutkan ke bagian berikutnya untuk menambahkan gaya pada kolom input dan tombol.<\/p><p><strong>Mengatur warna dan hover effect pada input dan tombol<\/strong><\/p><p>Agar kolom input dan tombol login terlihat lebih menarik, Anda bisa mengatur warnanya serta menambahkan efek hover saat mouse diarahkan pada kolom dan tombol tersebut.<\/p><p>Masukkan kode berikut dalam file CSS Anda untuk menambahkan gaya yang dimaksud:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">input[type=\"text\"] {\n  width: 100%;\n  padding: 10px;\n  margin: 10px 0;\n  margin-bottom: 20px;\n  border: 1px solid #ccc;\n  border-radius: 4px;\n  box-sizing: border-box;\n}\n\ninput[type=\"password\"] {\n  width: 100%;\n  padding: 10px;\n  margin: 10px 0;\n  border: 1px solid #ccc;\n  border-radius: 4px;\n  box-sizing: border-box;\n}\n\ninput[type=\"checkbox\"] {\n  margin-right: 5px;\n  margin-bottom: 15px;\n}\n\nbutton[type=\"submit\"] {\n  width: 100%;\n  padding: 10px;\n  background-color: #007bff;\n  color: white;\n  border: none;\n  border-radius: 4px;\n  cursor: pointer;\n}\n\nbutton[type=\"submit\"]:hover {\n  background-color: #0056b3;\n}\n\np {\n  text-align: center;\n}\n\na {\n  color: #007bff;\n}\n\na:hover {\n  text-decoration: underline;\n}<\/pre><p>Berikut penjelasan setiap bagian kode di atas:<\/p><ul class=\"wp-block-list\">\n<li><strong>input[type=&rdquo;text&rdquo;]<\/strong>, <strong>input[type=&rdquo;password&rdquo;]<\/strong>, dan <strong>input[type=&rdquo;checkbox&rdquo;]<\/strong> berfungsi untuk mengatur ukuran dan jarak elemen bagi kolom input.<\/li>\n\n\n\n<li><strong>button[type=&rdquo;submit&rdquo;]<\/strong> menetapkan warna biru pada tombol login.<\/li>\n\n\n\n<li><strong>:hover<\/strong> menambahkan efek hover, mengubah warna tombol saat mouse diarahkan padanya.<\/li>\n\n\n\n<li><strong>text-align:<\/strong> mengatur perataan teks ke tengah untuk fitur lupa kata sandi dan daftar akun.<\/li>\n\n\n\n<li><strong>text-decoration:<\/strong> menetapkan gaya garis bawah agar teks lupa kata sandi dan daftar akun terlihat sebagai link.<\/li>\n<\/ul><p>Apabila sudah selesai memodifikasi tampilan elemen-elemen form Anda, mari lanjutkan untuk mengatur tingkat responsnya.<\/p><p><strong>Responsivitas menggunakan media queries<\/strong><\/p><p>Agar tampilan halaman login tetap optimal saat diakses di layar yang lebih kecil seperti perangkat seluler atau tablet, Anda bisa menambahkan media queries untuk menyesuaikan ukuran dan tata letak.<\/p><p>Berikut cuplikan kodenya:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">@media (max-width: 600px) {\n  .login-container {\n    width: 90%;\n    margin: 50px auto;\n  }\n\n  input[type=\"text\"], input[type=\"password\"], button[type=\"submit\"] {\n    font-size: 16px;\n  }\n}<\/pre><p>Penjelasannya adalah sebagai berikut:<\/p><ul class=\"wp-block-list\">\n<li><strong>@media (max-width: 600px)<\/strong> &ndash; memastikan gaya hanya diterapkan di layar dengan lebar maksimal 600 piksel (perangkat seluler).<\/li>\n\n\n\n<li><strong>width: 90%<\/strong> &ndash; mengatur lebar container agar tetap rapi di layar berukuran kecil.<\/li>\n\n\n\n<li><strong>font-size<\/strong> &ndash; memperbesar ukuran teks agar lebih mudah dibaca di layar kecil.<\/li>\n<\/ul><p>Secara keseluruhan, kode CSS di atas berfungsi untuk menambahkan gaya pada form login Anda agar terlihat rapi, modern, dan responsif.<\/p><p>Berikut adalah kode CSS lengkapnya:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">.login-container {\n  width: 300px;\n  margin: 100px auto;\n  padding: 20px 40px;\n  background-color: #FFF8DC;\n  border-radius: 8px;\n  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n}\n\ninput[type=\"text\"] {\n  width: 100%;\n  padding: 10px;\n  margin: 10px 0;\n  margin-bottom: 20px;\n  border: 1px solid #ccc;\n  border-radius: 4px;\n  box-sizing: border-box;\n}\n\ninput[type=\"password\"] {\n  width: 100%;\n  padding: 10px;\n  margin: 10px 0;\n  border: 1px solid #ccc;\n  border-radius: 4px;\n  box-sizing: border-box;\n}\n\ninput[type=\"checkbox\"] {\n  margin-right: 5px;\n  margin-bottom: 15px;\n}\n\nbutton[type=\"submit\"] {\n  width: 100%;\n  padding: 10px;\n  background-color: #007bff;\n  color: white;\n  border: none;\n  border-radius: 4px;\n  cursor: pointer;\n}\n\nbutton[type=\"submit\"]:hover {\n  background-color: #0056b3;\n}\n\np {\n  text-align: center;\n}\n\na {\n  color: #007bff;\n}\n\na:hover {\n  text-decoration: underline;\n}\n\n@media (max-width: 600px) {\n  .login-container {\n    width: 90%;\n    margin: 50px auto;\n  }\n\n  input[type=\"text\"], input[type=\"password\"], button[type=\"submit\"] {\n    font-size: 16px;\n  }\n}<\/pre><p>Simpan perubahan yang sudah Anda buat pada file <strong>styles.css<\/strong>. Sebagai contoh, berikut adalah hasil tampilan form login HTML kami yang sudah diberi gaya menggunakan file CSS:<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"425\" height=\"460\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/10\/halaman-log-in-html-dan-css.png\/public\" alt=\"tampilan formulir yang sudah diberi gaya menggunakan css\" class=\"wp-image-40828\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/10\/halaman-log-in-html-dan-css.png\/w=425,fit=scale-down 425w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/10\/halaman-log-in-html-dan-css.png\/w=277,fit=scale-down 277w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/10\/halaman-log-in-html-dan-css.png\/w=139,fit=scale-down 139w\" sizes=\"(max-width: 425px) 100vw, 425px\" \/><\/figure><\/div><p>Selesai! Anda pun berhasil membuat tampilan halaman login website menggunakan HTML dan CSS.<\/p><p>Namun, Anda masih perlu memastikan semuanya berfungsi dengan benar untuk memberikan pengalaman pengguna yang optimal.<\/p><h3 class=\"wp-block-heading\" id=\"h-3-pastikan-integrasi-dan-lakukan-pengujian\">3. Pastikan Integrasi dan Lakukan Pengujian<\/h3><p>Meskipun tadi Anda sudah menambahkan integrasi CSS dalam file <strong>index.html<\/strong>, pastikan lagi file tersebut sudah direferensikan dengan benar dalam kode Anda.<\/p><p>Cek kembali penulisan nama file dan path pada tag HTML. Kesalahan seperti spasi tambahan atau huruf kapital yang tidak sesuai bisa menyebabkan file CSS tidak terhubung dengan benar. Akibatnya, form login Anda mungkin tidak ditampilkan sebagaimana mestinya.<\/p><p>Kemudian, lakukan pengujian menggunakan web browser. Akses file HTML yang disimpan di komputer Anda dengan mengklik dua kali file tersebut, atau buka langsung melalui browser dengan memilih <strong>File<\/strong> &rarr; <strong>Open File<\/strong>.<\/p><p>Kami merekomendasikan agar Anda menggunakan jendela samaran (Incognito) agar semua perubahan Anda ditampilkan secara aktual, terutama kalau Anda melakukan perubahan pada file.<\/p><p>Periksa apakah formulir login sudah ditampilkan sesuai dengan gaya CSS yang ditentukan. Lihat lagi warna latar belakang, jarak antarelemen, atau teks pada form Anda. Pastikan juga form bisa menerima input, dan tombol login berfungsi dengan baik.<\/p><p>Dengan melakukan pengecekan dan pengujian ulang, Anda pun bisa memastikan tidak ada masalah serius yang mengganggu pengalaman pengguna Anda saat form tersebut diupload ke hosting Anda.<\/p><p>Seperti inilah hasil form yang kami buat saat dibuka menggunakan browser Google Chrome:<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1071\" height=\"645\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/10\/formulir-login-chrome.png\/public\" alt=\"tampilan form login html dibuka menggunakan chrome\" class=\"wp-image-40839\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/10\/formulir-login-chrome.png\/w=1071,fit=scale-down 1071w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/10\/formulir-login-chrome.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/10\/formulir-login-chrome.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/10\/formulir-login-chrome.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/10\/formulir-login-chrome.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1071px) 100vw, 1071px\" \/><\/figure><\/div><h3 class=\"wp-block-heading\" id=\"h-4-upload-form-login-ke-website\">4. Upload Form Login ke Website<\/h3><p>Setelah memastikan form login bekerja dengan baik, Anda bisa menguploadnya ke hosting agar bisa diakses secara online. Dengan mengupload file HTML dan CSS ke server, form login ini bisa digunakan oleh semua pengguna melalui internet.<\/p><p>Di bagian ini, kami akan menjelaskan <a href=\"\/id\/tutorial\/cara-upload-website\">cara upload file website ke hosting<\/a> menggunakan hPanel. Apabila menggunakan control panel lain, langkah-langkahnya juga tidak akan terlalu berbeda.<\/p><p>Berikut cara mengupload form login HTML Anda ke hosting:<\/p><ol class=\"wp-block-list\">\n<li>Login ke <strong>hPanel<\/strong>, lalu klik menu <strong>Website<\/strong>.<\/li>\n\n\n\n<li>Pilih <strong>Dashboard<\/strong> di samping website yang Anda maksud, lalu klik <strong>File Manager<\/strong>.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1133\" height=\"453\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/09\/file-manager-hpanel-new.png\/public\" alt=\"tampilan menu file manager hostinger di halaman dashboard hpanel\" class=\"wp-image-40027\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/09\/file-manager-hpanel-new.png\/w=1133,fit=scale-down 1133w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/09\/file-manager-hpanel-new.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/09\/file-manager-hpanel-new.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/09\/file-manager-hpanel-new.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/09\/file-manager-hpanel-new.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1133px) 100vw, 1133px\" \/><\/figure><\/div><ol start=\"3\" class=\"wp-block-list\">\n<li>Buka direktori utama website, biasanya bernama <strong>public_html<\/strong>.<\/li>\n\n\n\n<li>Anda bisa membuat folder baru, misalnya <strong>form-login<\/strong>.<\/li>\n\n\n\n<li>Buka folder tersebut, lalu pilih <strong>Upload<\/strong> &rarr; <strong>File<\/strong> pada menu bagian atas.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"726\" height=\"394\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/05\/memilih-file-untuk-diupload-ke-file-manager-hostinger.png\/public\" alt=\"\" class=\"wp-image-35940\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/05\/memilih-file-untuk-diupload-ke-file-manager-hostinger.png\/w=726,fit=scale-down 726w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/05\/memilih-file-untuk-diupload-ke-file-manager-hostinger.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/05\/memilih-file-untuk-diupload-ke-file-manager-hostinger.png\/w=150,fit=scale-down 150w\" sizes=\"(max-width: 726px) 100vw, 726px\" \/><\/figure><\/div><ol start=\"6\" class=\"wp-block-list\">\n<li>Pilih file <strong>index.html<\/strong> dan <strong>styles.css<\/strong> dari komputer Anda, lalu tunggu sampai prosesnya selesai.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"276\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/10\/index-html-dan-styles-css-file-manager.png\/public\" alt=\"tampilan file manager hpanel menunjukkan file index html dan styles css\" class=\"wp-image-40842\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/10\/index-html-dan-styles-css-file-manager.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/10\/index-html-dan-styles-css-file-manager.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/10\/index-html-dan-styles-css-file-manager.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/10\/index-html-dan-styles-css-file-manager.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><p>Setelah file berhasil diupload, buka web browser lalu ketik <strong>URL website<\/strong> Anda diikuti dengan nama folder file HTML tersebut. Sebagai contoh, form kami bisa diakses dengan mengetik <strong>namadomain.tld\/form-login\/index.html<\/strong>.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"520\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/10\/mengakses-form-login-html-di-browser.png\/public\" alt=\"tampilan form login html diakses di browser\" class=\"wp-image-40843\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/10\/mengakses-form-login-html-di-browser.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/10\/mengakses-form-login-html-di-browser.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/10\/mengakses-form-login-html-di-browser.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/10\/mengakses-form-login-html-di-browser.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><p>Apabila Anda memerlukan panduan terkait pengembangan website HTML, silakan baca tutorial kami lainnya tentang <a href=\"\/id\/tutorial\/cara-membuat-website-dengan-html\">cara membuat website dengan HTML dan CSS<\/a>.<\/p><figure class=\"wp-block-image size-large\"><a href=\"\/id\/\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2023\/02\/ID-Web-hosting_in-text-banner.png\/public\" alt=\"\" class=\"wp-image-29634\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2023\/02\/ID-Web-hosting_in-text-banner.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2023\/02\/ID-Web-hosting_in-text-banner.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2023\/02\/ID-Web-hosting_in-text-banner.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2023\/02\/ID-Web-hosting_in-text-banner.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><h2 class=\"wp-block-heading\" id=\"h-kesimpulan\">Kesimpulan<\/h2><p>Membuat form login dengan HTML dan CSS merupakan salah satu proses penting yang perlu Anda pelajari apabila ingin mengembangkan website dari nol. Form ini tidak hanya berfungsi untuk autentikasi, tetapi juga membantu mencerminkan branding bisnis melalui desain yang konsisten.<\/p><p>Untuk membuatnya, Anda perlu menyiapkan struktur HTML dulu lalu menambahkan gaya dengan CSS. Setelah itu, Anda bisa mengupload file form login tersebut ke hosting agar bisa diakses secara online.<\/p><p>Dengan mengikuti langkah-langkah di artikel ini, Anda pun bisa membuat form login yang fungsional, menarik, dan responsif. Apabila ingin mengeksplorasi fungsi lainnya, Anda bisa mempelajari validasi JavaScript untuk meningkatkan keamanan dan pengalaman pengguna.<\/p><p>Selamat mencoba dan semoga berhasil!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Setiap website yang memiliki fitur login sebaiknya menyediakan form login yang tidak hanya fungsional, tapi juga menarik. Sebab, selain untuk autentikasi, tampilan halaman login website juga bisa membantu membangun branding. Desain yang konsisten dengan logo dan warna brand bisa menunjukkan profesionalisme bisnis dan meningkatkan kepercayaan pengguna. Proses login yang lancar juga membantu membangun reputasi, terutama [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/id\/tutorial\/cara-membuat-form-login-html-css\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":190,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rank_math_title":"Cara Membuat Halaman Login Website dengan HTML + CSS","rank_math_description":"Tampilan login website yang menarik bisa membantu memperkenalkan brand Anda. Cari tahu cara membuat form login dengan HTML dan CSS yuk!","rank_math_focus_keyword":"membuat form login","footnotes":""},"categories":[4983],"tags":[],"class_list":["post-40776","post","type-post","status-publish","format-standard","hentry","category-web-development"],"hreflangs":[],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/posts\/40776","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/users\/190"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/comments?post=40776"}],"version-history":[{"count":40,"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/posts\/40776\/revisions"}],"predecessor-version":[{"id":41113,"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/posts\/40776\/revisions\/41113"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/media?parent=40776"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/categories?post=40776"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/tags?post=40776"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}