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

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