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.
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.
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:
- 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.
Membuat Folder Form Login
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.
- 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.
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!
- 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 .
- 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.
- 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 .</li> </ol> <p><title>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? Membuat Title Form Login- 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?
- Sisipkan 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.
- 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.
<body>
</body>
Caranya, cukup letakkan tag di bawah tag . Jika sudah, berarti Anda siap untuk melangkah ke tahap berikutnya.
- 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
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 . Jangan lupa juga untuk tutup bungkusnya dengan tag
.
Halaman Login
<body>
<div class="container">
</div>
</body>
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
ini.
- Beri Judul Form Login
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 <h1>. Tag ini juga akan membuat judul terlihat lebih penting dan menonjol.
<h1> Masukkan Judul <h1>
Di sini, kami akan menamakan form ini sebagai ‘LOGIN’. Berikut syntax lengkapnya.
<!DOCTYPE HTML>
<html>
<head>
<title>Halaman Login</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>Login</h1>
</div>
</body>
</html>
Dengan syntax tersebut, Anda baru akan mendapat tampilan seperti ini.
Membuat Judul Form Login
Yap, masih polos sekali, bukan? Eits, sabar dulu, karena kita masih harus membuat beberapa organ lagi.
- Buat Kotak Form Login
Setelah memiliki judul, sekarang saatnya membuat kotak form login. Kita akan menggunakan tag .
Mirip seperti tag
, tag juga berfungsi untuk mengelompokkan elemen. Bedanya, tag secara khusus menampung seluruh elemen yang berkaitan dengan sebuah form. Seperti kolom username dan password.
Halaman Login
<body>
<div class="container">
Login
<form>
</form>
</div>
</body>
Untuk langkah-langkah selanjutnya, kita akan membuat organ form login di dalam tag .
- Buat Kolom Username dan Password
Setidaknya, ada tiga tag yang digunakan untuk membuat kolom username dan password. Anda akan membutuhkan tag: , , dan
. Kita akan membahasnya satu per satu.
Tag berfungsi untuk memberi keterangan teks pada halaman form.
Masukkan teks
Membuat Kolom Username dan Password
Setelah label jadi, berikutnya membuat kolom input dengan tag . Kolom input memungkinkan user memasukkan informasi yang diperlukan, seperti username dan password.
Membuat Input Type Form Login
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.
Membuat Input Type Username dan Password
Supaya syntax Anda lebih rapi, silakan bubuhkan tag
di akhiran setiap tag di atas. Tag
berfungsi sebagai break atau penanda baris baru.
Contoh script lengkap perpaduan seluruh tag ini dapat Anda lihat di bawah.
Halaman Login
<body>
<div class="container">
Login
<form>
<label>Username</label><br>
<input type="text"><br>
<label>Password</label><br>
<input type="password"><br>
</form>
</div>
</body>
Hasil jadinya dapat Anda lihat pada gambar berikut.
Membuat Break
- Buat Tombol Form Login
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 . Masukkan Nama Tombol
Keseluruhan syntax detailnya bisa Anda dapatkan di bawah ini.
Halaman Login
<body>
<div class="container">
Login
<form>
<label>Username</label><br>
<input type="text"><br>
<label>Password</label><br>
<input type="password"><br>
<button>Log in</button>
</form>
</div>
</body>
Sekarang, struktur form Anda sudah jadi. Tampilannya seperti yang terlihat di sini.
Membuat Tombol Form Login
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 CSS
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.
- Desain Format Layout Form Login
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.
Margin. Fungsinya untuk mengatur tepi garis luar. Berdasarkan posisinya, ada empat jenis margin: margin-top, margin-right, margin-bottom, margin-left;
Padding. Artinya jarak dalam di antara konten dengan bingkai;
Outline. Berfungsi sebagai garis bingkai form;
Font-family. Berperan untuk mengatur jenis font sesuai dengan yang Anda inginkan.
Penerapan keempat property di atas dapat Anda temukan di bawah ini. Anda bisa mengubah-ubah ukuran maupun jenis font ini sesuai kebutuhan.
*{
margin: 0;
padding: 0;
outline: 0;
font-family: ‘Open Sans’, sans-serif;
}
Eksekusinya seperti yang terlihat di bawah ini. Sudah mulai terlihat sedikit perbedaannya dengan sebelum diatur format dan spasinya, bukan?
Mengatur Format Layout Form Login
- Berikan Background pada Form Login
Lanjut ke cara membuat form login keren berikutnya, yaitu memberi background. Silakan gunakan property . Di dalam property ini, terdapat beberapa atribut:
Height. Fungsinya untuk mengatur ketinggian objek. Height: 100vh berarti tinggi objek sama dengan 100% tinggi layar tab;
Background-image. Berperan untuk memasukkan alamat penyimpanan gambar latar belakang berupa link;
Background-size. Berfungsi untuk mengatur ukuran gambar latar belakang. Ada tiga tipe ukuran yang bisa digunakan: auto, cover, dan contain;
Background-position. Fungsinya menetapkan posisi awal gambar latar belakang. Banyak opsi untuk ini, yaitu: left-top, left-center, left-bottom, right-top, right-center, right-bottom, center-top, center, dan center-bottom;
Background repeat. Ada kalanya dimensi gambar yang dipilih terlalu kecil atau memiliki pattern berulang sehingga membutuhkan perulangan supaya background terisi penuh. Karena itu, ada dua value yang bisa Anda gunakan: repeat dan no-repeat.
Penggunaan kelima atribut di atas pada form login keren ini bisa Anda temukan pada syntax berikut.
body{
height: 100vh;
background-image: url (Masukkan link);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
- Desain Kotak Form Login
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:
Position, untuk mengatur penempatan objek dalam halaman website. Ada lima macam posisi: static, relative, fixed, absolute, dan sticky;
Left, yaitu penempatan objek mulai dari jarak tepi kiri layar;
Top, merupakan penempatan objek mulai dari tepi atas layar;
Transform, memungkinkan kita membuat efek rotasi dan animasi pada suatu objek. Terdapat beberapa jenis gaya: translate, scale, skew, rotate, dan matrix;
Padding, mengatur spasi atau jarak di dalam konten dengan satuan pixel;
Width, mengatur lebar objek dalam satuan pixel;
Background-color, mendesain pewarnaan pada bagian latar belakang objek;
Box-shadow, fungsinya membuat bayangan pada objek.
Berikut syntax lengkap untuk mendesain kotak form login keren:
.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);}
Dari script di atas, kotak form login Anda akan berubah menjadi seperti ini.
Membuat Kotak Form Login
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.
- Desain Judul Form Login
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:
Text-align, yaitu untuk memposisikan teks. Ada beberapa posisi yang bisa Anda pilih: right, left, center, dan justify;
Color, untuk mengatur warna teks. Silakan mengecek kode warna yang Anda inginkan di sini → Kode Warna HTML
Margin-bottom, memberikan jarak dalam bagian bawah dalam satuan pixel;
Text-transform, berperan untuk memodifikasi format teks. Ada tiga gaya yang bisa Anda pilih: uppercase, lowercase, dan capitalize;
Border-bottom, fungsinya memberikan garis bingkai pada bagian bawah teks. Anda juga bisa memodifikasi warnanya.
Untuk syntax desain judul form seperti yang terlihat di bawah ini.
.container h1{
text-align: left;
color: #fafafa;
margin-bottom: 30px;
text-transform: uppercase;
border-bottom: 4px solid #2979ff;
}
Sekarang, form login Anda sudah semakin cantik. Namun, ini belum sempurna. Mari melangkah ke tahap berikutnya.
Mendesain Judul Form Login
- Desain Kolom Username dan Password
Di sini, kita akan mendesain dua jenis komponen: label teks dan kolom input. Karena itu, tahapan ini dibagi menjadi dua:
5.1. Mendesain Label Teks
Pertama, kita akan mempercantik label teks terlebih dahulu. Hanya membutuhkan dua property untuk mendesain label teks:
Text-align, untuk mengatur posisi teks. Silakan pilih salah satu di antara: left, right, center, atau justify;
Color, fungsinya mengubah warna teks.
Syntax desain label teks cukup sederhana, seperti yang terlihat di bawah ini.
.container label{
text-align: left;
color: #90caf9;
Nah, sekarang form Anda sudah lebih cantik. Warna label teks berubah sesuai yang Anda inginkan.
Mendesain Kolom Username dan Password
5.2. Mendesain Kolom Input
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.
Width, untuk mengatur lebar objek;
Padding, mengatur jarak dalam objek;
Margin-bottom, mengatur jarak objek dari garis tepi bagian bawah;
Border, fungsinya memberikan bingkai pada objek;
Background-color, untuk memodifikasi warna objek;
Border-bottom; memberikan bingkai bawah serta modifikasi warnanya;
Color, mengatur warna teks pada objek;
Font-size, mengubah jenis font di dalam objek.
Nah, berikut syntax untuk mendesain kolom input form login keren.
.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;
}
Syntax tersebut akan menghasilkan tampilan yang hampir lengkap. Namun, tombol form di sana masih terlihat sangat polos. Nah, kita akan memperbaikinya pada tahap selanjutnya.
Mendesain Kolom Input Form Login
- Desain Tombol Form Login
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:
Width, fungsinya mengatur lebar objek;
Padding, untuk memodifikasi jarak dalam objek;
Border, memberikan bingkai pada objek;
Background-color, mengatur warna gambar latar belakang pada objek;
Font-size, untuk mengatur ukuran font pada objek;
Color, berfungsi untuk mendesain warna objek.
Nah, syntax yang bisa Anda gunakan untuk membuat tombol form login keren yaitu sebagai berikut.
.container form button{
width: 100%;
padding: 5px 0;
border: none;
background-color:#2979ff;
font-size: 18px;
color: #fafafa;
}
Eksekusinya sudah cukup terlihat. Tombol form sudah jauh lebih cantik daripada sebelum-sebelumnya.
Mendesain Tombol Form Login
Syntax Lengkap Cara Membuat Form Login yang Menarik di HTML dan CSS
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.
Syntax Lengkap Cara Membuat Form Login yang Menarik di HTML
Halaman Login
<body>
<div class="container">
<h1>Login</h1>
<form>
<label>Username</label><br>
<input type="text"><br>
<label>Password</label><br>
<input type="password"><br>
<button>Log in</button>
</form>
</div>
</body>
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(https://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 h1{
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
Setelah cara membuat form login yang menarik dengan HTML dan CSS selesai, Anda bisa menikmati hasilnya. Berikut cara menjalankannya.
- Buka Form Login dengan Browser
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.
Membuka Form Login
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.
- Online-kan Project 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:
Membuat template WordPress secara manual berdasarkan website HTML statis.
Menginstall tema setengah jadi dan memigrasikan konten.
Membayar pengembang untuk convert 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?
Penutup
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.