Blogcahti: Cara Membuat Form Login HTML Paling Mudah

Cara Membuat Form Login HTML Paling Simple (Sumber : pixabay.com)

Cara Membuat Form Login HTML - Kita sering sekali saat berkunjung ke sebuah website tidak lepas dari sebuah form. Misal ketika kita mengunjungi situs sosial media, disitu terdapat form untuk masuk dan juga mendaftar. Fungsi form itu sendiri adalah untuk input data seperti nama, passwod dan lainnya yang kemudian akan dieksekusi oleh webserver. Contoh form lainnya bisa kamu lihat pada komentar yang ada di sebuah blog.

Dasar pembuatan form yaitu menggunakan tag <form> dan beberapa atribut html. Biasanya form didampingi kode CSS (Cascading Style) agar tampilannya lebih menarik. Disini saya akan memberikan contoh pembuatan form login sederhana.

Cara Membuat Form Login Sederhana

Pertama buat script html sebagai berikut menggunakan text editor.

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Form</title>

<style>

.wrapper{
padding:10px 0;
position:relative;
width:100%;
max-width:500px;
background:#f3f3ff;
margin:0 auto;
}

.header{
color:#3989AE;
text-align:center;
font-size:30px;
}

.form {
font-size:20px;
background-color:#f3f3ff;
margin-top:10px;
text-align:center;
}

#username {
padding:7px;
margin-top:20px;
margin-bottom:10px;
}

#password {
margin-bottom:20px;
padding:7px;
}

#btn-login {
background-color:#3989AE;
color:white;
border:none;
text-align:center;
max-width:200px;
padding:10px;
border-radius:18px;
}

#btn-login:hover {
background-color:red;
}



</style>

</head>

<body >

<div class="wrapper">

<div class=header>

<p>Login Form<p>

</div>

<div class="form">

<form action="form.php" method="post"/>

<div>

<input id="username" type="text" name="username" value="" placeholder="Username or Email"/>

</div>

<div>

<input id="password" type="password" name="password" name="password" value="" placeholder="Password"/>

</div>

<div>

<button id="btn-login"  type="submit">Sign In</button>

</div>

</div>

</form>

</body>

</html>

Simpan script diatas dengan nama form.html atau apa saja asalkan format filenya html.

Hasil Tampilan di Browser

Kode diatas akan menampilkan keluaran pada browser seperti ini.

Didalam tag <form> terdapat atribut action dan method. Kedua atribut ini memilki masing-masing fungsi yang berbeda. Atribut action berisi value alamat file php sebagai bagian untuk pemrosesan dari isi form tersebut. Didalam contoh diatas menggunakan form.php sebagai value dari atribut action. Sedangkan pada atribut method akan mengirimkan nilai yang biasanya menggunakan value GET dan POST.

Kemudian pada tag <input> terdapat atribut type yang berisi value text dan password. Value text akan menampilkan kotak inputan untuk diisi oleh user. Perbedaannya dengan value password yaitu isi dari inputan akan disembunyikan.

Didalam kode diatas saya menyisipkan kode CSS agar tampilan form lebih menarik. Kamu bisa mempercantik tampilan form dengan mengedit baris CSS yang berwarna merah.

Sekian artikel tentang Cara Membuat Form Login HTML Paling Mudah semoga bermanfaat.