Pengenalan Form
Photo By Jackson Sophat on Unsplash
Pernahkah anda melakukan registrasi pada sebuah situs? misalnya kita melakukan pendaftaran untuk email, facebook, dan lain lain. Nah itu dia Form, artikel kali ini mangcoding akan bahas pengenalan form.
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
| Elemen | Pengertian |
|---|---|
| <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 Kelamin</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 Attribut | Pengertian |
|---|---|
| Value | Memberikan nilai value (hasil) pada inputan |
| Name | Memberikan nama pada inputan |
| Readonly | Digunakan agar inputan tidak bisa di rubah (hanya di baca) |
| Disabled | Digunakan agar inputan tidak berfungsi |
| Size | Menspesifikasikan jumlah (dalam karakter) untuk field inputan |
| Maxlength | Jumlah maksimal karakter yang bisa di input |
| Required | Digunakan agar inputan wajib diisi |
| Autofocus | Digunakan agar ketika kita buka halaman langsung menuju inputan tersebut |
| Placeholder | Text abu-abu sebagai hint atau petunjuk dari suatu inputan |
| Min and max | Nilai(int) minimal dan maksimal dari suatu inputan |
| Height and width | Merubah lebar dan tinggi suatu inputan |
Itulah artikel yang dapat Mangcoding sharing. Mudah-mudahan artikel ini bisa bermanfaat dan dapat memberikan pengetahuan baru untuk Anda. Jika ada kritik serta saran yang dapat membangun, silahkan komentar atau kirim melalui Email dan Media sosial Mangcoding.