# 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/)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://triyono.gitbook.io/tutorial/html/bab-3-forms-dan-input.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.