Form

Photo by Jackson Sophat on Unsplash

Pernahkah anda melakukan registrasi pada sebuah situs? misalnya kita melakukan pendaftaran untuk email, facebook, dan lain lain.

atau sekedar mengisi form tertentu untuk login ke suatu situs jejaring sosial?

Saya yakin kita semua sudah pernah melakukan semua itu. Sejumlah informasi yang kita masukkan ke dalam sebuah website melalu formulir yang disediakan bisa kita sebut sebagai suatu inputan.

Sejumlah inputan dapat kita kirim ke dalam sebuah sistem dengan menggunakan form. Inputan yang kita kirim digunakan oleh sistem untuk diolah dan di simpan sebelum di proses atau dicetak ke dalam suatu output.

Singkatnya, Form digunakan untuk mengoleksi inputan dari user. Sebuah form bisa terdiri dari sekelompok text, radio option, checkbox, submit button, dan masih banyak lagi yang lainnya.

Tabel Elemen Form

ElemenPengertian
 <form></form>Membuka dan Menutup Form
 <input type=”text” />Membuat Inputan berbentuk text (Single Line)
 <input type=”radio” />Membuat Pilihan Inputan berbentuk radio (Single Choice)
 <input type=”checkbox” />Membuat Pilihan Inputan berbentuk checkbox (Multiple Choice)
 <input type=”password” />Membuat Pilihan Inputan berbentuk password (Hide Area)
 <input type=”date” />Membuat inputan berbentuk tanggal
 <input type=”file” />Membuat inputan berbentuk file (upload file)
 <input type=”submit” />
<button type=”submit”>
Membuat submit button
 <input type=”reset” />
<button type=”reset”>
Mereset form yang telah diisi
 <select>
<option></option>
</select>
Membuat pilihan inputan berbentuk select box
<textarea></textarea>Membuat Inputan berbentuk text (Multiple Line)
 <label>Untuk memberikan label pada inputan
 <fieldset>Mengelompokkan element-element pada form
 <legend>Memberikan caption (nama) pada fieldset
 <optgroup>Mengelompokkan/menggrupkan pilihan inputan pada selectbox

Contoh Form Sederhana

<Form>
<p>
<label>Nama</label>
<input type="text" />
</p>
<p>
<label>Alamat</label>
<textarea><textarea/>
</p>
<p>
<label>Jenis Kelamin</label>
<input type="radio" name="LK" value="L" /> Laki-laki
<input type="radio" name="LK" value="P" /> Perempuan
</p>
<p>
<label>Jenis Kelasmin</label>
<select>
<option value="Laki-laki">laki-laki</option>
<option value="Perempuan">Perempuan</option>
</select>
</p>
<p>
<button type="submit">Submit</button>
</p>
</form>

 

Contoh Penggunaan Form dan style

Attribut pada elemen Form

Seperti halnya attribut pada elemen lainnya attribut form juga digunakan untuk menambah informasi dan pengaturan tambahan pada elemen form yang kita buat, misalnya menambah size, jumlah rows, atau sekedar hint pada elemen yang kita buat. perhatikan contoh pada file sebelumnya, disana kita sudah menuliskan beberapa form attribute seperti placeholder, max, min dll. beberapa form attribut lain, yang akan kita pelajari diantaranya adalah :

Elemen AttributPengertian
ValueMemberikan nilai value (hasil) pada inputan
NameMemberikan nama pada inputan
ReadonlyDigunakan agar inputan tidak bisa di rubah (hanya di baca)
DisabledDigunakan agar inputan tidak berfungsi
SizeMenspesifikasikan jumlah (dalam karakter) untuk field inputan
MaxlengthJumlah maksimal karakter yang bisa di input
RequiredDigunakan agar inputan wajib diisi
AutofocusDigunakan agar ketika kita buka halaman langsung menuju inputan tersebut
PlaceholderText abu-abu sebagai hint atau petunjuk dari suatu inputan
Min and maxNilai(int) minimal dan maksimal dari suatu inputan
Height and widthMerubah lebar dan tinggi suatu inputan