Bab 3: Forms dan Input

Bab 3: Forms dan Input

3.1 Dasar-dasar Form

3.1.1 Struktur Form Dasar

<form action="/submit" method="post">
    <!-- Form elements -->
    <label for="username">Username:</label>
    <input type="text" id="username" name="username">
    
    <button type="submit">Submit</button>
</form>

3.1.2 Form Attributes

1. Action

   • Menentukan URL untuk mengirim data form

   <form action="/proses.php">
   <form action="https://api.example.com/submit">

2. Method

   <!-- GET: untuk data non-sensitif -->
   <form method="get">
   
   <!-- POST: untuk data sensitif/upload file -->
   <form method="post">

3. Enctype

   <!-- Default -->
   <form enctype="application/x-www-form-urlencoded">
   
   <!-- Untuk upload file -->
   <form enctype="multipart/form-data">
   
   <!-- Untuk plain text -->
   <form enctype="text/plain">

3.1.3 Form Validation

1. Required Fields

   <input type="text" required>
   <textarea required></textarea>

2. Pattern Matching

   <!-- Validasi dengan regex -->
   <input type="text" pattern="[A-Za-z]{3}">

3. Custom Validation Messages

   <input 
       type="text" 
       required 
       oninvalid="this.setCustomValidity('Mohon isi field ini')"
       oninput="this.setCustomValidity('')"
   >

3.2 Input Elements

3.2.1 Text Input

<!-- Text input biasa -->
<input type="text" name="username" placeholder="Masukkan username">

<!-- Password -->
<input type="password" name="password" placeholder="Masukkan password">

<!-- Text area -->
<textarea name="komentar" rows="4" cols="50">
Tulis komentar di sini...
</textarea>

3.2.2 Selection Input

1. Radio Buttons

   <fieldset>
       <legend>Jenis Kelamin:</legend>
       <input type="radio" id="pria" name="gender" value="pria">
       <label for="pria">Pria</label>
       
       <input type="radio" id="wanita" name="gender" value="wanita">
       <label for="wanita">Wanita</label>
   </fieldset>

2. Checkboxes

   <fieldset>
       <legend>Hobi:</legend>
       <input type="checkbox" id="membaca" name="hobi" value="membaca">
       <label for="membaca">Membaca</label>
       
       <input type="checkbox" id="menulis" name="hobi" value="menulis">
       <label for="menulis">Menulis</label>
       
       <input type="checkbox" id="coding" name="hobi" value="coding">
       <label for="coding">Coding</label>
   </fieldset>

3. Select Dropdowns

   <label for="kota">Pilih Kota:</label>
   <select id="kota" name="kota">
       <option value="">--Pilih kota--</option>
       <option value="jakarta">Jakarta</option>
       <option value="bandung">Bandung</option>
       <option value="surabaya">Surabaya</option>
   </select>
   
   <!-- Multiple Select -->
   <select multiple name="bahasa">
       <option value="html">HTML</option>
       <option value="css">CSS</option>
       <option value="js">JavaScript</option>
   </select>
   
   <!-- Option Groups -->
   <select name="transportasi">
       <optgroup label="Darat">
           <option value="mobil">Mobil</option>
           <option value="motor">Motor</option>
       </optgroup>
       <optgroup label="Udara">
           <option value="pesawat">Pesawat</option>
           <option value="helikopter">Helikopter</option>
       </optgroup>
   </select>

3.2.3 File Upload

<form enctype="multipart/form-data">
    <!-- Single file -->
    <input type="file" name="dokumen">

    <!-- Multiple files -->
    <input type="file" name="foto" multiple>

    <!-- Specific file types -->
    <input type="file" accept=".pdf,.doc,.docx">
    <input type="file" accept="image/*">
</form>

3.2.4 Hidden Inputs

<input type="hidden" name="user_id" value="123">
<input type="hidden" name="timestamp" value="2024-01-01">

3.3 HTML5 Form Features

3.3.1 New Input Types

<!-- Email -->
<input type="email" name="email">

<!-- URL -->
<input type="url" name="website">

<!-- Number -->
<input type="number" min="0" max="100" step="5">

<!-- Range -->
<input type="range" min="0" max="100" value="50">

<!-- Date -->
<input type="date">
<input type="datetime-local">
<input type="month">
<input type="week">
<input type="time">

<!-- Color -->
<input type="color">

<!-- Search -->
<input type="search" name="q">

<!-- Tel -->
<input type="tel" pattern="[0-9]{12}">

3.3.2 Form Validation Attributes

<!-- Required field -->
<input type="text" required>

<!-- Minimum/Maximum Length -->
<input type="text" minlength="3" maxlength="10">

<!-- Number Range -->
<input type="number" min="1" max="100">

<!-- Pattern Matching -->
<input type="text" pattern="[A-Za-z]{3}">

<!-- Custom Error Message -->
<input type="email" title="Masukkan email yang valid">

3.3.3 Autocomplete

<!-- Enable/Disable Autocomplete -->
<form autocomplete="on">
    <input type="text" autocomplete="off">
</form>

<!-- Specific Autocomplete Types -->
<input type="text" autocomplete="name">
<input type="text" autocomplete="email">
<input type="text" autocomplete="street-address">
<input type="text" autocomplete="tel">

3.3.4 Datalist

<input list="browsers" name="browser">
<datalist id="browsers">
    <option value="Chrome">
    <option value="Firefox">
    <option value="Safari">
    <option value="Edge">
</datalist>

3.3.5 Output Element

<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
    <input type="number" id="a" value="0"> +
    <input type="number" id="b" value="0"> =
    <output name="result" for="a b">0</output>
</form>

Latihan Praktik

Latihan 1: Form Registrasi

Buat form registrasi yang mencakup:

• Informasi personal (nama, email, password)

• Pilihan gender dengan radio buttons

• Hobi dengan checkboxes

• Upload foto profil

• Validasi form

Latihan 2: Form Pemesanan

Buat form pemesanan produk dengan:

• Pilihan produk dengan select dropdown

• Jumlah dengan number input

• Alamat pengiriman dengan textarea

• Metode pembayaran dengan radio buttons

• Validasi form

Latihan 3: Form Survey

Buat form survey yang menggunakan:

• Range input untuk rating

• Radio buttons untuk pilihan

• Textarea untuk feedback

• Datalist untuk sugesti

• Output element untuk kalkulasi

Ringkasan Bab

• Forms adalah cara utama mengumpulkan input user

• HTML5 menyediakan berbagai tipe input baru

• Validasi form bisa dilakukan di sisi client

• Atribut baru HTML5 mempermudah validasi

• Datalist dan output menambah interaktivitas

Quiz Bab 3

1. Apa perbedaan antara method GET dan POST?

2. Kapan sebaiknya menggunakan input type="hidden"?

3. Bagaimana cara membuat field yang wajib diisi?

4. Apa fungsi dari element <datalist>?

5. Sebutkan minimal 5 tipe input baru di HTML5!

Referensi

• MDN Web Docs - Forms

• W3Schools HTML Forms

• HTML5 Doctor