A. Tujuan Pembelajaran
Setelah mengikuti kegiatan belajar ini Peserta Didik diharapkan dapat :
- Siswa Mampu Memahami elemen-elemen input HTML
- Siswa Mampu Membuat Form dengan elemen input
B. Uraian Materi
Form Adalah suatu lembar tampilan (form )yang dapat diisi data dengan memanfaatkan input yang tersedia pada HTML. Fungsi dari lembar tampilan (form ) digunakan untuk melakukan sesuatu yang diinputkan oleh user. Misal memperolah data user, mendaftar pada service yang tersedia, melakukan transaksi online atau memperoleh feedback dari user lain. Perintah form biasanya selalu digunakan bersamaan dengan input. Sedangkan input sendiri adalah perintah yang digunakan untuk mengisi masukan dari user. Elemen pada input yaitu:
- Text, digunakan untuk mengisi suatu nilai dapat berupa teks atau angka.
- Radio, elemen isian berupa pilihan dimana hanya satu pilihan yang dapat dilakukan.
- Checkbox, elemen yang menyediakan beberapa pilihan bisa lebih dari satu.
- List, elemen pilihan dalam bentuk daftar.
- Button, elemen berupa tombol untuk melakukan suatu proses.
- Submit, elemen tombol yang digunakan untuk memanggil url.
- Reset, elemen tombol yang digunakan untuk mengembalikan kondisi awal.
- Image, digunakan sebagai pengganti button, berupa gambar yang dapat melakukan proses.
- Textarea, elemen yang dapat menampung kumpulan teks ketikan dari user.
- File, elemen button yang dapat memanggil file atau gambar dari storage.
- Password, elemen berupa teks yang khusus digunakan untuk mengisi password.
C. Anatomi Form
Standard atau format umum penulisan dari form adalah sebagai berikut :
<form >
……………
</form>- Elemen Form Inputan
- Inputan Text
Mendefinisikan kontrol input pada form
Format umum penulisan input text pada tag <form> adalah sebagai berikut
<input type= “text” name=” “ value =” > 
- Tombol submit dan reset
Merupakan tombol yang dapat diklik
Format umum penulisan input button pada tag <form> adalah sebagai berikut :
<input type= “submit” name=” “ value =” “> Reset /batal
<input type= “reset” name=” “ value =” “ > | <input type= “reset” name=” “ value =” “ > |
Keterangan :
Sebagai contoh adalah elemen <input> yang atribut TYPEnya adalah text memiliki atribut antara lain :
– NAME, digunakan untuk menamai kotak
– VALUE, digunakan untuk menandai atau menampung teks
– SIZE, digunakan untuk mengatur ukuran teks pada kotak
- PRAKTIKUM
<!DOCTYPE html>
<html>
<head>
<title> Form 1 </title>
</head>
<body>
<form name=”form1” method=” ” action=””>
Nama : <input type="text" name="nama"> <br><br>
Kelas: <input type="text" name="kelas" maxlength="2">
<br><br>
No : <input type="text" name="nomor" value="10">
<br><br>
Hobby: <input type="text" name="hobby" size="8">
<br><br>
Password: <input type="password" name="password">
<br><br>
<input type="submit" name="submit"
value="Submit"> <input type="reset"
name="reset" value="Reset">
</form>
</body>
</html>Simpan dengan nama input.html
Output :
