Langsung ke konten

Form Input Lengkap: Textarea, Select, Radio, Checkbox di HTML

Pelajari berbagai jenis form input di HTML termasuk textarea, select, option, radio button, checkbox, date, color, file, dan tombol submit.

Tutorial
Belajar HTML untuk Pemula
Belajar HTML untuk Pemula
Advertisement

Artikel ini merupakan bagian dari seri Belajar HTML untuk Pemula di hanifmu.com. Setelah memahami form dasar, kita lanjut ke jenis-jenis input yang lebih lengkap.

Textarea: Teks Panjang

<textarea> untuk input teks panjang seperti komentar atau pesan:

<textarea name="pesan" rows="5" cols="40" placeholder="Tulis pesan Anda...">
</textarea>

Attribute:

  • rows — Jumlah baris yang terlihat
  • cols — Jumlah kolom (lebar)
  • placeholder — Teks bantuan

Select dan Option: Dropdown

<select> membuat dropdown, <option> jadi pilihannya:

<select name="kota">
  <option value="">-- Pilih Kota --</option>
  <option value="jakarta">Jakarta</option>
  <option value="bandung">Bandung</option>
  <option value="surabaya">Surabaya</option>
</select>

Option Group

Kelompokkan option dengan <optgroup>:

<select name="makanan">
  <optgroup label="Nasi">
    <option value="nasi-goreng">Nasi Goreng</option>
    <option value="nasi-uduk">Nasi Uduk</option>
  </optgroup>
  <optgroup label="Mie">
    <option value="mie-ayam">Mie Ayam</option>
    <option value="mie-goreng">Mie Goreng</option>
  </optgroup>
</select>

Radio Button: Pilihan Tunggal

Radio button untuk memilih satu dari beberapa opsi. Semua radio button dalam satu name harus punya value berbeda:

<p>Jenis Kelamin:</p>
<input type="radio" name="gender" value="laki-laki" id="laki-laki" />
<label for="laki-laki">Laki-laki</label>

<input type="radio" name="gender" value="perempuan" id="perempuan" />
<label for="perempuan">Perempuan</label>

Pengguna hanya bisa memilih satu opsi karena semua punya name="gender".

Checkbox: Pilihan Ganda

Checkbox untuk memilih beberapa opsi sekaligus:

<p>Hobi:</p>
<input type="checkbox" name="hobi" value="membaca" id="membaca" />
<label for="membaca">Membaca</label>

<input type="checkbox" name="hobi" value="coding" id="coding" />
<label for="coding">Coding</label>

<input type="checkbox" name="hobi" value="gaming" id="gaming" />
<label for="gaming">Gaming</label>

Pengguna bisa memilih lebih dari satu hobi.

Date, Time, dan DateTime

Input untuk tanggal dan waktu:

<!-- Tanggal -->
<input type="date" name="tanggal_lahir" />

<!-- Waktu -->
<input type="time" name="jam" />

<!-- DateTime Local -->
<input type="datetime-local" name="jadwal" />

<!-- Bulan -->
<input type="month" name="bulan" />

<!-- Minggu -->
<input type="week" name="minggu" />

Color Picker

Input untuk memilih warna:

<input type="color" name="warna_favorit" value="#ff0000" />

File Upload

Input untuk upload file:

<!-- Upload satu file -->
<input type="file" name="foto" />

<!-- Upload multiple file -->
<input type="file" name="dokumen" multiple />

<!-- Upload dengan filter tipe file -->
<input type="file" name="gambar" accept="image/*" />

Range Slider

Input slider untuk memilih nilai dalam rentang tertentu:

<input type="range" name="volume" min="0" max="100" value="50" />

Reset Button

Tombol untuk mengembalikan form ke nilai awal:

<button type="reset">Reset</button>

Contoh Form Lengkap

<!DOCTYPE html>
<html lang="id">
  <head>
    <meta charset="UTF-8" />
    <title>Form Lengkap</title>
  </head>
  <body>
    <h1>Form Pendaftaran</h1>

    <form action="/daftar" method="POST">
      <div>
        <label for="nama">Nama Lengkap:</label><br />
        <input type="text" id="nama" name="nama" placeholder="Masukkan nama" required />
      </div>

      <div>
        <label for="email">Email:</label><br />
        <input type="email" id="email" name="email" placeholder="Masukkan email" required />
      </div>

      <div>
        <label for="ttl">Tanggal Lahir:</label><br />
        <input type="date" id="ttl" name="ttl" required />
      </div>

      <div>
        <label for="jk">Jenis Kelamin:</label><br />
        <input type="radio" name="jk" value="laki-laki" id="lk" />
        <label for="lk">Laki-laki</label>
        <input type="radio" name="jk" value="perempuan" id="pr" />
        <label for="pr">Perempuan</label>
      </div>

      <div>
        <label for="kota">Kota:</label><br />
        <select name="kota" id="kota">
          <option value="">-- Pilih --</option>
          <option value="jakarta">Jakarta</option>
          <option value="bandung">Bandung</option>
          <option value="surabaya">Surabaya</option>
        </select>
      </div>

      <div>
        <label>Hobi:</label><br />
        <input type="checkbox" name="hobi" value="coding" id="coding" />
        <label for="coding">Coding</label>
        <input type="checkbox" name="hobi" value="desain" id="desain" />
        <label for="desain">Desain</label>
      </div>

      <div>
        <label for="pesan">Pesan:</label><br />
        <textarea name="pesan" id="pesan" rows="4" cols="40" placeholder="Tulis pesan..."></textarea>
      </div>

      <div>
        <label for="foto">Foto Profil:</label><br />
        <input type="file" name="foto" id="foto" accept="image/*" />
      </div>

      <div>
        <label for="warna">Warna Favorit:</label><br />
        <input type="color" name="warna" id="warna" value="#0000ff" />
      </div>

      <div>
        <button type="submit">Daftar</button>
        <button type="reset">Reset</button>
      </div>
    </form>
  </body>
</html>

Best Practice Form Input

  • Selalu gunakan <label> yang terhubung dengan input (for = id)
  • Gunakan value yang jelas untuk radio button
  • Beri placeholder yang informatif
  • Gunakan accept pada file input untuk membatasi tipe file
  • Sembunyikan label dengan CSS, bukan dengan menghapus tag label

Ringkasan

  • <textarea> untuk teks panjang
  • <select> + <option> untuk dropdown
  • Radio button untuk pilihan tunggal
  • Checkbox untuk pilihan ganda
  • Input types: date, time, color, file, range
  • <button type="reset"> untuk reset form

Langkah Selanjutnya

Kamu sudah memahami berbagai jenis form input. Artikel selanjutnya membahas form validation, cara memvalidasi input pengguna sebelum dikirim.