Formulir (Form)

Formulir (Form) | Belajar HTML Dasar: Fondasi Web | Mahir.dev | Mahir.dev Academy

<form>
    <!-- Semua elemen input, label, tombol, dll. ditaruh di sini -->
</form>

type="text": Kotak input teks satu baris biasa.

html

<label for="nama">Nama Lengkap:</label>
<input type="text" id="nama" name="nama_lengkap">

type="password": Mirip type="text", tapi karakter yang diketik bakal disensor (biasanya jadi bulatan atau bintang). Cocok buat input password.
html
```
<label for="sandi">Password:</label>
<input type="password" id="sandi" name="password_user">
```
type="email": Kotak input yang dirancang khusus buat alamat email. Browser modern biasanya ngasih validasi dasar buat ngecek format emailnya. Di beberapa perangkat mobile, keyboard-nya juga bisa otomatis nyesuaiin buat ngetik email (misal, ada tombol @ dan .).
html
```
<label for="surel">Alamat Email:</label>
<input type="email" id="surel" name="alamat_email" placeholder="contoh@email.com">
```
type="number": Kotak input buat angka. Biasanya ada tombol panah atas-bawah buat nambah/ngurangin angka. Bisa dikasih atribut min, max, dan step.
html
```
<label for="usia">Usia:</label>
<input type="number" id="usia" name="umur_user" min="0" max="120">
```
type="date": Nampilin date picker (pemilih tanggal) di browser yang support. Format tanggal bisa beda-beda antar browser.
html
```
<label for="tgl_lahir">Tanggal Lahir:</label>
<input type="date" id="tgl_lahir" name="tanggal_lahir">
```
Ada juga type="time", type="datetime-local", type="month", type="week".
type="checkbox": Kotak centang. Pengguna bisa milih nol, satu, atau beberapa opsi dari sekelompok checkbox. Setiap checkbox idealnya punya atribut value yang unik.
html
```
<input type="checkbox" id="hobi_baca" name="hobi[]" value="membaca">
<label for="hobi_baca">Membaca</label><br>
 
```
(Perhatikan name="hobi[]" dengan kurung siku, ini cara umum di PHP buat nerima multiple values dari checkbox dengan nama yang sama).
type="radio": Tombol radio. Pengguna cuma bisa milih satu opsi dari sekelompok tombol radio yang punya atribut name yang sama. Wajib ada atribut value.
html
```
<p>Jenis Kelamin:</p>
<input type="radio" id="pria" name="jenis_kelamin" value="L" required>
<label for="pria">Pria</
```
type="submit": Nampilin tombol yang pas diklik bakal ngirim data formulir ke URL yang ditentuin di atribut action form. Teks di tombol bisa diubah pake atribut value.
html
```
<input type="submit" value="Kirim Pendaftaran">
```
type="reset": Nampilin tombol yang pas diklik bakal ngereset (ngosongin) semua isian formulir ke nilai defaultnya.
html
```
<input type="reset" value="Ulangi Isi Form">
```
type="button": Nampilin tombol generik yang gak punya perilaku default. Biasanya dipake bareng JavaScript buat micu aksi tertentu.
html
```
<input type="button" value="Cek Validasi" onclick="validasiForm()">
```
type="file": Nampilin tombol "Choose File" (atau sejenisnya) yang ngebolehin pengguna buat milih file dari komputernya buat di-upload.
- PENTING: Kalau form-mu ada input file, kamu wajib nambahin atribut enctype="multipart/form-data" ke tag <form>-nya.
html
```
<form action="/upload-avatar.php" method="POST" enctype="multipart/form-data">
    <label for="avatar">Upload Foto Profil:</label>
    <input type=
```
type="hidden": Input yang gak keliatan sama pengguna, tapi nilainya tetep dikirim bareng data form lain. Berguna buat ngirim data tambahan yang gak perlu diisi user (misal, ID produk, token keamanan).
html
```
<input type="hidden" name="id_produk" value="12345">
```

name: Sangat penting! Ini adalah nama variabel yang bakal dipake buat ngirim nilai input ini ke server. Tanpa name, data dari input ini gak bakal kekirim (kecuali buat tombol submit/reset/button).
value: Nilai awal (default) dari input field. Buat checkbox dan radio, ini nilai yang dikirim kalau opsi itu dipilih. Buat tombol submit/reset/button, ini teks yang tampil di tombol.
id: Pengenal unik buat input field. Dipake buat ngehubungin sama elemen <label> dan buat JavaScript.
placeholder: Teks bantuan (hint) yang tampil di dalem input field sebelum pengguna ngetik. Otomatis ilang pas pengguna mulai ngetik.
html
```
<input type="text" name="username" placeholder="Masukkan username Anda">
```
required: Atribut boolean. Kalau ada, pengguna wajib ngisi field ini sebelum form bisa disubmit. Browser bakal nampilin pesan error kalau kosong.
disabled: Atribut boolean. Bikin field gak bisa diisi atau diklik. Nilainya gak bakal dikirim.
readonly: Atribut boolean. Bikin field gak bisa diubah isinya sama pengguna, tapi nilainya tetep dikirim.
checked: (Untuk checkbox dan radio) Atribut boolean. Bikin opsi itu terpilih secara default.
min, max, step: (Untuk number, range, date, dll.) Nentuin nilai minimum, maksimum, dan interval langkah.
maxlength: (Untuk text, password, email, dll.) Batasan jumlah karakter maksimal yang bisa diinput.
pattern: (Untuk text, tel, email, password, dll.) Nentuin pola (regular expression) yang harus dipenuhi sama inputan pengguna buat validasi.

html

<label for="email_user">Alamat Email Anda:</label>
<input type="email" id="email_user" name="email">
 
<!-- Atau bisa juga input dibungkus di dalam label (implicit association) -->
<label>
    Nama Depan:
    <input type="text" name="nama_depan">
</label>

html

<label for="kota_asal">Pilih Kota Asal:</label>
<select id="kota_asal" name="kota">
    <option value="">-- Pilih Kota --</option>
    <option value="jakarta">Jakarta</option>
    <option value="bandung">Bandung</option>
    <option value="surabaya" selected>Surabaya</option> <!-- Surabaya jadi default -->
    <option value="medan">Medan</option>
</select>

html

<form>
    <fieldset>
        <legend>Informasi Pribadi</legend>
        <label for="nama_lengkap">Nama Lengkap:</label>
        <input type="text" id="nama_lengkap" name="nama"><br><br>
        <label for="email_kontak">Email:</label>
        <input type="email" id="email_kontak" name="email">
    </fieldset>
 
    <fieldset>
        <legend>Detail Pesanan</legend>
        <label for="produk">Produk:</label>
        <select id="produk" name="produk_pilihan">
            <option value="A">Produk A</option>
            <option value="B">Produk B</option>
        </select><br><br>
        <label for="jumlah_item">Jumlah:</label>
        <input type="number" id="jumlah_item" name="jumlah" min="1">
    </fieldset>
 
    <input type="submit" value="Proses Pesanan">
</form>

Form HTML: Jembatan Interaksi Pengguna dengan Websitemu!

Elemen Dasar Formulir: `<form>` Si Pembungkus Utama

Elemen Input Paling Serbaguna: `<input>`

Atribut Umum pada `<input>`:

`<label>`: Ngasih Nama ke Field Input (Penting buat Aksesibilitas!)

`<textarea>`: Buat Input Teks yang Panjang (Multi-baris)

`<button>`: Alternatif Buat Bikin Tombol

`<fieldset>` dan `<legend>`: Mengelompokkan Elemen Form yang Berhubungan

Kuis Formulir HTML

Diskusi Pelajaran

Formulir (Form)

Form HTML: Jembatan Interaksi Pengguna dengan Websitemu!

Elemen Dasar Formulir: <form> Si Pembungkus Utama

Elemen Input Paling Serbaguna: <input>

Atribut Umum pada <input>:

<label>: Ngasih Nama ke Field Input (Penting buat Aksesibilitas!)

<textarea>: Buat Input Teks yang Panjang (Multi-baris)

<select> dan <option>: Bikin Dropdown List (Daftar Pilihan)

<button>: Alternatif Buat Bikin Tombol

<fieldset> dan <legend>: Mengelompokkan Elemen Form yang Berhubungan

Kuis Formulir HTML

Diskusi Pelajaran

Elemen Dasar Formulir: `<form>` Si Pembungkus Utama

Elemen Input Paling Serbaguna: `<input>`

Atribut Umum pada `<input>`:

`<label>`: Ngasih Nama ke Field Input (Penting buat Aksesibilitas!)

`<textarea>`: Buat Input Teks yang Panjang (Multi-baris)

`<select>` dan `<option>`: Bikin Dropdown List (Daftar Pilihan)

`<button>`: Alternatif Buat Bikin Tombol

`<fieldset>` dan `<legend>`: Mengelompokkan Elemen Form yang Berhubungan