Membuat Form dengan HTML
Situs web tidak hanya digunakan untuk menampilkan informasi saja, namun juga untuk mengambil informasi atau data dari pengunjung. Salah satu cara untuk mengambil informasi dari pengunjung ialah menggunakan form.
Form dalam web bisa disamakan dengan formulir di dunia nyata. Dapat diisi, kemudian diproses dengan program tertentu.
Singkatnya, form adalah elemen pada HTML yang digunakan untuk mengelola data dari input yang dilakukan oleh user.
Macam-macam form: form Login, form registrasi, form kontak dsb
Contoh form di situs web:
Di bawah ini adalah tutorial sederhana untuk membuat form di HTML, namun tidak sampai memprosesnya.
Tag yang dibutuhkan untuk membuat form adalah <form></form>
Elemen-elemen dalam Form
· input : kolom di mana user bisa menginputkan sesuatu. Bisa berupa text field, radio button, combo box dsb.
· textarea : mirip text field tapi lebih banyak yang bisa kita isikan, biasanya untuk mengisikan komentar, pesan, email dsb.
· select : untuk membuat drop down atau combo box
· button : tombol untuk mengirimkan data
· label : untuk menandai sebuah elemen input
Tag input adalah <input type=””> (tidak memiliki tag penutup)
type bisa diisi: text, password, radio, checkbox
submit, reset, button (yang tiga terakhir tidak menggunakan input)
Langsung saja kita praktekkan (tulisan ini ditujukan untuk praktek ekstrakurikuler TIK tingkat SMP/MTs)
· Buka teks editor Sublime Text
· Buat folder latihan berisi file form.html
· Buat struktur dasar html:
Ketik “html” tekan tombol tab, maka otomatis muncul struktur dasar html, beri judul HTML Form
<!DOCTYPE html>
<html>
<head>
<title>HTML Form</title>
</head>
<body>
</body>
</html>
Di antara body ketikan tag <form></form>
Selanjutnya:
Input text field
<label for="username">username: </label>
<input type="text" id="username">
Input password
<label for="password">password: </label>
<input type="password" id="password">
Radio button
<input type="radio" id="pria" name="jeniskelamin"><label for="pria">pria</label>
<input type="radio" id="wanita" name="jeniskelamin"><label for="wanita">wanita</label>
Checkbox
<input type="checkbox" id="menyanyi"><label for="menyanyi">menyanyi</label>
<input type="checkbox" id="olahraga"><label for="olahraga">olahraga</label>
<input type="checkbox" id="berkebun"><label for="berkebun">berkebun</label>
Textarea
<textarea></textarea>
Combo Box
<select>
<option>Bandung</option>
<option>Jakarta</option>
<option>Semarang</option>
<option>Surabaya</option>
</select>
Submit
<button type="submit">Kirim!</button>
Selengkapnya adalah sebagai berikut:
<!DOCTYPE html>
<html>
<head>
<title>HTML Form</title>
</head>
<body>
<form>
<label for="username">username: </label>
<input type="text" id="username">
<br>
<label for="password">password: </label>
<input type="password" id="password">
<br>
<input type="radio" id="pria" name="jeniskelamin"><label for="pria">pria</label>
<input type="radio" id="wanita" name="jeniskelamin"><label for="wanita">wanita</label>
<br>
<input type="checkbox" id="menyanyi"><label for="menyanyi">menyanyi</label>
<input type="checkbox" id="olahraga"><label for="olahraga">olahraga</label>
<input type="checkbox" id="berkebun"><label for="berkebun">berkebun</label>
<br>
<textarea></textarea>
<br>
<select>
<option>Bandung</option>
<option>Jakarta</option>
<option>Semarang</option>
<option>Surabaya</option>
</select>
<br>
<button type="submit">Kirim!</button>
</form>
</body>
</html>
Jika dilihat hasilnya di Browser (di Sublime Text : klik kanan > Open in Browser) akan seperti di bawah ini:
