Modul 3

FORM

Tujuan :

1. Praktikan mampu membuat form

2. Praktikan paham cara penggunaan dari fasilitas form
3. Praktikan mampu meningputkan field sesuai dengan kegunaan

Intro :

HTML menyediakan fasilitas yang tak kalah penting yaitu sebuah cara bagi user
untuk berinteraksi pada halaman web. HTML menyediakan sebuah fasilitas kepada user
untuk memasukkan dan menerima data. Kemudia data tersebut akan ditindaklanjuti
menjadi sebuah informasi yang berguna bagi user dan juga pemilik situs. Fasilitas ini
dilakukan dengan menggunakan elemen Form.

3.1 Form

Form berfungsi sebagai bagian untuk memasukkan data dari pengguna yang kemudian
akan diproses agar dapat digunakan sesuai kebutuhan.

3.2 Media Input

Media input memiliki berbagai kontrol masukan yang berfungsi sesuai dengan
kenutuhan dalam memasukkan data.

3.2.1 Text

Berfungsi menerima masukan berbentuk teks.

Format :

<textarea> </textarea>

< Input Type=”text” >

Atribut type :

Color Time
Datetime-local Datetime
Number Month
Tel Search
Week url
Date Password
Email Text
range file
3.2.2 Radio Button

Radio button berfungsi untuk masukan pilihan tunggal.

Format :

< Input Type=”radio” Name=”nama_inputan”value=”nilai_input”> Teks_pilihan

3.2.3 Checkbox

Checkbox berfungsi menerima masukan dari beberapa pilihan, boleh 1 atau lebih atau
tidak memilih sama sekali.

Format :

< Input Type=”checkbox” Name=”nama_inputan”value=”nilai_input”> Teks_pilihan

3.2.4 Dropdown list

Dropdown list berfungsi untuk memilih satu dari beberapa file pilihan yang dikeluarkan.

< select name=”nama_inputan”> multiple>

<option value=”nilai_inputan”> Teks_pilihan </option>
<option value=”nilai_inputan1”> Teks_pilihan1 </option>
</select>

3.2.5 Button

Button berfungsi sebagai mana fungsi tombol yaitu memasukkan perintah sesuai tugas
yang diberikan pada tombol tersebut.

3.2.5.1 Submit

Submit berfungsi memanggil alamat yang telah didefenisikan di atribut action.

< Input Type=”submit” name=”nama_inputan” value=”nilai_input”>

3.2.5.2 Reset

Reset berfungsi untuk mengembalikan form pada kondisi awal atau mengosongkan
nilai semua elemen.

< Input Type=”reset” name=”nama_inputan” value=”nilai_input”>

3.2.6 Organisasi Elemen Form

Elemen media input tidak akan berguna jika tidak dilengkapi dengan informasi
tambahan, yang menyebabkan user bingung dalam memasukkan nilai yang harus diisi
kedalam elemen-elemen media input yang tersedia.

Untuk memberikan informasi tambahan kepada user, telah disediakan fasilitas yang
terdiri dari elemen-elemen yang dapat digunakan sebagai penanda terhadap media
input.

3.2.6.1 Label

Label berfungsi menambahkan teks pada media input. Label harus disertai dengan
atribut for yang berisi nilai yang sam dengan atribut pada id media input agar ketika
mengklik label elemen media input langsung bekerja.

Format :

<label for=”nilai_id_inputan”>Teks_keterangan</label>
< Input Type=”text” name=”nama_inputan” id=”id_inputan”>

3.2.6.2 Fieldset

Fieldset berfungsi untuk membungkus beberapa elemen media input, menandakan

bahwa elemen-elemen tersebut berada pada satu grup yang sama atau saling
berhubungan.

<fieldset>
<label for="nilai_ide_inputan">Teks_keterangan </label>
<input type="text" name="nama_inputan " id="ide_inputan">
<label for="nilai_ide_inputan1">Teks_keterangan1</label>
<input type="text" name="nama_inputan1 " id="ide_inputan1">
</fieldset

3.2.6.3 Legend

Legend berfungsi untuk memberikan judul fieldset.

Format :

<fieldset>
<legend>Teks_keterangan</legend>
<label for="nilai_ide_inputan">Teks_keterangan </label>
<input type="text" name="nama_inputan " id="ide_inputan">
<label for="nilai_ide_inputan1">Teks_keterangan1</label>
<input type="text" name="nama_inputan1 " id="ide_inputan1">
</fieldset
3.2.7 Validasi Input

Kadang kala kita jumpai elemen-elemen yang tidak wajib diisi oleh user. Form kemudian
akan mengecek terhadap nilai masukan dari user, apakah nilai yang wajib telah diisi
atau tidak. Jika belum maka form akan tertolak sembari mengeluarkan pesan kesalahan
yang menerangkan bahwa ada isian wajib yang tiddak terisi.

Cara validasi form :

1. Atrribut required
Required berfungsi sebagai pananda bahwa konten harus diisi sesuai dengan
tipe yang telah ditentukan.

< Input Type=”gmail” name=”nama_inputan” required >