Pasti Anda sudah familiar dengan form login. Form ini biasanya meminta username dan password user sebelum masuk ke layanan online. Tampilan form login sendiri memang cukup sederhana. Tapi tahukah Anda kalau form login juga bisa terlihat menjadi luar biasa? Show
Pada artikel ini, Anda akan mengetahui cara membuat form login dengan HTML dan CSS. HTML adalah bahasa markup untuk membuat halaman web dan struktur dari form login. Sedangkan, CSS untuk mendesain tampilan form login. Sudah tidak sabar untuk mengetahui cara membuat form login dengan HTML dan CSS? Mari simak penjelasan berikut. Apa yang Perlu Anda Persiapkan?Sebelum membuat form login keren dengan HTML dan CSS, ada dua hal yang perlu Anda persiapkan, yaitu:
Baca Juga: 25+ Contoh Coding HTML untuk Pemula Persiapan Cara Membuat Form Login yang Menarik dengan HTML dan CSSSebelum melakukan cara membuat form login yang menarik di HTML dan CSS, ada beberapa hal yang perlu Anda siapkan. Berikut rinciannya: 1. Buat Folder Khusus untuk Menyimpan File Form LoginLangkah pertama, yaitu membuat folder khusus. Ini akan menjadi wadah untuk menyimpan file HTML dan CSS form login. Ingat, file HTML dan CSS harus berada dalam satu folder yang sama untuk memastikan keduanya dapat terhubung. Sebagai catatan, jangan menggunakan spasi untuk memberi nama folder. Sebab, spasi memungkinkan terjadinya error. Alih-alih spasi, pakailah tanda penghubung seperti hyphen (-), underscore (_), dan lain-lain. 2. Buat File HTML dan CSS dengan Text EditorTahap berikutnya yaitu membuat file HTML dan CSS. Buka text editor, kemudian buatlah file HTML dan CSS. Untuk file HTML, beri nama index.html. Sedangkan untuk file CSS, namakan dengan style.css. Di sini, kami menggunakan text editor Notepad++. Baca Juga : Editor HTML Terbaik Untuk Web Developer Cara Membuat Form Login yang Menarik dengan HTMLSetelah persiapannya lengkap, Anda bisa memulai cara membuat form login yang menarik di HTML. Kami akan menjelaskannya satu per satu dan secara detail, jadi Anda tidak perlu takut akan merasa kebingungan. Yuk, kita mulai sekarang! 1. Deklarasikan Dokumen HTML AndaSekarang, buka file html form login Anda. Supaya form Anda nantinya dapat ditampilkan dengan benar, kita harus mendeklarasikannya terlebih dahulu. Deklarasi ini akan memberitahu web browser bahwa Anda menuliskan instruksi dalam versi HTML. Penulisannya sendiri ditandai dengan adanya DOCTYPE atau Document Type Declaration (DTD) pada baris pertama text editor.
Setelah mendeklarasikan dokumen HTML, Anda bisa memulai proses pembuatan form dengan tag <html>. 2. Buat Kepala Halaman Form LoginDi dalam tag <html>, silakan masukkan tag <head>. Tag ini berfungsi untuk membuat kepala dokumen.
Tag head mengandung berbagai metadata atau informasi teknis terkait dokumen HTML yang dibuat. Contohnya seperti judul halaman, deskripsi halaman, sumber file eksternal, dan lain-lain. 3. Beri Judul Halaman Form LoginSeperti pembahasan pada poin sebelumnya, kita dapat mengisi metadata di dalam tag <head>. Salah satu komponennya yaitu judul. Untuk membuat judul halaman, kita menggunakan tag <title>.
Syntax lengkapnya bisa Anda lihat di bawah ini.
Nantinya, Anda bisa melihat hasil jadinya pada judul tab web browser Anda. Mudah, bukan? 3. Sisipkan File CSSCara 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? Alasannya, file CSS berada terpisah dari dokumen HTML. Karena itu, dibutuhkan jembatan untuk menghubungkan kedua file ini. Jika tidak terhubung, browser akan gagal menyatukan desain dari file CSS.
Nah, Anda bisa membuat jembatan ini dengan atribut link rel.
Style sheet dalam atribut link rel bermakna untuk memberitahu browser bahwa file eksternal yang disisipkan berjenis style sheet dengan ekstensi .css. Secara lengkapnya, berikut script untuk menyisipkan file CSS ke dalam dokumen HTML.
Untuk pembahasan lengkap mengenai style sheet dan eksekusi hasilnya akan kami bahas pada bagian Cara Membuat Form Login yang Menarik dengan CSS. 4. Buat Badan Form LoginSeusai 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.
Caranya, cukup letakkan tag <body> di bawah tag <head>. Jika sudah, berarti Anda siap untuk melangkah ke tahap berikutnya. 5. Buat Layout Form LoginMembuat 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. Cara membuat layout ini yaitu menggunakan elemen <div> dengan class = “container”. Tag ini akan mengelompokkan atau menampung komponen tertentu ke dalam satu grup.
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>.
Sebagai bocoran, fungsi dari elemen ini akan lebih terasa nanti ketika kita sudah bermain dengan CSS. Tapi sebelum sampai ke sana, kita fokus dulu untuk menyusun struktur form login keren Anda. Nah, untuk seterusnya, kita akan membuat organ-organ form login keren di dalam tag <div> ini. 6. Beri Judul Form LoginHal pertama yang paling penting dalam sebuah form login yaitu judul utama alias heading 1. Judul form ini berbeda dengan judul halaman yang sudah kita buat di awal tadi. Judul halaman ibarat nama ruangan yang kita pakai untuk menyimpan dokumen kerja. Sedangkan judul form merupakan nama dokumen kerja yang berada di ruang penyimpanan tersebut. Karena itu, heading 1 memuat topik utama atau informasi inti dari sebuah dokumen/konten. Heading text inilah yang digunakan mesin pencari untuk menilai performa SEO. Nah, supaya judul form login Anda dapat dikenali oleh mesin pencari, gunakanlah tag <h2>. Tag ini juga akan membuat judul terlihat lebih penting dan menonjol.
Di sini, kami akan menamakan form ini sebagai ‘LOGIN’. Berikut syntax lengkapnya.
Dengan syntax tersebut, Anda baru akan mendapat tampilan seperti ini. Yap, masih polos sekali, bukan? Eits, sabar dulu, karena kita masih harus membuat beberapa organ lagi. 7. Buat Kotak Form LoginSetelah memiliki judul, sekarang saatnya membuat kotak form login. Kita akan menggunakan tag <form>. 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.
Untuk langkah-langkah selanjutnya, kita akan membuat organ form login di dalam tag <form>. 8. Buat Kolom Username dan PasswordSetidaknya, 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. Tag <label> berfungsi untuk memberi keterangan teks pada halaman form.
Setelah label jadi, berikutnya membuat kolom input dengan tag <input type>. Kolom input memungkinkan user memasukkan informasi yang diperlukan, seperti username dan password.
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. Supaya syntax Anda lebih rapi, silakan bubuhkan tag <br> di akhiran setiap tag di atas. Tag <br> berfungsi sebagai break atau penanda baris baru. Contoh script lengkap perpaduan seluruh tag ini dapat Anda lihat di bawah.
Hasil jadinya dapat Anda lihat pada gambar berikut. 9. Buat Tombol Form LoginSampai sini, struktur form login keren Anda hampir selesai. Tinggal menambahkan satu komponen lagi, yaitu tombol. Cara membuat tombol pada dokumen HTML cukup mudah. Di dalam tag <form>, silakan berikan tag <button>.
Keseluruhan syntax detailnya bisa Anda dapatkan di bawah ini.
Sekarang, struktur form Anda sudah jadi. Tampilannya seperti yang terlihat di sini. Cara membuat form login yang menarik dengan HTML sudah selesai Anda lakukan. Setelahnya, mari kita beranjak untuk mendesainnya dengan CSS supaya semakin terlihat menawan. Cara Membuat Form Login yang Menarik dengan CSSSudah tidak sabar untuk mendesain form login Anda? Sekarang kita akan beralih dari HTML ke CSS. Sedikit mengingatkan, CSS atau Cascading Style Sheets digunakan untuk mengatur tampilan yang ditulis dengan bahasa markup. Berikut langkah demi langkah cara membuat form login yang menarik dengan CSS. 1. Desain Format Layout Form LoginLangkah awal, desain layout form. Di sini Anda bisa mengatur margin, padding, outline, serta jenis font yang ingin digunakan. Jika bingung, mari melihat penjelasan tiap property tersebut di bawah ini.
Penerapan keempat property di atas dapat Anda temukan di bawah ini. Anda bisa mengubah-ubah ukuran maupun jenis font ini sesuai kebutuhan.
Eksekusinya seperti yang terlihat di bawah ini. Sudah mulai terlihat sedikit perbedaannya dengan sebelum diatur format dan spasinya, bukan? 2. Berikan Background pada Form LoginLanjut ke cara membuat form login keren berikutnya, yaitu memberi background. Silakan gunakan property <body>. Di dalam property ini, terdapat beberapa atribut:
Penggunaan kelima atribut di atas pada form login keren ini bisa Anda temukan pada syntax berikut.
Dengan syntax tersebut, maka hasil yang Anda dapatkan kira-kira seperti ini. Sudah sedikit lebih menarik, bukan? 3. Desain Kotak Form LoginBeranjak dari background, kini saatnya kita mendesain kotak form. Nah, seperti sudah yang kami janjikan pada bagian Cara Membuat Form Login yang Menarik dengan HTML, fungsi container akan cukup terasa di sini. Di awal, kita sudah menggunakan div class=”container”. Dengan begitu, komponen yang berada dalam wadah tersebut mengelompok menjadi beberapa bagian sesuai dengan tagnya: kotak form, judul form, kolom username dan password, serta tombol form. Sebagai awalan, kita akan mendesain kotak form terlebih dahulu. Ada beberapa property yang kita gunakan:
Berikut syntax lengkap untuk mendesain kotak form login keren:
Dari script di atas, kotak form login Anda akan berubah menjadi seperti ini. Sekarang, Anda sudah memiliki kotak form dengan warna yang agak transparan. Berbeda dengan sebelumnya, di mana kotak form Anda belum terlihat dan tulisannya nampak masih menyatu dengan gambar latar belakang. 4. Desain Judul Form LoginMasih menggunakan class .container, sekarang kita akan mendesain judul form login atau H1. Dibandingkan dengan kotak form login, property dalam menghias judul form lebih sederhana, yaitu:
Untuk syntax desain judul form seperti yang terlihat di bawah ini.
Sekarang, form login Anda sudah semakin cantik. Namun, ini belum sempurna. Mari melangkah ke tahap berikutnya. 5. Desain Kolom Username dan PasswordDi sini, kita akan mendesain dua jenis komponen: label teks dan kolom input. Karena itu, tahapan ini dibagi menjadi dua: 5.1. Mendesain Label TeksPertama, kita akan mempercantik label teks terlebih dahulu. Hanya membutuhkan dua property untuk mendesain label teks:
Syntax desain label teks cukup sederhana, seperti yang terlihat di bawah ini.
Nah, sekarang form Anda sudah lebih cantik. Warna label teks berubah sesuai yang Anda inginkan. 5.2. Mendesain Kolom InputSekarang, kita bergerak ke bawah label teks, yaitu kolom input. Beberapa komponen yang diperlukan sudah kita pelajari pada tahap sebelumnya, sehingga Anda hanya perlu mengulang saja.
Nah, berikut syntax untuk mendesain kolom input form login keren.
Syntax tersebut akan menghasilkan tampilan yang hampir lengkap. Namun, tombol form di sana masih terlihat sangat polos. Nah, kita akan memperbaikinya pada tahap selanjutnya. 6. Desain Tombol Form LoginSebentar lagi, cara membuat form login yang menarik dengan CSS Anda akan selesai. Tinggal satu komponen lagi yang perlu Anda hias, yaitu tombol form. Untuk mendesain tombol form, kita membutuhkan property yang sudah tidak asing ini:
Nah, syntax yang bisa Anda gunakan untuk membuat tombol form login keren yaitu sebagai berikut.
Eksekusinya sudah cukup terlihat. Tombol form sudah jauh lebih cantik daripada sebelum-sebelumnya. Syntax Lengkap Cara Membuat Form Login yang Menarik di HTML dan CSSSampai sini, Anda sudah memahami berbagai tag yang dibutuhkan untuk cara membuat form login yang menarik dengan HTML dan CSS. Untuk memudahkan Anda, kami juga sudah menyertakan syntax lengkap sehingga Anda bisa tinggal menyalinnya. Syntax Lengkap Cara Membuat Form Login yang Menarik di HTML
Syntax Lengkap Cara Membuat Form Login yang Menarik di CSS
Cara Menjalankan Form LoginSetelah cara membuat form login yang menarik dengan HTML dan CSS selesai, Anda bisa menikmati hasilnya. Berikut cara menjalankannya. 1. Buka Form Login dengan BrowserSekarang, saatnya untuk melihat form login keren yang sudah Anda buat. Caranya, cukup buka file index.html menggunakan browser kesayangan Anda. Setelah itu, akan terlihat tampilan seperti ini. Jika Anda melakukan perubahan pada script HTML dan CSS, jangan lupa untuk menyimpannya terlebih dahulu. Untuk melihat hasilnya lagi, cukup reload browser yang membuka halaman form Anda. 2. Online-kan Project AndaMeski sudah jadi, form login keren Anda masih hanya berada dalam direktori komputer. Karena itu, perlu untuk mengunggahnya secara online agar form tersebut dapat terlihat di website Anda. Ada tiga cara upload file HTML ke WordPress:
Namun, untuk melakukan cara-cara di atas, Anda harus menggunakan web hosting. Web hosting merupakan layanan untuk mengonlinekan project Anda sehingga orang-orang bisa mengaksesnya. Nah, salah satu webhosting Indonesia terbaik yang bisa Anda coba yaitu Niagahoster. Dengan fitur kecepatan, jaminan keamanan, dan berbagai manfaat lainnya, Anda bisa menemukan hosting yang sesuai kebutuhan. Baik dari tingkat pemula hingga level perusahaan. Menarik, bukan? PenutupSekarang, Anda sudah mengetahui cara membuat form login yang menarik dengan HTML dan CSS. Dengan langkah yang sederhana, Anda sudah bisa memiliki form login yang menarik dan keren. Namun, itu hanya satu contoh dari banyak cara untuk menggunakan HTML dan CSS, lho. Jika mempelajarinya lebih dalam, maka akan ada lebih banyak hal yang bisa Anda kreasikan. Nah, untuk mendukung kemampuan Anda, silakan pelajari HTML di sini → Belajar HTML Lengkap untuk Pemula. Jangan lupa untuk mempelajari CSS juga agar ilmu Anda semakin lengkap, ya! |