Modul 3.
Formulir HTML (HTML Form)
Formulir HTML digunakan untuk mengumpulkan input pengguna. Input
pengguna paling sering dikirim ke server untuk diproses.
Tag HTML yang sering dipakai pada form adalah:
No Tag Keterangan
1 <form></form> Tag awal dan akhir untuk pembuatan form
2 <label></label> mendefinisikan label untuk beberapa elemen
form.
3 <select></select> Mendefinisikan masukan user berupa
pilihan. Biasanya akan dipasangkan dengan
tag <option></option>
4 <option></option> Mendefinisikan item-item pilihan yang
biasanya telah didefinisikan sebelumnya
oleh tag <select></select>
5 <input type=text> Menampilkan kolom input teks satu baris
6 <input type="radio"> Menampilkan tombol radio (untuk memilih
salah satu dari banyak pilihan)
7 <input Menampilkan kotak centang (untuk memilih
type="checkbox"> nol atau lebih dari banyak pilihan)
8 <input Menampilkan tombol kirim (untuk
type="submit"> mengirimkan formulir)
Langsung saja kita buat source codenya:
<!DOCTYPE html>
<html>
<body>
<h2>Contoh Formulir online </h2>
<form action="/action_page.php">
<label for="nama">Nama:</label><br>
<input type="text" id="nama" name="nama" value="Putri"><br>
<label for="alamat">Alamat:</label><br>
<input type="text" id="alamat" name="alamat" value="Lumajang"><br>
<label for="pendidikan"> Pilih pendidikan terakhir Anda</label><br>
<select name="pendidikan">
<option value="none" selected>pendidikan</option>
<option value="SMA">SMA</option>
<option value="S1">S1</option>
<option value="S2">S2</option>
</select><br><br>
<label for "Jenkel">Jenis Kelamin</label><br>
<input type="radio" id="jenkel0" name="jenkel" value="male">
Male
<input type="radio" id="jenkel1" name="jenkel" value="female">
Female<br>
<label for "hobi">Hobi</label><br>
<input type="checkbox" id="hobi0" name="hobi"
value="Membaca"> Membaca
<input type="checkbox" id="hobi1" name="hobi"
value="Browsing"> Browsing<br>
<input type="submit" value="Kirim">
</form>
Hasil:
Perhatian
Perhatikan pada source code yang ditebalkan. Apabila radio button yang
dipakai pada sebuah pilihan group yang sama misalnya jenis
kelamin, elemen name nya harus sama. Karena kalau tidak, akan
menyebabkan error demikian juga dengan checkbox.
Elemen id dalam satu dokumen, harus bersifat unik, sehingga antara
satu id dan dengan id yang lain, tidak boleh sama
Tugas di kelas:
Buatlah form dengan ketentuan masukan sebagai berikut:
1. No KTP -------> Text
2. Nama --------> Text
3. Agama --------> Radio Button (Silahkan diberi pilihan sendiri>
4. Skill ----------> checkbox (Silahkan diberi pilihan sendiri>
