Daftar Isi

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>

<label for="email">Email:</label>

<label for="gender">Jenis Kelamin:</label>

<option value="P">Perempuan</option>

</select>

<label for="pesan">Pesan:</label>

<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">

1 2	<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.

Tag button digunakan untuk membuat tombol pada form, seperti tombol submit atau reset. Tag button juga memiliki beberapa atribut, seperti type yang menentukan tipe tombol (submit atau reset) dan value yang menentukan nilai dari tombol.

Contoh penggunaan tag label dan button:

<label for="password">Password:</label>
<input type="password" name="password" id="password">

<button type="submit" value="login">Login</button>

<label for="password">Password:</label>

<button type="submit" value="login">Login</button>

Menambahkan aksi dengan atribut action dan method

Atribut action dan method digunakan untuk menentukan aksi yang akan dilakukan saat pengguna mengirimkan data dari form. Atribut action menentukan URL dari halaman yang akan memproses data form, sedangkan atribut method menentukan metode yang digunakan untuk mengirimkan data form, yaitu POST atau GET.

Contoh penggunaan atribut action dan method:

<form action="proses.php" method="POST">
  ...
</form>

...

</form>

Pada contoh di atas, data form akan dikirim ke halaman proses.php menggunakan metode POST.

Dalam pembuatan halaman web, form HTML sangatlah penting untuk mengumpulkan data dari pengguna. Tag form, input, select, option, dan textarea merupakan tag yang paling umum digunakan dalam pembuatan form HTML. Selain itu, terdapat beberapa atribut yang dapat digunakan pada tag input, seperti type, name, value, dan placeholder.

Tag label dan button juga dapat digunakan untuk memudahkan pengguna dalam mengisi form. Terakhir, atribut action dan method digunakan untuk menentukan aksi yang akan dilakukan saat pengguna mengirimkan data dari form. Dengan memahami penggunaan tag-tag dan atribut-atribut tersebut, Anda dapat membuat form HTML yang efektif dan mudah digunakan

Dapatkan Berita dan Informasi Terbaru dengan mengikuti kami di Google News