Atribut Form pada HTML

Atribut form pada HTML digunakan untuk mengontrol perilaku dan tampilan suatu form di dalam halaman web. Dengan menggunakan atribut form, kita dapat menentukan bagaimana form tersebut akan berinteraksi dengan pengguna dan bagaimana data yang diinputkan akan dikirim ke server.

Berikut adalah beberapa contoh atribut form HTML beserta contoh penggunaannya:

1. action: Atribut ini digunakan untuk menentukan URL atau alamat server yang akan menerima data form yang di-submit. Contohnya:

<form action="/submit-form" method="post">
  <!-- Isi form di sini -->
</form>

2. method: Atribut ini digunakan untuk menentukan metode pengiriman data form ke server. Biasanya digunakan dengan nilai “get” atau “post”. Contohnya:

<form action="/submit-form" method="post">
  <!-- Isi form di sini -->
</form>

3. target: Atribut ini digunakan untuk menentukan di mana hasil dari pengiriman data form akan ditampilkan. Contohnya:

<form action="/submit-form" method="post" target="_blank">
  <!-- Isi form di sini -->
</form>

4. autocomplete: Atribut ini digunakan untuk mengaktifkan atau menonaktifkan fitur autocomplete pada form. Contohnya:

<form action="/submit-form" method="post" autocomplete="off">
  <!-- Isi form di sini -->
</form>

5. enctype: Atribut ini digunakan untuk menentukan tipe encoding yang digunakan saat mengirimkan data form. Contohnya:

<form action="/submit-form" method="post" enctype="multipart/form-data">
  <!-- Isi form di sini -->
</form>

6. novalidate: Atribut ini digunakan untuk menonaktifkan validasi form oleh browser. Contohnya:

<form action="/submit-form" method="post" novalidate>
  <!-- Isi form di sini -->
</form>

7. name: Atribut ini digunakan untuk memberikan nama atau identitas pada form. Contohnya:

<form action="/submit-form" method="post" name="myForm">
  <!-- Isi form di sini -->
</form>

8. required: Atribut ini digunakan untuk menandai bahwa suatu input field harus diisi sebelum form dapat di-submit. Contohnya:

<form action="/submit-form" method="post">
  <input type="text" name="name" required>
  <!-- Isi form di sini -->
</form>

9. readonly: Atribut ini digunakan untuk membuat suatu input field hanya bisa dibaca dan tidak bisa diubah oleh pengguna. Contohnya:

<form action="/submit-form" method="post">
  <input type="text" name="name" value="John Doe" readonly>
  <!-- Isi form di sini -->
</form>

10. disabled: Atribut ini digunakan untuk menonaktifkan suatu input field sehingga pengguna tidak dapat mengisi atau mengubah nilainya. Contohnya:

<form action="/submit-form" method="post">
  <input type="text" name="name" disabled>
  <!-- Isi form di sini -->
</form>

Contohnya:

Berikut adalah contoh kode HTML yang menggabungkan beberapa atribut form beserta penjelasannya:

<form action="/submit" method="post" enctype="multipart/form-data">
  <label for="name">Nama:</label>
  <input type="text" id="name" name="name" required>

  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>

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

  <label for="file">File:</label>
  <input type="file" id="file" name="file" accept=".pdf,.doc,.docx">

  <input type="submit" value="Submit">
</form>

Penjelasan atribut form yang digunakan dalam contoh kode di atas:

• action="/submit": Menentukan URL atau alamat tujuan ketika form dikirim.
• method="post": Menentukan metode pengiriman data form, dalam hal ini menggunakan metode POST.
• enctype="multipart/form-data": Menentukan tipe encoding yang digunakan saat mengirimkan data form yang berisi file.
• for="name": Menghubungkan label dengan input field menggunakan ID.
• type="text": Menentukan tipe input field sebagai teks.
• name="name": Menentukan nama input field yang akan digunakan saat mengirimkan data form.
• required: Menandakan bahwa input field tersebut wajib diisi sebelum form dikirim.
• type="email": Menentukan tipe input field sebagai alamat email.
• accept=".pdf,.doc,.docx": Menentukan jenis file yang dapat diunggah melalui input field file.
• type="submit": Menentukan tipe input field sebagai tombol submit untuk mengirimkan form.

Output:

See the Pen Atribut Form pada HTML by De Orchids (@De-Orchids) on CodePen.

Itulah beberapa contoh atribut form HTML beserta penggunaannya. Dengan menggunakan atribut-atribut ini, kita dapat mengontrol perilaku dan tampilan form sesuai dengan kebutuhan kita.