Web tidak hanya digunakan untuk menampilkan informasi saja, akan tetapi digunakan untuk mengambil informasi atau data dari pengunjung. Salah satu cara untuk mengambil informasi dari pengunjung adalah dengan menggunakan form. Pada topik ini akan dibahas bagaimana cara membuat form menggunakan HTML.
Form digunakan untuk menerima data dari inputan user, biasanya diterapkan pada form login, pendaftaran, transaksi, dan sebagainya.
Form dalam web bisa disamakan dengan formulir di dunia nyata. Form dapat diisi, kemudian diproses menggunakan bahasa pemrograman tertentu.
Form di HTML dapat kita buat dengan tag <form>.
nantinya semua tag input akan dimasukkan ke dalam tag ini
<form>
<!-- input form ada disini -->
</form>Kode html diatas tidak akan menghasilkan apa-apa. Karena kita belum membuat input-nya.
Agar web dapat menerima inputan dari user, maka kita perlu membuat beberapa input di dalam form yang dibuat. Untuk membuat input kita bisa menggunakan tag <input />
<form>
<input type="text" name="username" placeholder="john doe" />
</form>Input memiliki beberapa attribut yang harus diberikan :
typemerupakan tipe dari input. Ada beberapa tipe input yang dapat digunakan, yaitutext,number,submit,checkbox,radio,email,file,passwordnamemerupakan nama dari input yang akan menjadi kunci dan variabel di dalam program.placeholdermerupakan keterangan atau petunjuk yang mendeskripsikan nilai seperti apa yang harusnya diinputkan oleh user. Attribute ini hanya berguna apabilatypedari input adalahtext,email, danpassword.
Tag <label> digunakan untuk memberikan label pada input yang sudah dibuat, sehingga user akan mengetahui data apa yang harus diinputkan pada input tersebut, misalnya username
Untuk menerapkan label pada input, kita bisa memasukkan tag <input> kedalam tag <label>. Tujuannya agar ketika user melakukan klik pada label, maka cursor akan otomatis fokus ke input yang ada di dalam label tersebut.
<label>
Username:
<input type="text" name="username" placeholder="john doe" />
</label>Agar lebih memahami cara membuat form pada HTML, kita akan membuat sebuah form login sederhana yang memiliki beberapa input sebagai berikut :
- Input username atau email
- Input password
- Checkbox untuk remember me
- Tombol untuk login
Langkah pertama yang akan dilakukan untuk membuat form login pada web, adalah dengan membuat inputnya menggunakan tag input dengan type yang berbeda - beda sesuai kebutuhan. Jangan lupa untuk membungkus semua tag input tersebut dengan tag form.
<form>
<input type="text" name="username" placeholder="john doe" />
<input type="password" name="password" />
<input type="checkbox" name="remember" />
<input type="submit" name="submit" value="Login" />
</form>Agar user tau data apa yang perlu dimasukkan ke dalam form, maka kita perlu menerapkan label pada masing - masing input yang sudah dibuat sebelumnya
<form>
<label>
Username:
<input type="text" name="username" placeholder="john doe" />
</label>
<label>
Password:
<input type="password" name="password" />
</label>
<label>
<input type="checkbox" name="remember" />
Remember me
</label>
<input type="submit" name="submit" value="Login" />
</form>Berikut hasil akhir dari contoh kasus form login yang kita buat, jangan lupa tambahkan struktur dasar HTML agar file HTML kita valid
<html>
<head>
<title>Form Login</title>
</head>
<body>
<form>
<label>
Username:
<input type="text" name="username" placeholder="john doe" />
</label>
<label>
Password:
<input type="password" name="password" />
</label>
<label>
<input type="checkbox" name="remember" />
Remember me
</label>
<input type="submit" name="submit" value="Login" />
</form>
</body>
</html>