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?
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:
- Text Editor. Text editor adalah suatu software atau program komputer untuk menulis kode program. Gunakanlah text editor yang paling membuat Anda nyaman. Bisa Notepad++, Sublime Text, Visual Code Studio, dan lain-lain.
- Browser. Browser berfungsi untuk melihat hasil form login yang sudah Anda buat. Anda bebas menggunakan browser terbaik seperti Chrome, Mozilla Firefox, atau pun browser lainnya.
Baca Juga: 25+ Contoh Coding HTML untuk Pemula
Persiapan Cara Membuat Form Login yang Menarik dengan HTML dan CSS
Sebelum 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 Login
Langkah 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 Editor
Tahap 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 HTML
Setelah 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 Anda
Sekarang, 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 .
2. Buat Kepala Halaman Form Login
Di dalam tag , silakan masukkan tag . 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 Login
Seperti pembahasan pada poin sebelumnya, kita dapat mengisi metadata di dalam tag . Salah satu komponennya yaitu judul. Untuk membuat judul halaman, kita menggunakan tag .
Masukkan Judul Halaman Form Login
Syntax lengkapnya bisa Anda lihat di bawah ini.
Halaman Login
Nantinya, Anda bisa melihat hasil jadinya pada judul tab web browser Anda. Mudah, bukan?
3. Sisipkan File CSS
Cara membuat form login yang menarik dengan HTML berikutnya, yaitu menyisipkan file CSS. Masih di dalam tag , 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.
Ingat, file CSS harus berada dalam folder yang sama dengan file HTML.
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 Login
Seusai membuat kepala form login, tahap berikutnya yaitu membuat badan. Untuk itu, Anda membutuhkan tag . Bisa dibilang, ini adalah wadah untuk meletakkan seluruh komponen inti form.
Caranya, cukup letakkan tag di bawah tag . Jika sudah, berarti Anda siap untuk melangkah ke tahap berikutnya.
5. Buat Layout Form Login
Membuat tag 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 Karena kita akan menggunakan elemen ini untuk membungkus isi form, masukkan syntax tadi di dalam tag . Jangan lupa juga untuk tutup bungkusnya dengan tag 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 Hal 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 . 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. Setelah memiliki judul, sekarang saatnya membuat kotak form login. Kita akan menggunakan tag . Mirip seperti tag Untuk langkah-langkah selanjutnya, kita akan membuat
organ form login di dalam tag . Setidaknya, ada tiga tag yang digunakan untuk membuat kolom username dan password. Anda akan membutuhkan tag: , , dan Tag berfungsi untuk memberi keterangan teks pada halaman
form. Setelah label jadi, berikutnya membuat kolom input dengan tag . Kolom input memungkinkan user memasukkan informasi yang diperlukan, seperti username dan password. Nah bicara tentang tag , 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 Contoh script lengkap perpaduan seluruh tag ini dapat Anda lihat di bawah. Hasil jadinya dapat Anda lihat pada gambar berikut. Sampai 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 , silakan berikan tag . 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. Sudah 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. Langkah 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? Lanjut ke cara membuat form login keren berikutnya, yaitu memberi background. Silakan gunakan property . 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? Beranjak 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. Masih 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. Di sini, kita akan mendesain dua jenis komponen: label teks dan kolom input. Karena itu, tahapan ini dibagi menjadi dua: Pertama, 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. Sekarang, 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. Sebentar 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. Sampai 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. Setelah cara membuat form login yang menarik dengan HTML dan CSS selesai, Anda bisa menikmati hasilnya. Berikut cara menjalankannya. Sekarang, 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. Meski 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? Sekarang, 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!
Halaman Login
6. Beri Judul Form Login
Masukkan Judul
Halaman Login
Login
7. Buat Kotak Form Login
Halaman Login
Login
8. Buat Kolom Username dan Password
. Kita akan membahasnya satu per satu.Masukkan teks
di akhiran setiap tag di atas. Tag
berfungsi sebagai break atau penanda baris baru.
Halaman Login
Login
Username
Password
9. Buat Tombol
Form Login
Masukkan Nama Tombol
Halaman Login
Login
Username
Password
Log in
Cara Membuat Form Login yang Menarik dengan CSS
1. Desain Format Layout Form Login
*{
margin: 0;
padding: 0;
outline: 0;
font-family: 'Open Sans', sans-serif;
}
2. Berikan Background pada Form Login
body{
height: 100vh;
background-image: url [Masukkan link];
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
3. Desain Kotak Form Login
.container{
position: absolute;
left: 50%;
top: 50%;
transform: translate[-50%,-50%];
padding: 20px 25px;
width: 300px;
background-color: rgba[0,0,0,.7];
box-shadow: 0 0 10px rgba[255,255,255,.3];}
4. Desain Judul Form Login
.container h2{
text-align: left;
color: #fafafa;
margin-bottom: 30px;
text-transform: uppercase;
border-bottom: 4px solid #2979ff;
}
5. Desain Kolom Username dan Password
5.1. Mendesain Label Teks
.container label{
text-align: left;
color: #90caf9;
5.2. Mendesain Kolom Input
.container form input{
width: calc[100% - 20px];
padding: 8px 10px;
margin-bottom: 15px;
border: none;
background-color: transparent;
border-bottom: 2px solid #2979ff;
color: #fff;
font-size: 20px;
}
6. Desain Tombol Form Login
.container form button{
width: 100%;
padding: 5px 0;
border: none;
background-color:#2979ff;
font-size: 18px;
color: #fafafa;
}
Syntax Lengkap Cara Membuat Form Login yang Menarik di HTML dan CSS
Syntax Lengkap Cara Membuat Form Login yang Menarik di HTML
Halaman Login
Login
Username
Password
Log in
Syntax Lengkap Cara Membuat Form Login yang Menarik di CSS
*{
margin: 0;
padding: 0;
outline: 0;
font-family: 'Open Sans', sans-serif;
}
body{
height: 100vh;
background-image: url[//bit.ly/2FPT1J9];
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.container{
position: absolute;
left: 50%;
top: 50%;
transform: translate[-50%,-50%];
padding: 20px 25px;
width: 300px;
background-color: rgba[0,0,0,.7];
box-shadow: 0 0 10px rgba[255,255,255,.3];
}
.container h2{
text-align: left;
color: #fafafa;
margin-bottom: 30px;
text-transform: uppercase;
border-bottom: 4px solid #2979ff;
}
.container label{
text-align: left;
color: #90caf9;
}
.container form input{
width: calc[100% - 20px];
padding: 8px 10px;
margin-bottom: 15px;
border: none;
background-color: transparent;
border-bottom: 2px solid #2979ff;
color: #fff;
font-size: 20px;
}
.container form button{
width: 100%;
padding: 5px 0;
border: none;
background-color:#2979ff;
font-size: 18px;
color: #fafafa;
}
Cara Menjalankan Form Login
1. Buka Form Login dengan Browser
2. Online-kan Project Anda
Penutup
Chủ Đề