FORM PADA HTML

Elemen form HTML adalah bagian dari sebuah formulir yang memungkinkan pengguna untuk mengisi dan mengirimkan data ke server. Formulir HTML dapat digunakan untuk mengumpulkan berbagai jenis informasi dari pengguna, seperti nama, alamat email, nomor telepon, dan lain-lain.

Beberapa contoh elemen form HTML meliputi:

• <input>
• <label>
• <select>
• <textarea>
• <button>
• <datalist>
• <output>
• <option>
• <optgroup>

Elemen <input> HTML

Elemen input digunakan untuk mengumpulkan data dari pengguna, seperti input teks, input email, input kata sandi, dll. Elemen input terdiri dari beberapa jenis yaitu:

Tipe Input Teks

Digunakan untuk mengumpulkan input teks dari pengguna.

<input type="text" name="nama" placeholder="Masukkan nama">

Markup

Tipe Input Angka

<input type="number" name="umur" placeholder="Masukkan umur">

Markup

Tipe Input Email

Digunakan untuk mengumpulkan input alamat email dari pengguna.

<input type="email" name="email" placeholder="Masukkan email">

Markup

Tipe Input Kata Sandi

<input type="password" name="password" placeholder="Masukkan kata sandi">

Markup

Tipe Input URL

<input type="url" name="website" placeholder="Masukkan URL website">

Markup

Tipe Input Tanggal

<input type="date" name="tanggal_lahir">

Markup

Tipe Input Warna

<input type="color" name="warna_pilihan">

Markup

Tipe Input Checkbox

Digunakan untuk memungkinkan pengguna memilih satu atau beberapa opsi dari daftar opsi.

<input type="checkbox" name="interests[]" value="music">
<label for="music">Musik</label>
<input type="checkbox" name="interests[]" value="movies">
<label for="movies">Film</label>

Markup

 Musik  Film

Tipe Input Radio

Digunakan untuk memungkinkan pengguna memilih satu opsi dari daftar opsi.

<input type="radio" name="gender" value="male">
<label for="male">Laki-laki</label>
<input type="radio" name="gender" value="female">
<label for="female">Perempuan</label>

Markup

 Laki-laki  Perempuan

Tipe Input File

Digunakan untuk mengumpulkan input berkas atau dokumen dari pengguna

<input type="file" name="file_upload">

Markup

 

Elemen <label> HTML

lemen <label> HTML digunakan untuk memberikan label atau label deskriptif pada elemen formulir HTML lainnya, seperti input, select, atau textarea. Fungsi utama dari elemen <label> adalah untuk memperjelas makna elemen formulir tersebut, serta memudahkan pengguna dalam mengidentifikasi dan mengisi formulir dengan benar.

<label for="tanggal_lahir">Tanggal Lahir:</label>
<input type="date" id="tanggal_lahir" name="tanggal_lahir">

Markup

Elemen <select> HTML

Elemen select HTML digunakan untuk membuat daftar dropdown (menu drop turun) dari pilihan-pilihan yang tersedia untuk dipilih oleh pengguna. Fungsi utama dari elemen select HTML adalah untuk memungkinkan pengguna memilih satu atau lebih opsi dari daftar pilihan yang tersedia.

<label for="warna_favorit">Warna Favorit:</label>
<select id="warna_favorit" name="warna_favorit">
  <optgroup label="Warna Terang">
    <option value="merah">Merah</option>
    <option value="kuning">Kuning</option>
    <option value="hijau">Hijau</option>
  </optgroup>
  <optgroup label="Warna Gelap">
    <option value="biru">Biru</option>
    <option value="ungu">Ungu</option>
    <option value="hitam">Hitam</option>
  </optgroup>
</select>

Markup

Warna Favorit:  Merah Kuning Hijau   Biru Ungu Hitam  

Elemen <textarea> HTML

Elemen textarea HTML digunakan untuk membuat area teks yang lebih besar, yang memungkinkan pengguna untuk memasukkan sejumlah teks yang lebih besar daripada yang dimungkinkan oleh elemen input tipe teks biasa.

<label for="pesan">Pesan:</label><br>
<textarea id="pesan" name="pesan" rows="4" cols="50"></textarea>

Markup

Pesan:

Elemen <button> HTML

Elemen button HTML digunakan untuk membuat tombol yang dapat diklik oleh pengguna untuk melakukan tindakan tertentu. Ada tiga jenis tombol (button) dalam HTML, yaitu:

1. <button type="button"> - Tombol biasa (default type). Tombol ini tidak melakukan aksi khusus ketika ditekan, kecuali jika disertai dengan kode JavaScript untuk menjalankan aksi tertentu.
2. <button type="submit"> - Tombol Kirim (submit button). Tombol ini digunakan untuk mengirimkan formulir ke server untuk diolah lebih lanjut, biasanya digunakan bersama dengan tag <form>.
3. <button type="reset"> - Tombol Reset (reset button). Tombol ini digunakan untuk menghapus semua data pada formulir dan mengembalikan ke nilai awal (default value).

Contoh:

<form action="proses.php" method="post">
  <button type="button">Klik Saya</button>
  <button type="submit">Kirim</button>
  <button type="reset">Reset</button>
</form>

Elemen <datalist> HTML

Elemen <datalist> digunakan untuk membuat daftar opsi (list option) yang tersedia untuk dipilih pada sebuah input field. Dalam bentuk dasarnya, elemen <datalist> berisi beberapa elemen <option> yang menampilkan pilihan yang dapat dipilih oleh pengguna.

Ketika pengguna mulai mengetik di dalam input field yang terkait dengan elemen <datalist>, maka akan muncul pilihan-pilihan yang telah ditentukan di dalam elemen <datalist>. Hal ini dapat membantu pengguna dalam memilih opsi yang benar dan mengurangi jumlah kesalahan input. Contoh:

<label for="buah">Pilih buah:</label>
<input type="text" id="buah" name="buah" list="pilihan-buah">
<datalist id="pilihan-buah">
  <option value="Apel">
  <option value="Mangga">
  <option value="Pisang">
  <option value="Jeruk">
</datalist>

Markup

Hasil dari kode diatas:

Pilih buah: 

Elemen <output> HTML

Elemen <output> digunakan untuk menampilkan hasil atau output dari suatu proses yang telah dilakukan oleh pengguna. Elemen ini sangat berguna dalam formulir, karena dapat menampilkan hasil penghitungan atau operasi yang dilakukan oleh pengguna pada halaman web.

<form action="/action_page.php"
oninput="x.value=parseInt(a.value)+parseInt(b.value)">
  0
  <input type="range" id="a" name="a" value="50">
  100 +
  <input type="number" id="b" name="b" value="50">
  =
  <output name="x" for="a b"></output>
  <br><br>
  <input type="submit">
</form>

Markup

0  100 +  = 

 

Elemen <option> dan <optgroup> HTML

Elemen <option> digunakan untuk menampilkan opsi tunggal dalam sebuah daftar, sedangkan elemen <optgroup> digunakan untuk mengelompokkan beberapa opsi menjadi satu kelompok atau grup.

<label for="warna_favorit">Warna Favorit:</label>
<select id="warna_favorit" name="warna_favorit">
  <optgroup label="Warna Terang">
    <option value="merah">Merah</option>
    <option value="kuning">Kuning</option>
    <option value="hijau">Hijau</option>
  </optgroup>
  <optgroup label="Warna Gelap">
    <option value="biru">Biru</option>
    <option value="ungu">Ungu</option>
    <option value="hitam">Hitam</option>
  </optgroup>
</select>

 

<< Kembali HTML