Nama Sekolah : SMKS Inovasi Mandiri

Kompetensi Keahlian : Rekayasa Perangkat Lunak

Kelas/Semester : XI/ Satu
Mata Pelajaran : Pemrograman Web dan Perangkat Bergerak
Materi/Topik : Memahami dan menerapkan tag Form pada
html.
Alokasi Waktu : 45 Menit

A. Materi
1. Elemen <form>
Yang paling utama adalah tag atau element <form>. Ia adalah sebuah tag pembungkus atau kontainer
yang merepresentasikan sebuah “formulir” di mana satu formulir bisa memiliki banyak kolom isian
<form>
...
<!-- berbagai macam kolom isian -->
...
</form>
Tag <form> sendiri tidak memiliki tampilan apa pun alias tidak terlihat secara kasat mata, akan tetapi kita
tetap harus mendefinisikannya agar formulir yang kita buat bisa bekerja dengan baik.

2. Elemen <input>
Di dalam HTML, terdapat banyak jenis model isian mulai dari teks, file, ceklis, dan sebagainya yang
insyaallah akan kita bahas lebih detil pada beberapa pertemuan berikutnya. Dan sebagian besar jenis
model isian tersebut menggunakan tag <input>. Perhatikan kode HTML di bawah:
<input type="text" name="nama" value="Soekarno">
Tag input memiliki 2 buah atribut dasar yaitu:
 type
 dan name.
Atribut type digunakan untuk mendefinisikan tipe isian, sedangkan atribut name adalah sebagai nama dari
isian tersebut.
3. Elemen <label>
Elemen <label>  memiliki fungsi khusus: yaitu untuk melabeli sebuah field inputan. Karena ketika screen
reader membaca konten halaman HTML, lalu menemukan sebuah inputan, ia akan membaca label yang
bersangkutan. Fungsi lain dari tag <label> adalah: ketika kita mengklik label, maka browser akan
meletakkan fokus pada kolom isian yang terhubung dengannya. Kita bisa menghubungkan
sebuah <label> dan <input> dengan atribut for untuk label, dan atribut id pada <input> dengan nilai yang
sama persis.
Perhatikan contoh berikut:
<label for="isian-nama">Nama</label>
<br>
<br>
<input id="isian-nama">
Pada kode di atas, element <input> memiliki id isian-nama, dan elemen label memiliki atribut for dengan
nilai yang sama yaitu isian-nama
4. Radio Button
Berikutnya adalah kolom isian dengan tipe radio. Ia merupakan kolom isian bertipe pilihan di mana bisa
menawarkan beberapa opsi. Akan tetapi hanya satu opsi saja yang boleh dipilih.
<form>
<input type="radio" id="html" name="fav_language" value="HTML">
  <label for="html">HTML</label><br>
  <input type="radio" id="css" name="fav_language" value="CSS">
  <label for="css">CSS</label><br>
   <input type="radio" id="javascript" name="fav_language" value="JavaScript">
  <label for="javascript">JavaScript</label>
</form>

5. Checkbox
Berikutnya adalah checkbox atau cek lis. Bedanya dengan radio, kita bisa memilih lebih dari satu pilihan
dalam satu set opsi. Mari kita ganti semua type="radio" pada kode sebelumnya menjadi type="checkbox".
<form>
<input type="checkbox" id="html" name="fav_language" value="HTML">
  <label for="html">HTML</label><br>
  <input type=" checkbox " id="css" name="fav_language" value="CSS">
  <label for="css">CSS</label><br>
  <input type=" checkbox " id="javascript" name="fav_language" value="JavaScript">
  <label for="javascript">JavaScript</label>
</form>
6. Option
Tag <option>mendefinisikan opsi dalam daftar pilih
<form>
<label for="cars">Pilih Mobil</label><br>
<select id="Pilih">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
</form>
7. Elemen button
input type submit. Ia adalah sebuah <input> yang ditampilkan dalam bentuk tombol. Jika input ini diklik,
maka form akan tersubmit dan browser akan mulai mengirim data.
Perhatikan contoh berikut:

<a href="#">Link Button</a>

<input type="submit" value="Submit Button">
<input type="reset" value="Reset Button">
8. Tag <fieldset>
digunakan untuk mengelompokkan elemen terkait dalam suatu formulir. Tag <fieldset>menggambar
kotak di sekitar elemen terkait.

<fieldset>
<legend>Personalia:</legend>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday"><br><br>
<input type="submit" value="Submit">
</fieldset>
9. Elemen <textarea>
Elemen <textarea>mendefinisikan bidang input multi-baris (area teks):
 <h2>Komentar</h2>

<form>
<textarea name="pesan" rows="10" cols="50">The cat was playing in the garden.</textarea>
<br><br>
<input type="submit" value="kirim">
</form>
10. Tanggal
<input type="date" name="tanggal"/>

B. Analisa
1. Silahkan dipelajari dan dipraktikan tentang element-elment form diatas.
2. Setelah dipelajari dan di pahami, silahkan buat formulir biodata diri setiap elment atau tag diatas
harus ada semuanya. Buat sekreatif mungkin.
3. Simpan dengan nama praktek_form.html.
4. Pertemuan selanjutnya akan dicek dan dibahas.