A. Jenis-jenis inputan dalam Tag Form
Dalam membuat sebuah inputan data, kita dapat menggunakan tag form yang terdapat dalam bahasa HTML . Terdapat banyak pilihan inputan di dalam tag form . Berikut jenis-jenis inputan dalam tag form :
- Textbox
Untuk membuat inputan textbox maka tag yang digunakan adalah tag <input> dengan type = “text” . Berikut contoh script nya :
<input type=”text” name=””>
- Radio Button
Jika ingin menggunakan radio button dalam html, tag yang di pakai adalah tag <input> dengan type = “radio” . Berikut Contoh radio button :
<input type=”radio” name=”” value=””>
- Checkbox
Checkbox merupakan inputan untuk memilih data lebih dari satu . Berikut contoh script untuk checkbox :
<input type=”checkbox” name=”” value=””>
- Textarea
Textarea mirip dengan textbox , namun jika menggunakan inputan textarea , dapat memasukkan daa lebih dari 1 baris . Contoh script dari textarea sebagai berikut :
<textarea name=””></textarea>
- Select
Tag select di gunakan untuk membuat list sebuah pilihan . Script dari tag select seperti di bawah ini :
<select name=””></select>
Untuk menamahkan pilihan dalam tag select , tambahkan tag <option> ke dalam tag <select> seperti di bawah ini :
<select name=””>
<option value=”Pilihan 1″>Pilihan 1</option>
<option value=”Pilihan 2″>Pilihan 2</option>
<option value=”Pilihan 3″>Pilihan 3</option>
</select>
- Password
Lalu untuk membuat inputan password , tag yang di gunakan adalah tag <input> dengan type = “password” . Berikut contoh penulisan inputan password :
<input type=”password” name=””>
- Submit Button
Untuk membuat tombol submit , tag yang di pakai adalah tag <input> . Berikut contoh nya :
<input type=”submit” name=”” value=”Simpan”>
- Reset Button
Kebalikan dari submit button , reset button berfungsi untuk membersihkan area inputan ketika kita ingin membatalkan inputan . Contoh script reset button seperti di bawah ini :
<input type=”reset” name=”” value=”Batal”>
B. Membuat Form Biodata
Untuk membuat tampilan form input biodata , masukkan script di bawah ini ke dalam text editor , kemudian simpan file dengan nama biodata.html ke dalam folder C:/XAMPP/htdocs
<!DOCTYPE html>
<html>
<head>
<title>Biodata</title>
</head>
<body>
<h2>Form Biodata</h2>
<form action=””>
Nama <br>
<input type=”text” name=”” placeholder=”masukkan nama …” >
<br><br>
Password <br>
<input type=”password” name=”” placeholder=”masukkan password ..”><br><br>
Jenis Kelamin <br>
<input type=”radio” name=”jekel” value=”Laki-laki” checked> Laki-laki
<input type=”radio” name=”jekel” value=”Perempuan”> Perempuan<br><br>
Hobi <br>
<input type=”checkbox” name=”” value=”Bola”> Bola
<input type=”checkbox” name=”” value=”Basket”> Basket
<br><br>
Pilihan <br>
<select name=””>
<option>-pilih-</option>
<option value=”Pilihan 1″>Pilihan 1</option>
<option value=”Pilihan 2″>Pilihan 2</option>
<option value=”Pilihan 3″>Pilihan 3</option>
</select><br><br>
Alamat <br>
<textarea name=””></textarea><br><br>
<input type=”submit” name=”” value=”Simpan”>
<input type=”reset” name=”” value=”Batal”>
</form>
</body>
</html>
Maka tampilan dari script di atas saat di jalankan dalam browser seperti di bawah ini :
