Bab 3: Forms dan Input
3.1 Dasar-dasar Form
3.1.1 Struktur Form Dasar
Copy < 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
Action
Menentukan URL untuk mengirim data form
Copy < form action = "/proses.php" >
< form action = "https://api.example.com/submit" > Method
Copy <!-- GET: untuk data non-sensitif -->
< form method = "get" >
<!-- POST: untuk data sensitif/upload file -->
< form method = "post" > Enctype
Copy <!-- 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
Required Fields
Copy <input type="text" required>
<textarea required></textarea> Pattern Matching
Copy <!-- Validasi dengan regex -->
<input type="text" pattern="[A-Za-z]{3}"> Custom Validation Messages
Copy <input
type="text"
required
oninvalid="this.setCustomValidity('Mohon isi field ini')"
oninput="this.setCustomValidity('')"
> 3.2 Input Elements
3.2.1 Text Input
Copy <!-- 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
Radio Buttons
Copy <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> Checkboxes
Copy <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> Select Dropdowns
Copy <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
Copy <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
Copy <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
Copy <!-- 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
Copy <!-- 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
Copy <!-- 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
Copy <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
Copy <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
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
Latihan 3: Form Survey
Buat form survey yang menggunakan:
Radio buttons untuk pilihan
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
Apa perbedaan antara method GET dan POST?
Kapan sebaiknya menggunakan input type="hidden"?
Bagaimana cara membuat field yang wajib diisi?
Apa fungsi dari element <datalist>?
Sebutkan minimal 5 tipe input baru di HTML5!
Referensi