Formulir Masukan HTML * Atribut


Bab ini menjelaskan form*atribut yang berbeda untuk <input>elemen HTML.


Bentuk Atribut

Atribut input formmenentukan bentuk yang <input>dimiliki elemen.

Nilai atribut ini harus sama dengan atribut id dari elemen <form> yang dimilikinya.

Contoh

Bidang input yang terletak di luar formulir HTML (tetapi masih merupakan bagian dari formulir):

<form action="/action_page.php" id="form1">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <input type="submit" value="Submit">
</form>

<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname" form="form1">

Atribut Formasi

Atribut input formactionmenentukan URL file yang akan memproses input saat formulir dikirimkan.

Catatan: Atribut ini menimpa actionatribut <form>elemen.

Atribut formactionberfungsi dengan jenis input berikut: kirim dan gambar.

Contoh

Formulir HTML dengan dua tombol kirim, dengan tindakan berbeda:

<form action="/action_page.php">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Submit">
  <input type="submit" formaction="/action_page2.php" value="Submit as Admin">
</form>

Atribut formenctype

Atribut input formenctype menentukan bagaimana formulir-data harus dikodekan saat dikirimkan (hanya untuk formulir dengan metode = "posting").

Catatan: Atribut ini menimpa atribut enctype dari <form>elemen.

Atribut formenctypeberfungsi dengan jenis input berikut: kirim dan gambar.

Contoh

Formulir dengan dua tombol kirim. Yang pertama mengirim data formulir dengan pengkodean default, yang kedua mengirim data formulir yang dikodekan sebagai "multipart/formulir-data":

<form action="/action_page_binary.asp" method="post">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <input type="submit" value="Submit">
  <input type="submit" formenctype="multipart/form-data"
  value="Submit as Multipart/form-data">
</form>

Atribut formmethod

Atribut input formmethod mendefinisikan metode HTTP untuk mengirimkan data formulir ke URL tindakan.

Catatan: Atribut ini menimpa atribut metode <form>elemen.

Atribut formmethodberfungsi dengan jenis input berikut: kirim dan gambar.

Form-data dapat dikirim sebagai variabel URL (method="get") atau sebagai transaksi posting HTTP (method="post").

Catatan tentang metode "dapatkan":

  • Metode ini menambahkan data formulir ke URL dalam pasangan nama/nilai
  • Metode ini berguna untuk pengiriman formulir di mana pengguna ingin menandai hasilnya
  • Ada batasan berapa banyak data yang dapat Anda tempatkan di URL (bervariasi antara browser), oleh karena itu, Anda tidak dapat memastikan bahwa semua formulir-data akan ditransfer dengan benar
  • Jangan pernah menggunakan metode "dapatkan" untuk menyampaikan informasi sensitif! (kata sandi atau informasi sensitif lainnya akan terlihat di bilah alamat browser)

Catatan tentang metode "posting":

  • Metode ini mengirimkan formulir-data sebagai transaksi posting HTTP
  • Pengiriman formulir dengan metode "posting" tidak dapat di-bookmark
  • Metode "posting" lebih kuat dan aman daripada "dapatkan", dan "posting" tidak memiliki batasan ukuran

Contoh

Formulir dengan dua tombol kirim. Yang pertama mengirimkan form-data dengan method="get". Yang kedua mengirimkan form-data dengan method="post":

<form action="/action_page.php" method="get">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Submit using GET">
  <input type="submit" formmethod="post" value="Submit using POST">
</form>

Atribut formtarget

Atribut input formtargetmenentukan nama atau kata kunci yang menunjukkan tempat untuk menampilkan respons yang diterima setelah mengirimkan formulir.

Catatan: Atribut ini menimpa atribut target <form>elemen.

Atribut formtargetberfungsi dengan jenis input berikut: kirim dan gambar.

Contoh

Formulir dengan dua tombol kirim, dengan jendela target yang berbeda:

<form action="/action_page.php">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Submit">
  <input type="submit" formtarget="_blank" value="Submit to a new window/tab">
</form>

Atribut formnovalidate

Atribut input formnovalidatemenetapkan bahwa elemen <input> tidak boleh divalidasi saat dikirimkan.

Catatan: Atribut ini menimpa atribut novalidate dari <form> elemen.

Atribut formnovalidateberfungsi dengan jenis input berikut: kirim.

Contoh

Formulir dengan dua tombol kirim (dengan dan tanpa validasi):

<form action="/action_page.php">
  <label for="email">Enter your email:</label>
  <input type="email" id="email" name="email"><br><br>
  <input type="submit" value="Submit">
  <input type="submit" formnovalidate="formnovalidate"
  value="Submit without validation">
</form>

Atribut yang tidak valid

Atribut novalidateadalah <form>atribut.

Saat ada, novalidate menentukan bahwa semua data formulir tidak boleh divalidasi saat dikirimkan.

Contoh

Tentukan bahwa tidak ada data formulir yang harus divalidasi saat dikirim:

<form action="/action_page.php" novalidate>
  <label for="email">Enter your email:</label>
  <input type="email" id="email" name="email"><br><br>
  <input type="submit" value="Submit">
</form>

Formulir HTML dan Elemen Masukan

Tag Description
<form> Defines an HTML form for user input
<input> Defines an input control

Untuk daftar lengkap semua tag HTML yang tersedia, kunjungi Referensi Tag HTML kami .