Cara Membuat Desain Form Login HTML dan pure CSS sangatlah mudah, oleh sebab itu Panduan Code akan menjelaskan tutorial tersebut dengan detail.
Cara Membuat Desain Form Login HTML Terbaru
Kamis, April 30, 2020
Daftar Isi [Tampil]
Seperti yang kita ketahui form login pada sebuah website sangatlah penting, dan desain form login suatu website juga bisa menjadi salah satu ciri khas website tersebut.
Oleh sebab itu desain form login haruslah cantik dan menarik, tetapi disamping desain form login yang cantik keamanan dan kelengkapan fitur juga sangat penting.
Contohnya fitur dari atribut HTML seperti required, maxlength, minlength, type, placeholder, name, method, id, action, dan value.
Bingung ya apa itu required, maxlength, minlength, type, placeholder, name, method, action, id, dan value?, jika ya jangan khawatir Panduan Code akan bahas semuanya dengan detail dibawah.
Oke sekarang mari kita mulai bahas tutorial cara membuat desain form login HTML-nya, yuk simak pembahasannya dibawah ini.
Langkah-langkah Membuat Desain Form Login HTML
1. Buat Folder Baru Untuk Form Login HTML
Langkah pertama yang harus kamu lakukan adalah membuat sebuah folder baru untuk form login HTML-nya, sebagai contoh seperti gambar dibawah ini.
Nah sebagai contoh Panduan Code membuat folder baru bernama desainlogin, kamu dapat membuat folder baru dengan nama apapun sesuai keinginan kamu.
2. Download Gambar Background Form Login HTML
Selanjutnya pada tahap ini kamu download gambar background untuk form login HTML-nya, kamu dapat mencari gambar backgroundnya di Google sesuai keinginan kamu.
Atau kamu dapat menggunakan gambar background login yang sudah Panduan Code siapkan, agar kamu tidak bingung mencari gambar backgroundnya.
Jika sudah kamu download gambar background form login HTML tersebut silahkan pindahkan dan simpan gambar tersebut ke dalam folder baru yang tadi kamu buat.
3. Source Code Desain Form Login HTML
Pada tahap ini Panduan Code sudah menyiapkan source code desian login HTML-nya, jadi kamu bisa copy source code tersebut agar lebih mudah.
Namun jangan khawatir kamu tidak paham dengan source code desain form login HTML tersebut karena Panduan Code akan bahas secara detail di bagian akhir.
Buka text editor yang kamu gunakan untuk ngoding, seperti visual studio code, sublime, atau bisa juga pakai notepad.
Kemudian copy source code desain form login HTML dibawah ini dan save dengan nama login.html pada folder baru yang kamu buat tadi.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Panduan Code</title>
<style>
body {
background-image: url(background-login.jpg);
background-repeat: no-repeat;
background-size: cover;
}
@media screen and (max-width: 300px) {
#formlogin {
width: 250px;
}
}
@media (min-width: 800px) {
#formlogin {
width: 450px;
}
}
#formlogin {
background: white;
height: auto;
box-shadow: 0 7px 16px 0 rgba(50,50,50,0.2);
border-radius: 25px;
margin-top: 150px;
}
#formlogin form {
margin-top: 15px;
float: left;
padding: 5px;
}
#formlogin .inputtext {
width: 90%;
margin-top: 1px;
height: 50px;
border: 0px;
border-bottom: 1px solid #6a82fb;
font-size: 16px;
font-family: OpenSans-Light;
background: transparent;
}
#formlogin .tombol {
margin-top: 40px;
width: 45%;
height: 40px;
background: #6a82fb;
border: none;
color: white;
font-family: product sans;
font-size: 20px;
border-radius: 5px;
box-shadow: 0 7px 16px 0 rgba(50,50,50,0.2);
}
#formlogin h1 {
text-align: center;
padding-top: 25px;
color: #6a82fb;
font-family: Product Sans;
}
#formlogin .copyright {
padding-bottom: 20px;
}
</style>
</head>
<body>
<center>
<div id="formlogin">
<h1>LOGIN PANDUAN CODE</h1>
<form id="login" action="" method="post">
<input type="text" class="inputtext" name="" value="" required minlength="4" maxlength="20" placeholder="Masukan Username">
<input type="password" class="inputtext" name="" value="" required minlength="6" maxlength="20" placeholder="Masukan Password">
<input type="submit" class="tombol" name="" value="Submit"> <input type="reset" class="tombol" name="" value="Reset"> </form>
<div class="copyright">
Copyright © <a href="https://www.panduancode.com">Panduan Code</a>
</div>
</div>
</center>
</body>
</html>
Jadi struktur desain form loginnya akan terlihat seperti gambar dibawah ini.
Nah sekarang coba kamu jalankan file login.html pada browser kamu, dan lihat hasilnya, pasti akan sama seperti yang terlihat pada gambar pertama di artikel tutorial ini.
Dan sampai disini sebenarnya kamu sudah selesai membuat desain form login HTML, namun seperti yang tadi Panduan Code katakan Panduan Code akan menjelaskan source code tersebut dengan detail.
Oleh sebab itu simak penjelasan detailnya dibawah ini.
Penjelasan Source Code Desain Login HTML
Untuk penjelasan tentang struktur HTML5 sudah Panduan Code bahas pada artikel sebelumnya tentang Belajar Coding HTML Untuk Pemula, jadi jika kamu belum pelajari Panduan Code sarankan pelajari terlebih dahulu.
Sekarang kita bahas atribut-atribut yang sudah Panduan Code sebutkan diawal artikel yaitu tetang required, maxlength, minlength, type, placeholder, name, method, action, id, dan value.
Mengenal Atribut-atribut Dalam Form Login
1. Atribut required
Atribut required adalah atribut HTML yang berfungsi untuk melakukan validasi terhadap tag input pada form HTML apakah input sudah diisi atau belum.
Jika input belum diisi maka akan muncul notifikasinya bahwa field / input belum disi, untuk lebih jelasnya lihat pada gambar dibawah ini.
2. Atribut maxlength
Atribut maxlength adalah atribut yang berfungsi untuk mengatur jumlah maksimal karakter yang diinput pada tag input HTML.
Misalnya Panduan Code atur nilai dari atribut maxlength-nya 8 pada tag input username, maka kita hanya bisa menginputkan 8 karakter saja contoh 12345678.
3. Atribut minlength
Atribut minlength adalah atribut yang berfungsi untuk mengatur jumlah minimal karakter yang harus diinput pada tag input HTML, jika kurang dari jumlah yang ditentukan maka akan muncul notifikasinya seperti gambar dibawah ini.
4. Atribut type
Atribut type adalah atribut yang berfungsi untuk memberi tahu komputer bahwa yang boleh diinput pada tag input hanya type yang telah ditentukan, misalnya type="password", type="text", type="number" dan lain-lain.
Jadi jika kita menginputkan selain dari type yang telah ditentukan maka otomatis tidak akan masuk pada tag input.
5. Atribut name
Atribut name adalah atribut yang berfungsi untuk membuat variabel yang akan digunakan sebagai variabel pemrosesan pada PHP nantinya.
Jadi jika desain form login kamu tidak memiliki Atribut name maka nanti jika dilanjutkan dengan pemrosesan data dengan PHP form login kamu tidak akan berfungsi.
6. Atribut placeholder
Atribut placeholder adalah atribut yang berfungsi untuk membuat text didalam tag input HTML, placeholder ini sangat membantu user untuk memahami apa yang harus mereka inputkan.
Contohnya seperti text Username dan Password yang sering kita temukan pada tag input di form login.
7. Atribut method
Atribut method adalah atribut yang berfungsi untuk menjalankan perintah terhadap form HTML apakah untuk request data (get) atau untuk mengirim data (post).
Ada dua nilai untuk atribut method pada HTML yaitu get dan post.
Nah karena ini form login maka method yang digunakan adalah method post.
8. Atribut action
Atribut action adalah atribut yang berfungsi untuk memberi tahu komputer bahwa proses data pada form HTML akan diproses oleh file PHP tertentu.
9. Atribut id
Atribut id adalah atribut yang berfungsi untuk memberi nama element HTML tertentu dan isi / nilai id-nya tidak boleh ada yang sama dalam satu file HTML.
10. Atribut value
Atribut value adalah atribut yang berfungsi untuk menampilkan nilai awal pada HTML ketika dijalankan pada browser.
Nah itulah pembahasan singkat mengenai atribut-atribut yang bisa digunakan pada form login HMTL.
Cukup sampai disini dulu pembahasan kita tentang tutorial Cara Membuat Desain Form Login HTML, semoga apa yang Panduan Code sampaikan dapat bermanfaat aamiin.
Jika kamu mempunyai pertanyaan seputar form login silahkan tanyakan pada kolom komentar dibawah.
Akhir kata dari Panduan Code jangan lupa titik koma.
Coba cari lagi apa yang ada inginkan pada kolom berikut:
Bantu Apresiasi Bantu berikan apresiasi jika artikelnya dirasa bermanfaat agar penulis lebih semangat lagi membuat artikel bermanfaat lainnya. Terima kasih.