Atribut form* Input HTML

Kursus yang disarankan: <input> Bab ini memperkenalkan HTML beda elemen Atribut.

form*

aturan input Atribut form form <input> Atribut menentukan

Formulir milik elemen.

Contoh

Nilai atribut ini harus sama dengan atribut id <form> yang bersangkutan.

Kolom input yang berada di luar formulir HTML (tetapi tetap bagian dari formulir):
  <label for="fname">Keluarga:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <input type="submit" value="Kirim">
</form>
<label for="lname">Nama:</label>
<form action="/action_page.php" id="form1">

Coba Sendiri

<input type="text" id="lname" name="lname" form="form1">

aturan input formaction Atribut formaction

Komentar:Atribut menentukan URL file yang akan menangani input (data) saat formulir disubmit. <form> attribut yang akan atribut Atribut.

formaction Properti ini berlaku untuk jenis input berikut: submit dan image.

Contoh

Formulir HTML dengan dua tombol pengiriman yang berbeda (aksi):

<form action="/action_page.php">
  <label for="fname">Keluarga:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Nama:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Kirim">
  <input type="submit" formaction="/action_page2.php" value="kirim sebagai admin">
</form>

Coba Sendiri

Atribut formenctype

aturan input formenctype Atribut menentukan bagaimana data formulir disubmitkan (hanya berlaku untuk formulir dengan method="post").

Komentar:Atribut ini akan menimpa <form> atribut enctype elemen.

formenctype Properti ini berlaku untuk jenis input berikut: submit dan image.

Contoh

Formulir dengan dua tombol pengiriman. Tombol pertama mengirimkan data formulir dengan pengodean standar, tombol kedua mengirimkan data formulir dengan pengodean "multipart/form-data":

<form action="/action_page_binary.asp" method="post">
  <label for="fname">Nama Depan:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <input type="submit" value="Kirim">
  <input type="submit" formenctype="multipart/form-data"
  value="kirim dengan pengodean Multipart/form-data">
</form>

Coba Sendiri

Atribut formmethod

aturan input formmethod Atribut menentukan metode HTTP yang digunakan untuk mengirimkan data formulir ke URL aksi.

Komentar:Atribut ini akan menimpa <form> atribut method elemen.

formmethod Properti ini berlaku untuk jenis input berikut: submit dan image.

Data formulir dapat dikirim sebagai variabel URL (method="get") atau sebagai transaksi HTTP post (method="post")

Perhatian tentang GET:

  • Tambahkan data formulir dalam bentuk pasangan nama/nilai ke URL
  • Jangan pernah gunakan GET untuk mengirimkan data sensitif! (Data formulir yang dikirim dapat dilihat di URL)
  • Panjang URL terbatas (2048 karakter)
  • Berguna untuk pengiriman formulir yang pengguna ingin menambahkan hasilnya sebagai bookmark
  • GET digunakan untuk data yang tidak aman, seperti string pencarian di Google

Perhatian tentang POST:

  • Tambahkan data formulir ke dalam正文 permintaan HTTP (tidak ditampilkan di URL pengiriman formulir)
  • POST tidak memiliki batas ukuran, dapat digunakan untuk mengirimkan data besar.
  • Pengiriman formulir dengan POST tidak dapat ditambahkan bookmark

Petunjuk:Jika data formulir mengandung informasi sensitif atau pribadi, pastikan untuk menggunakan POST!

Contoh

Formulir dengan 2 tombol pengiriman. Yang pertama mengirim data formulir dengan method="get". Yang kedua mengirim data formulir dengan method="post":

<form action="/action_page.php" method="get">
  <label for="fname">Keluarga:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Nama:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Gunakan pengiriman GET">
  <input type="submit" formmethod="post" value="Gunakan pengiriman POST">
</form>

Coba Sendiri

Properti formtarget

aturan input formtarget Properti menentukan nama atau kata kunci yang menentukan tempat tampilan tanggapan yang diterima setelah mengirimkan formulir.

Komentar:Atribut ini akan menimpa <form> properti target elemen.

formtarget Properti ini berlaku untuk jenis input berikut: submit dan image.

Contoh

Berkaitan dengan formulir yang memiliki 2 tombol pengiriman dengan jendela tujuan yang berbeda:

<form action="/action_page.php">
  <label for="fname">Keluarga:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Nama:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Kirim">
  <input type="submit" formtarget="_blank" value="Kirim ke jendela/tab baru">
</form>

Coba Sendiri

properti formnovalidate

aturan input formnovalidate Aturan properti adalah untuk mengirimkan tanpa memverifikasi elemen <input> saat pengiriman.

Komentar:Atribut ini akan menimpa <form> Atribut novalidate elemen.

formnovalidate Atribut berlaku untuk jenis input berikut: submit.

Contoh

Formulir dengan tombol submit dua (yang divalidasi dan yang tidak divalidasi):

<form action="/action_page.php">
  <label for="email">Masukkan email Anda:</label>
  <input type="email" id="email" name="email"><br><br>
  <input type="submit" value="Kirim">
  <input type="submit" formnovalidate="formnovalidate">
  value="Kirim tanpa pemeriksaan">
</form>

Coba Sendiri

Atribut novalidate

novalidate Atribut adalah <form> Atribut.

Jika sudah diatur, atribut novalidate menentukan bahwa semua data formulir tidak harus divalidasi saat disubmit.

Contoh

Tentukan bahwa tidak ada data formulir yang divalidasi saat disubmit:

<form action="/action_page.php" novalidate>
  <label for="email">Masukkan email Anda:</label>
  <input type="email" id="email" name="email"><br><br>
  <input type="submit" value="Kirim">
</form>

Coba Sendiri

Elemen Form dan Input HTML

Tag Deskripsi
<form> Definisi input pengguna untuk formulir HTML.
<input> Definisi Kontrol Input.

Untuk daftar lengkap tag HTML yang tersedia, kunjungi Panduan Referensi Tag HTML。