Membuat Form HTML - Belajar Membuat Website

Petik.net - HTML (HyperText Markup Language) adalah bahasa pemrograman yang digunakan untuk membuat halaman web. Salah satu elemen penting dalam pembuatan halaman web adalah form HTML, yang digunakan untuk mengumpulkan data dari pengguna.

Dalam artikel ini, akan dijelaskan tentang penggunaan tag form, input, select, option, dan textarea beserta atribut-atributnya. Selain itu, juga akan dibahas penggunaan tag label dan button, serta cara menambahkan aksi pada form dengan atribut action dan method.

Tag form, input, select, option, dan textarea

Tag form digunakan untuk membuat sebuah form HTML, yang dapat berisi beberapa elemen seperti input, select, option, dan textarea. Tag form memiliki dua atribut penting yaitu action dan method, yang akan dibahas lebih lanjut di bawah.

Tag input digunakan untuk membuat elemen input dalam form, seperti input teks, checkbox, radio button, dan lain sebagainya. Tag input memiliki beberapa atribut penting seperti type, name, value, dan placeholder.

Tag select digunakan untuk membuat elemen select dalam form, yang memungkinkan pengguna untuk memilih satu atau lebih opsi dari daftar yang telah disediakan. Tag select memiliki tag turunan yaitu tag option, yang digunakan untuk membuat opsi-opsi dalam daftar pilihan.

Tag textarea digunakan untuk membuat elemen textarea dalam form, yang memungkinkan pengguna untuk memasukkan teks dalam jumlah yang lebih besar daripada input teks biasa.

Contoh penggunaan tag form, input, select, option, dan textarea:

<form action="proses.php" method="POST">
  <label for="nama">Nama:</label>
  <input type="text" name="nama" id="nama" placeholder="Masukkan nama">
  
  <label for="email">Email:</label>
  <input type="email" name="email" id="email" placeholder="Masukkan email">
  
  <label for="gender">Jenis Kelamin:</label>
  <select name="gender" id="gender">
    <option value="L">Laki-laki</option>
    <option value="P">Perempuan</option>
  </select>
  
  <label for="pesan">Pesan:</label>
  <textarea name="pesan" id="pesan" placeholder="Masukkan pesan"></textarea>
  
  <button type="submit">Kirim</button>
</form>

Atribut type, name, value, dan placeholder

Tag input memiliki beberapa atribut penting, di antaranya adalah:

Type: menentukan jenis input yang akan ditampilkan, seperti text, email, password, checkbox, radio, dll.
Name: menentukan nama dari input, yang digunakan untuk mengidentifikasi input di sisi server saat data form dikirim.
Value: menentukan nilai dari input, seperti nilai default atau nilai yang diisi pengguna.
Placeholder: menampilkan pesan pada input sebelum pengguna memasukkan nilai.

Contoh penggunaan atribut pada tag input:

<label for="username">Username:</label>
<input type="text" name="username" id="username" placeholder="Masukkan username">

Tag label dan button

Tag label digunakan untuk membuat label pada elemen form, yang akan memudahkan pengguna dalam mengisi form. Label juga dapat dikaitkan dengan elemen form tertentu dengan menggunakan atribut for.