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

PreviousBab 2: Elemen Dasar HTMLNextBab 4: Semantic HTML

Last updated