How To Create A Login Page Using Html And Css

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 berfungsi 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

Sebelum melakukan cara membuat form login yang menarik di HTML dan CSS, ada beberapa hal yang perlu Anda siapkan. Berikut rinciannya:

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

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.

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

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

Di dalam tag <html>, silakan masukkan tag <head>. Tag ini berfungsi untuk membuat kepala dokumen.

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

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.

Seperti 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>.

          <title>Masukkan Judul Halaman Form Login</title>

Syntax lengkapnya bisa Anda lihat di bawah ini.

          <!DOCTYPE HTML> <html>     <head>     <title>Halaman Login</title>     </head> </html>

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 <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.

Ingat, file CSS harus berada dalam folder yang sama dengan file HTML.

Nah, Anda bisa membuat jembatan ini dengan atribut link rel.

          <link rel="stylesheet" href="Masukkan file CSS">

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.

          <!DOCTYPE HTML> <html>     <head>         <link rel="stylesheet" href="style.css">     </head> </html>

Untuk pembahasan lengkap mengenai style sheet dan eksekusi hasilnya akan kami bahas pada bagian Cara Membuat Form Login yang Menarik dengan CSS.

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.

          <!DOCTYPE HTML> <html>     <head>         <link rel="stylesheet" href="style.css">     </head>         <body>     </body> </html>

Caranya, cukup letakkan tag <body> di bawah tag <head>. Jika sudah, berarti Anda siap untuk melangkah ke tahap berikutnya.

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.

Cara membuat layout ini yaitu menggunakan elemen <div> dengan class = "container". Tag ini akan mengelompokkan atau menampung komponen tertentu ke dalam satu grup.

          <div class="container">

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>.

          <!DOCTYPE HTML> <html>     <head>         <title>Halaman Login</title>         <link rel="stylesheet" href="style.css">     </head>         <body>         <div class="container">         </div>          </body> </html>

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.

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 <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.

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 <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.

          <!DOCTYPE HTML> <html>     <head>         <title>Halaman Login</title>         <link rel="stylesheet" href="style.css">     </head>         <body>         <div class="container">           <h1>Login</h1>             <form>             </form>         </div>          </body> </html>

Untuk langkah-langkah selanjutnya, kita akan membuat organ form login di dalam tag <form>.

8. Buat Kolom Username dan Password

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.

Tag <label> berfungsi untuk memberi keterangan teks pada halaman form.

          <label>Masukkan teks</label>

Setelah label jadi, berikutnya membuat kolom input dengan tag <input type>. Kolom input memungkinkan user memasukkan informasi yang diperlukan, seperti username dan password.

          <input type="text">

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.

Membuat Input Type Username dan Password

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.

          <!DOCTYPE HTML> <html>     <head>         <title>Halaman Login</title>         <link rel="stylesheet" href="style.css">     </head>         <body>         <div class="container">           <h1>Login</h1>             <form>                 <label>Username</label><br>                 <input type="text"><br>                 <label>Password</label><br>                 <input type="password"><br>             </form>         </div>          </body> </html>

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 <form>, silakan berikan tag <button>.

          <button>Masukkan Nama Tombol</button>

Keseluruhan syntax detailnya bisa Anda dapatkan di bawah ini.

          <!DOCTYPE HTML> <html>     <head>         <title>Halaman Login</title>         <link rel="stylesheet" href="style.css">     </head>         <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> </html>

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.

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?

Lanjut ke cara membuat form login keren berikutnya, yaitu memberi background. Silakan gunakan property <body>. 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; }

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:

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.

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:

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 → Daftar Kode Warna pada HTML dan CSS ;
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.

5. 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.

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.

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.

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.

          <!DOCTYPE HTML> <html>     <head>         <title>Halaman Login</title>         <link rel="stylesheet" href="style.css">     </head>         <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> </html>

          *{     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; }

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.

2. 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 web hosting 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.

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!