Tahukah kalian bahwa tampilan login atau tempat untuk kita mengsisi data, itu dapat kita buat dengan mudah menggunakan HTML. Hal itu biasa di sebut dengan form. Form sendiri ialah sebuah komponen pada HTML yang bertugas untuk memberikan inoutan kepada user yang nantinya inputan dari user itu diolah dan diproses oleh sistem.
Tapi pada tutorial kali ini kita tidak sampai mengatur proses tersebut, tetapi lebih ke membuat tampilan dari sebuah form tersebut. Cara membuat form pada HTMl juga sangat mudah.
Langkah Pertama
Buat tag form pada HTML
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Form</title> 8 </head> 9 <body> 10 11 <form action="" method="post"> 12 13 </form> 14 15 16</body> 17</html>
Pada baris no 11 sampai 13 terdapat sebuah tag form HTML. Pada atribut action kita kosongkan saja, karena nantinya tidak akan ada pemrosesan data di dalamnya. Kemudian method ialah mekanisme atau cara kerja data tersebut di proses.
Di dalam form terdapat 2 method yang dapat digunakan, yaitu GET dan POST. Method GET akan memproses data melalui url bar. Jadi, apapun yang kita tulis akan terlihat pada url bar browser. Hal ini tentunya sangat berbahaya jika yang kita tuliskan bersifat penting. Berbeda dengan kita menggunakan POST. Ketika kita menggunakan method POST, data yang kita inputkan pada form tidak diproses melalui url browser, tapi akan dikerjakan di balik layar. Hal ini lah yang menyebabkan penggunaan method POST lebih aman di di sarankan untuk proses inputan.
Langkah Kedua
Disini kita membungkus form kedalam tag div yang kita tambah dengan class form supaya nanti kita bisa memberi style css pada class tersebut.
<div class="form">
<form action="" method="post">
<fieldset>
<legend>LOGIN</legend>
<label for="username">Username</label>
<br>
<input type="text" id="username" required placeholder="Jhon Doe">
<br><br>
<label for="password">Password</label>
<br>
<input type="password" id="password" required placeholder="********">
<br><br>
<input type="button" value="Login">
</fieldset>
</form>
</div>
Langkah Ketiga
Memberikan style pada form kita yang sebelumnya sudah kita bungkus oleh sebuah tag <div> yang sudah kita beri class, agar nantinya tampilan form terletak pada tengah browser.
<style>
.form {
margin: 50px auto;
margin-left: 200px;
margin-right: 200px;
}
</style>
Full Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form</title>
<style>
.form {
margin: 50px auto;
margin-left: 200px;
margin-right: 200px;
}
</style>
</head>
<body>
<div class="form">
<form action="" method="post">
<fieldset>
<legend>LOGIN</legend>
<label for="username">Username</label>
<br>
<input type="text" id="username" required placeholder="Jhon Doe">
<br><br>
<label for="password">Password</label>
<br>
<input type="password" id="password" required placeholder="********">
<br><br>
<input type="button" value="Login">
</fieldset>
</form>
</div>
</body>
</html>
Hasil
Berikut adalah hasil yang sudah kita buat.
Itulah tutorial cara membuat form pada HTML, pada tutorial selanjutnya kita akan mempercantik tampilan form tersebut menggunakan bootstrap. Sekian, sampai bertemu pada tutorial selanjutnya.
