# Bab 3: Forms dan Input

## Bab 3: Forms dan Input

### 3.1 Dasar-dasar Form

#### 3.1.1 Struktur Form Dasar

```html
<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

   ```html
   <form action="/proses.php">
   <form action="https://api.example.com/submit">
   ```
2. **Method**

   ```html
   <!-- GET: untuk data non-sensitif -->
   <form method="get">

   <!-- POST: untuk data sensitif/upload file -->
   <form method="post">
   ```
3. **Enctype**

   ```html
   <!-- 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**

   ```html
   <input type="text" required>
   <textarea required></textarea>
   ```
2. **Pattern Matching**

   ```html
   <!-- Validasi dengan regex -->
   <input type="text" pattern="[A-Za-z]{3}">
   ```
3. **Custom Validation Messages**

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

### 3.2 Input Elements

#### 3.2.1 Text Input

```html
<!-- 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**

   ```html
   <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**

   ```html
   <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**

   ```html
   <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

```html
<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

```html
<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

```html
<!-- 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

```html
<!-- 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

```html
<!-- 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

```html
<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

```html
<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](https://developer.mozilla.org/en-US/docs/Learn/Forms)
* [W3Schools HTML Forms](https://www.w3schools.com/html/html_forms.asp)
* [HTML5 Doctor](http://html5doctor.com/)