Sebagian besar situs dan aplikasi menyertakan formulir web. Situs lelucon, seperti DoWebsites<form>.
Elemen <form> HTML mengidentifikasi landmark dokumen yang berisi
kontrol interaktif untuk mengirimkan informasi. Ditingkatkan dalam <form>, Anda akan menemukan semua elemen interaktif (dan non-interaktif)
kontrol formulir yang membentuk formulir tersebut.
HTML sangat canggih. Bagian ini berfokus pada kekuatan HTML, yang mencakup apa yang dapat dilakukan HTML tanpa menambahkan JavaScript. Menggunakan data formulir sisi klien untuk mengupdate UI dengan cara tertentu umumnya melibatkan CSS atau JavaScript, yang tidak dibahas di sini. Terdapat keseluruhan kursus Mempelajari Formulir. Kami tidak akan menduplikasi bagian tersebut di sini, tetapi kami akan memperkenalkan beberapa kontrol bentuk dan atribut HTML yang mendukungnya.
Dengan formulir, Anda dapat memungkinkan pengguna berinteraksi dengan situs atau aplikasi Anda, memvalidasi informasi yang dimasukkan, dan mengirim
data ke server. Atribut HTML dapat mewajibkan pengguna memilih kontrol formulir atau memasukkan nilai. HTML
dapat menentukan kriteria tertentu bahwa nilai harus cocok agar valid. Saat pengguna mencoba mengirimkan formulir,
semua nilai kontrol formulir akan melalui validasi batasan sisi klien dan dapat mencegah pengiriman
hingga data cocok
dengan kriteria yang dibutuhkan; semuanya tanpa JavaScript. Anda juga dapat menonaktifkan fitur ini: menyetel novalidate
di <form> atau, lebih sering, formnovalidate pada tombol, yang menyimpan data formulir untuk diisi nanti,
mencegah validasi.
Mengirimkan formulir
Formulir dikirim saat pengguna mengaktifkan tombol kirim yang ada di dalam formulir. Saat menggunakan <input> untuk tombol,
'nilai' adalah label tombol, dan ditampilkan di tombol. Jika menggunakan <button>, label adalah teks di antara pembukaan
serta tag <button> penutup. Tombol kirim dapat ditulis dengan salah satu dari dua cara berikut:
<input type="submit" value="Submit Form">
<button type="submit">Submit Form</button>
Untuk formulir yang sangat sederhana, Anda memerlukan elemen <form>, dengan beberapa input formulir di dalamnya, dan tombol kirim. Namun, ada
tidak lebih dari itu
untuk mengirimkan formulir.
Atribut elemen <form> menetapkan metode HTTP dengan
tempat formulir dikirimkan dan URL yang memproses pengiriman formulir. Ya, formulir dapat dikirim, diproses, dan
halaman baru dapat
dimuat tanpa JavaScript. Elemen <form> sangatlah canggih.
action dan method elemen <form>
menentukan URL yang memproses data formulir dan metode HTTP yang digunakan untuk mengirimkan data.
Secara default, data formulir dikirim ke halaman saat ini. Jika tidak, tetapkan atribut action ke URL tempat data akan dikirim.
Data yang dikirim terdiri dari pasangan nama/nilai dari berbagai kontrol formulir dalam formulir. Secara default, ini mencakup semua
mengontrol yang disusun bertingkat di dalam formulir yang memiliki name. Namun, dengan atribut form, Anda dapat menyertakan kontrol formulir
di luar <form> dan untuk menghilangkan kontrol formulir yang disusun bertingkat dalam <form>. Didukung pada kontrol formulir dan <fieldset>,
yang digunakan atribut form sebagai nilainya id dari bentuk kontrol yang terkait dengannya, belum tentu bentuknya
tersusun bertingkat. Artinya, kontrol formulir tidak perlu disusun bertingkat secara fisik di <form>.
Atribut method menentukan protokol HTTP permintaan: umumnya GET atau POST. Dengan GET, data formulir dikirim sebagai
string parameter dari pasangan name=value, yang ditambahkan ke URL action.
Dengan POST, data ditambahkan ke isi permintaan HTTP. Saat mengirimkan data yang aman, seperti sandi dan kartu kredit
ini, selalu gunakan POST.
Ada juga metode DIALOG. Jika <form method="dialog"> berada dalam <dialog>, mengirimkan formulir akan menutup dialog;
ada peristiwa pengiriman meskipun data tidak dihapus atau dikirim. Sekali lagi, tanpa JavaScript. Hal ini dibahas di
bagian dialog. Perlu diperhatikan, karena ini tidak membuat formulir, Anda mungkin ingin
menyertakan formmethod="dialog"dan formnovalidate di tombol kirim.
Tombol formulir dapat memiliki lebih dari atribut yang dijelaskan di awal bagian ini. Jika tombol menyertakan formaction,
Atribut formenctype, formmethod, formnovalidate, atau formtarget, nilai yang ditetapkan pada tombol yang mengaktifkan formulir
pengiriman lebih diutamakan daripada action, enctype, method, dan target
yang ditetapkan pada <form>. Validasi batasan terjadi sebelum pengiriman formulir, tetapi hanya jika tidak ada
formnovalidate di tombol kirim yang diaktifkan atau novalidate di <form>.
Untuk melihat tombol mana yang digunakan untuk mengirimkan formulir, berikan
tombol name. Tombol tanpa nama atau nilai tidak akan dikirim bersama data formulir saat formulir dikirimkan.
Setelah mengirimkan formulir
Saat pengguna mengirimkan formulir online yang telah diisi, nama dan nilai kontrol formulir yang relevan akan dikirimkan. Nama adalah nilai atribut name. Nilai berasal dari konten atribut value atau nilai yang dimasukkan atau diambil oleh pengguna. Nilai <textarea> adalah teks di dalamnya.
Nilai <select> adalah value dari <option> yang dipilih atau, jika <option> tidak menyertakan atribut value, nilainya adalah teks dalam dari opsi yang dipilih.
<form method="GET">
<label for="student">Pick a student:</label>
<select name="student" id="student">
<option value="hoover">Hoover Sukhdeep</option>
<option>Blendan Smooth</option>
<option value="toasty">Toasty McToastface</option>
</select>
<input type="submit" value="Submit Form">
</form>
Memilih "Hoover Sukhdeep" (atau tidak melakukan apa pun, saat browser menampilkan sehingga memilih nilai opsi pertama secara default) lalu mengklik tombol kirim akan memuat ulang halaman ini, menyetel URL ke:
https://web.dev/learn/html/forms?student=hoover
Karena opsi kedua tidak memiliki atribut value, teks dalam dikirimkan sebagai nilai. Memilih "Blendan Smooth"
dan mengklik tombol kirim akan memuat ulang halaman ini, menyetel URL ke:
https://web.dev/learn/html/forms?student=Blendan+Smooth
Saat formulir dikirim, informasi yang dikirim mencakup nama dan nilai semua kontrol formulir bernama yang memiliki name
kecuali kotak centang yang tidak dipilih, tombol pilihan yang tidak dipilih, serta nama dan nilai tombol selain yang
mengirimkan formulir. Untuk semua kontrol formulir lainnya, jika kontrol formulir memiliki nama, tetapi tidak ada nilai yang dimasukkan atau ditetapkan secara default,
name kontrol formulir dikirim dengan nilai kosong.
Ada 22 jenis input, sehingga tidak dapat mencakup semuanya.
Perhatikan bahwa menyertakan nilai bersifat opsional, dan sering kali merupakan ide yang buruk, saat Anda ingin pengguna memasukkan informasi.
Untuk elemen <input> yang tidak dapat diedit pengguna, Anda harus selalu menyertakan nilai, termasuk untuk input
elemen dengan jenis hidden, radio, checkbox, submit, button, dan reset.
Menggunakan name unik untuk kontrol formulir mempermudah pemrosesan data sisi server dan direkomendasikan, dengan kotak centang dan
tombol pilihan merupakan pengecualian untuk aturan ini.
Tombol pilihan
Jika Anda pernah memperhatikan bahwa saat memilih tombol pilihan dalam sekumpulan tombol pilihan, hanya satu yang dapat dipilih di
waktu, ini karena atribut name. Efek hanya satu yang dapat dipilih ini dibuat dengan memberikan setiap tombol pilihan
dalam grup name yang sama.
name harus unik untuk grup tersebut: jika Anda tidak sengaja menggunakan name yang sama untuk dua grup terpisah, memilih radio
di grup kedua akan membatalkan pilihan apa pun yang dibuat dalam grup pertama dengan name yang sama.
name dan value dari tombol pilihan yang dipilih dikirimkan bersama formulir. Pastikan setiap tombol pilihan memiliki
value yang relevan (dan biasanya unik). Nilai tombol pilihan yang tidak dipilih tidak dikirim.
Anda dapat memiliki grup radio sebanyak yang diinginkan di halaman, dengan setiap grup bekerja secara independen, selama masing-masing grup memiliki
unik untuk name grup.
Jika Anda ingin memuat halaman dengan salah satu tombol pilihan dalam grup bernama sama yang dipilih, sertakan atribut checked.
Tombol pilihan ini akan cocok dengan class semu CSS :default,
bahkan jika pengguna memilih radio yang berbeda. Tombol pilihan yang saat ini dipilih cocok dengan :checked
kelas semu.
Jika pengguna harus memilih kontrol pilihan dari grup tombol pilihan, tambahkan atribut required ke setidaknya satu
kontrol. Menyertakan required pada tombol pilihan dalam grup membuat pemilihan diperlukan untuk pengiriman formulir, tetapi hal ini
tidak harus berupa radio dengan
atribut yang dipilih agar valid. Selain itu, tunjukkan dengan jelas dalam <legend>
bahwa kontrol formulir diperlukan. Pelabelan grup tombol pilihan beserta setiap tombol dijelaskan
nanti.
Kotak centang
Ini valid untuk semua kotak centang dalam suatu grup yang memiliki name yang sama. Hanya kotak centang yang dipilih yang memiliki name dan value
yang dikirim bersama formulir. Jika Anda memiliki beberapa kotak centang dengan nama yang sama yang dipilih, nama yang sama akan dikirimkan dengan
(semoga) nilai yang berbeda. Jika Anda memiliki beberapa kontrol formulir dengan nama yang sama, meskipun tidak semuanya kotak centang,
mereka semua akan diserahkan, dipisahkan dengan tanda dan.
Jika Anda tidak menyertakan value pada kotak centang, nilai dari kotak centang yang dipilih akan ditetapkan secara default ke on, yang mungkin tidak
membantu. Jika Anda memiliki tiga kotak centang bernama chk dan semuanya dicentang, pengiriman formulir tidak akan dapat diuraikan:
https://web.dev/learn/html/forms?chk=on&chk=on&chk=on
Untuk membuat kotak centang bersifat wajib, tambahkan atribut required. Selalu beri tahu pengguna jika kotak centang harus dicentang, atau jika
semua kontrol formulir diperlukan. Menambahkan required ke kotak centang hanya akan mewajibkan kotak centang tersebut; tidak berdampak pada
kotak centang dengan
nama yang sama.
Label dan kumpulan kolom
Agar pengguna mengetahui cara mengisi formulir, formulir tersebut harus dapat diakses. Setiap kontrol formulir harus memiliki label.
Anda juga ingin memberi label pada kelompok kontrol formulir. Sementara area input individual, pilih, dan teks diberi label dengan <label>,
grup kontrol formulir diberi label berdasarkan konten <legend>
<fieldset> yang mengelompokkannya.
Dalam contoh sebelumnya, Anda mungkin telah melihat bahwa setiap kontrol formulir, kecuali tombol kirim, memiliki <label>. Label
menyediakan kontrol formulir
dengan nama yang bisa diakses. Tombol mendapatkan nama yang dapat diakses dari konten atau nilainya. Semua lainnya
kontrol formulir memerlukan <label> terkait. Jika tidak ada label terkait, browser akan tetap merender kontrol formulir Anda,
tetapi pengguna tidak akan tahu
informasi apa yang diharapkan.
Untuk mengaitkan kontrol formulir secara eksplisit dengan <label>, sertakan atribut for pada <label>: nilainya adalah
id kontrol formulir yang terkait dengannya.
<label for="full_name">Your name</label>
<input type="text" id="full_name" name="name">
Mengaitkan label dengan kontrol formulir memiliki beberapa manfaat. Label membuat kontrol formulir dapat diakses oleh pengguna pembaca layar dengan memberi kontrol dengan nama yang mudah diakses. Label juga merupakan "area hit"; mereka membuat situs lebih bermanfaat bagi pengguna dengan masalah ketangkasan dengan meningkatkan area. Jika menggunakan mouse, coba klik di mana saja pada label "Your name". Melakukan jadi berikan fokus pada input.
Untuk memberikan label implisit, sertakan kontrol formulir antara tag <label> pembuka dan penutup. Hal ini setara
dapat diakses dari pembaca layar dan perspektif perangkat pointer, tetapi tidak menyediakan hook penataan gaya seperti
label.
<label>Your name
<input type="text" name="name">
</label>
Karena label adalah "area hit", jangan sertakan elemen interaktif dalam label eksplisit, atau komponen interaktif lainnya selain kontrol formulir berlabel dalam label implisit. Misalnya, jika Anda menyertakan tautan dalam label, saat {i>browser<i} akan merender HTML, pengguna Anda akan bingung jika mereka mengeklik label untuk memasuki kontrol formulir tetapi diarahkan ke laman baru.
Umumnya, <label> ditempatkan sebelum kontrol formulir, kecuali dalam kasus tombol pilihan dan kotak centang. Tindakan ini tidak wajib.
Itu hanya pola UX yang umum. Seri Pelajari Formulir memiliki informasi tentang desain formulir.
Untuk grup tombol pilihan dan kotak centang, label memberikan nama yang dapat diakses untuk kontrol formulir yang terkait dengannya;
tetapi grup kontrol dan labelnya
juga membutuhkan label. Untuk memberi label pada grup, kelompokkan semua elemen ke dalam
<fieldset>, dengan <legend> yang memberikan label untuk grup.
<fieldset>
<legend>Who is your favorite student?</legend>
<ul>
<li>
<label>
<input type="radio" value="blendan" name="machine"> Blendan Smooth
</label>
</li>
<li>
<label>
<input type="radio" value="hoover" name="machine"> Hoover Sukhdeep
</label>
</li>
<li>
<label>
<input type="radio" value="toasty" name="machine"> Toasty McToastface
</label>
</li>
</ul>
</fieldset>
Dalam contoh ini, setiap <label> implisit memberi label tombol pilihan, dan <legend> memberikan label untuk grup tombol pilihan.
Menyarangkan <fieldset> di dalam <fieldset> lain adalah praktik standar. Misalnya, jika formulir adalah survei yang berisi banyak pertanyaan
dibagi menjadi beberapa kelompok pertanyaan
terkait, yaitu “siswa favorit” <fieldset> mungkin disusun bertingkat di <fieldset> lain yang diberi label sebagai
"Favorit Anda":
<fieldset>
<legend>Your favorites:</legend>
<ul start="6">
<li>
<fieldset>
<legend>Who is your favorite student?</legend>
<ul>
<li>
<!-- the rest of the code here -->
Elemen-elemen ini tampilan default telah menyebabkannya kurang digunakan, tetapi <legend> dan <fieldset> dapat ditata dengan CSS.
Selain semua atribut global, <fieldset> juga mendukung atribut name, disabled, dan form.
Saat Anda menonaktifkan kumpulan kolom, semua kontrol formulir bertingkat akan dinonaktifkan. Baik atribut name maupun form tidak memiliki
banyak digunakan di <fieldset>. name dapat digunakan untuk mengakses kumpulan kolom dengan JavaScript, tetapi kolom itu sendiri
tidak disertakan dalam data yang dikirimkan (kontrol formulir bernama yang ada di dalamnya disertakan).
Jenis input dan keyboard dinamis
Seperti disebutkan sebelumnya, ada 22 jenis input yang berbeda.
Dalam beberapa kasus, ketika pengguna menggunakan perangkat dengan {i>keyboard<i} dinamis yang hanya menampilkan sesuai kebutuhan, seperti ponsel,
{i>type use<i} menentukan jenis {i>keyboard<i} yang ditampilkan. Keyboard default yang ditampilkan dapat dioptimalkan untuk jenis input yang diperlukan.
Misalnya, ketik tel akan menampilkan keypad yang dioptimalkan untuk memasukkan nomor telepon; email menyertakan @ dan .; dan
keyboard dinamis untuk url menyertakan simbol titik dua dan garis miring. Sayangnya, iPhone tetap tidak menyertakan : di
keyboard dinamis default untuk jenis input url.
Keyboard untuk <input type="tel"> di iPhone dan dua ponsel Android yang berbeda:
Keyboard untuk <input type="email"> di iPhone dan dua ponsel Android yang berbeda:
Mengakses mikrofon dan kamera
Jenis input file <input type="file"> memungkinkan upload file melalui formulir. File dapat berupa jenis apa pun, ditentukan dan dibatasi
oleh atribut accept. Daftar jenis file yang dapat diterima dapat berupa daftar ekstensi file yang dipisahkan koma, jenis global,
atau kombinasi jenis
dan ekstensi global. Misalnya, accept="video/*, .gif" menerima file video atau gif animasi apa pun.
Gunakan "audio/*" untuk file suara, "video/*" untuk file video, dan "image/*" untuk file gambar.
Atribut capture terenumerasi, yang ditentukan dalam
spesifikasi pengambilan media, dapat digunakan jika media baru
file akan dibuat menggunakan kamera atau mikrofon pengguna. Anda dapat menetapkan nilai ke user untuk perangkat input yang ditampilkan kepada pengguna
atau environment untuk kamera belakang atau mikrofon ponsel. Umumnya, penggunaan capture, tanpa nilai, akan berfungsi karena pengguna
akan memilih perangkat input
mana yang ingin mereka gunakan.
<label for="avatar">A recent photo of yourself:</label>
<input type="file" capture="user" accept="image/*" name="avatar" id="avatar">
Validasi bawaan
Sekali lagi, tanpa menyertakan JavaScript, HTML dapat mencegah pengiriman formulir dengan nilai yang tidak valid.
Ada beberapa pemilih CSS yang cocok dengan kontrol formulir berdasarkan keberadaan atribut HTML, termasuk :required
dan :optional jika boolean required
sudah diatur atau belum; :default jika checked
di-hard code; dan :enabled atau :disabled,
tergantung pada apakah elemen tersebut interaktif dan apakah disabled
ada. Pseudoclass :read-write cocok dengan elemen dengan
contenteditable disetel dan
kontrol formulir yang dapat diedit secara default, seperti jenis input number, password, dan text (tetapi bukan kotak centang,
tombol pilihan, atau jenis hidden). Jika elemen yang biasanya dapat ditulis memiliki readonly
kumpulan atribut ini, atribut ini akan cocok dengan :read-only.
Saat pengguna memasukkan informasi ke dalam kontrol formulir, pemilih UI CSS, termasuk :valid,
:invalid, :in-range, dan
:out-of-range akan diaktifkan dan dinonaktifkan bergantung pada statusnya. Saat pengguna
keluar dari kontrol formulir, baik :user-invalid yang belum didukung sepenuhnya atau
Class semu :user-valid akan cocok.
Anda dapat menggunakan CSS untuk memberikan isyarat tentang apakah kontrol formulir diperlukan dan valid saat pengguna berinteraksi dengan formulir. Anda bahkan dapat menggunakan CSS untuk mencegah pengguna mengklik tombol kirim hingga formulirnya valid:
form:invalid [type="submit"] {
opacity: 50%;
pointer-events: none;
}
Cuplikan CSS ini adalah anti-pola. Meskipun UI Anda mungkin terasa intuitif dan jelas, banyak pengguna mencoba mengirimkan formulir kepada mengaktifkan pesan error. Membuat tombol kirim tampak dinonaktifkan dengan cara ini tidak memungkinkan validasi batasan, yang dapat diandalkan banyak pengguna.
CSS yang diterapkan diperbarui terus-menerus berdasarkan status UI saat ini. Misalnya, ketika Anda menyertakan tipe
input dengan
seperti email, number, url, dan jenis tanggal, jika nilainya bukan null (tidak kosong) dan
bukan email, angka, URL, tanggal, atau waktu yang valid, class semu CSS :invalid akan cocok. Konstanta ini
berbeda dengan validasi batasan HTML bawaan, yang hanya terjadi ketika pengguna mencoba mengirimkan formulir.
Validasi batasan bawaan hanya relevan dengan batasan yang ditetapkan dengan atribut HTML. Meskipun Anda dapat menata
gaya elemen berdasarkan
pada pseudoclass :required dan :valid/:invalid, browser memberikan pesan error yang berasal dari error berdasarkan
atribut required, pattern, min, max, dan bahkan type, hadir saat pengiriman formulir.
Saat kami mencoba mengirimkan formulir tanpa memilih siswa favorit yang diperlukan, validasi batasan mencegah pengiriman formulir
karena error validityState.valueMissing.
Jika salah satu properti validityState menampilkan true, pengiriman diblokir, dan browser akan menampilkan pesan error
di kontrol formulir pertama yang salah, sehingga memberikan fokus. Saat pengguna mengaktifkan pengiriman formulir dan ada nilai yang tidak valid,
kontrol formulir pertama yang tidak valid akan menampilkan pesan error dan menerima fokus. Jika kontrol yang diperlukan tidak memiliki nilai yang ditetapkan,
nilai numerik di luar rentang, atau jika nilai bukan dari jenis yang diwajibkan oleh atribut type, formulir tidak akan divalidasi,
tidak akan dikirimkan, dan pesan {i>error<i} akan muncul.
Jika nilai number, tanggal, atau waktu berada di bawah min minimum yang ditetapkan atau di atas max maksimum, tetapkan kontrolnya adalah :out-of-range (dan :invalid), dan
pengguna akan diberi tahu tentang valididityState.rangeUnderflow,
validityState.rangeOverflow saat melakukan
coba kirimkan formulirnya. Jika nilai tersebut tidak sesuai dengan
Nilai step, baik yang secara eksplisit ditetapkan atau ditetapkan secara default ke 1, kontrolnya adalah :out-of-range (dan :invalid) dan akan ada
Error validityState.stepMismatch. Error muncul sebagai balon dan secara default memberikan informasi berguna tentang cara memperbaiki kesalahan tersebut.
Ada atribut serupa untuk panjang nilai: minlength
dan atribut maxlength akan memberi tahu pengguna tentang error
dengan validityState.tooLong atau
validityState.tooShort setelah dikirimkan.
maxlength juga mencegah pengguna memasukkan terlalu banyak karakter.
Penggunaan atribut maxlength dapat menyebabkan pengalaman pengguna yang buruk. Ini umumnya adalah pengalaman yang lebih baik
untuk memungkinkan pengguna
untuk memasukkan lebih dari panjang karakter yang diizinkan yang menyediakan penghitung, secara opsional dalam bentuk
Elemen <output>, yang tidak dikirimkan bersama formulir,
memungkinkan mereka mengedit teks hingga {i>output<i} menunjukkan bahwa panjang maksimum yang diizinkan belum terlampaui. maxlength
dapat disertakan di HTML; seperti yang telah kita bahas, aplikasi ini bekerja tanpa JavaScript. Kemudian, saat dimuat, nilai
atribut maxlength dapat digunakan untuk membuat penghitung karakter ini di JavaScript.
Beberapa jenis input tampaknya memiliki batasan default, tetapi tidak demikian. Misalnya, jenis input tel memberikan input numerik
keypad telepon pada perangkat dengan keyboard dinamis, tetapi tidak membatasi nilai yang valid. Untuk ini, dan jenis input lainnya,
ada atribut pattern. Anda dapat menentukan ekspresi reguler yang nilainya harus cocok agar dianggap valid.
Jika nilai adalah string kosong, dan nilai tidak diperlukan, hal ini tidak akan menyebabkan validityState.patternMismatch
{i>error<i}. Jika wajib dan kosong, pesan error default untuk validityState.valueMissing akan ditampilkan kepada pengguna, bukan
patternMismatch.
Untuk email, validityState.typeMismatch mungkin terlalu
memaafkan
kebutuhan Anda. Anda mungkin ingin menyertakan pattern
sehingga alamat email intranet tanpa TLD tidak dianggap valid.
Atribut pola memungkinkan penyediaan ekspresi reguler yang harus cocok dengan nilai. Saat memerlukan kecocokan pola,
memastikan bahwa apa yang diharapkan
oleh pengguna sangat jelas.
Semua ini dapat dilakukan tanpa satu baris JavaScript, tetapi dengan menjadi API HTML, Anda dapat menggunakan JavaScript untuk menyertakan selama validasi batasan. Anda juga dapat menggunakan JavaScript untuk memperbarui berapa banyak karakter yang tersisa, menampilkan status progres untuk kekuatan sandi, atau sejumlah cara lainnya untuk meningkatkan penyelesaian secara dinamis.
Contoh
Contoh ini memiliki formulir dalam <dialog> dengan <form> bertingkat dengan tiga kontrol formulir dan dua tombol kirim, dengan
label dan instruksi yang jelas.
Tombol kirim pertama menutup dialog. Gunakan formmethod="dialog" untuk mengganti metode default formulir, dan tutup
<dialog> tanpa mengirimkan data atau menghapusnya. Anda juga harus menyertakan formnovalidate. Jika tidak, browser akan
coba lakukan validasi untuk memastikan
semua isian yang wajib diisi memiliki nilai. Pengguna mungkin ingin menutup dialog dan formulir tanpa
memasukkan data apa pun; {i>validasi <i}akan mencegah hal ini. Sertakan aria-label="close" karena “X" adalah isyarat visual yang umum tetapi
bukan label deskriptif.
Semua kontrol formulir memiliki label implisit, sehingga Anda tidak perlu menyertakan atribut id atau for. Elemen input
memiliki atribut yang diperlukan sehingga bersifat wajib. Input angka memiliki step yang disetel secara eksplisit untuk menunjukkan cara step
disertakan. Karena step ditetapkan secara default ke 1, atribut ini dapat dihilangkan.
<select> memiliki nilai default sehingga atribut required tidak diperlukan. Daripada menyertakan atribut value
pada setiap opsi, nilai secara {i>default<i}
adalah teks dalam.
Tombol kirim di bagian akhir menetapkan metode formulir ke POST. Saat diklik, validitas setiap nilai akan diperiksa. Jika semua
nilai valid, data formulir akan dikirimkan, dialog akan ditutup, dan halaman mungkin mengalihkan ke thankyou.php,
yang merupakan URL tindakan. Jika ada nilai yang hilang, atau jika nilai numerik memiliki ketidakcocokan langkah atau berada di luar rentang,
pesan kesalahan yang ditetapkan oleh browser yang relevan akan muncul, formulir tidak akan dikirimkan, dan dialog tidak akan ditutup.
Pesan error default dapat disesuaikan dengan validityState.setCustomValidity('message here')
. Perhatikan bahwa jika Anda menetapkan pesan khusus, pesan harus secara eksplisit diatur ke string kosong
valid atau formulir tidak dapat dikirim.
Pertimbangan lainnya
Ada bagian tersendiri yang dikhususkan untuk membantu pengguna memasukkan data yang tepat dalam formulir. Untuk kebaikan {i>user experience<i}, penting untuk mencegah pengguna membuat kesalahan dengan menyertakan instruksi dan memberikan petunjuk sesuai kebutuhan. Meskipun bagian ini membahas bagaimana HTML saja dapat memberikan validasi sisi klien, validasi harus berada di sisi klien dan sisi server. Validasi dapat diberikan dengan cara yang tidak mengganggu selama pengisian formulir, seperti menambahkan tanda centang jika nilainya benar. Namun, jangan berikan pesan error sebelum kontrol formulir selesai. Jika pengguna melakukan kesalahan, memberi tahu pengguna di mana kesalahannya dan apa yang salah.
Dalam merancang formulir, penting untuk mempertimbangkan bahwa tidak semua orang seperti Anda. Seseorang mungkin memiliki satu huruf sebagai nama belakang (atau tanpa nama belakang sama sekali), mungkin tidak memiliki kode pos, atau memiliki alamat jalan tiga baris, mungkin tidak memiliki alamat. Mereka mungkin melihat versi terjemahan formulir Anda.
Kontrol formulir, labelnya, dan pesan error harus terlihat di layar, akurat dan bermakna, secara terprogram
dapat ditentukan, dan secara terprogram
terkait dengan elemen bentuk atau grup yang sesuai. autocomplete
dapat dan harus digunakan untuk memungkinkan pengisian formulir yang lebih cepat dan meningkatkan aksesibilitas.
HTML menyediakan semua alat untuk membuat kontrol formulir dasar dapat diakses. Semakin interaktif elemen formulir atau proses, semakin banyak perhatian perlu diberikan pada aksesibilitas sehubungan dengan pengelolaan fokus, penetapan dan pembaruan nama, peran ARIA, dan nilai, jika perlu, serta pengumuman langsung ARIA sesuai kebutuhan. Tapi, seperti yang telah kita pelajari di sini, dengan HTML saja, Anda bisa mendapatkan jauh ke sasaran aksesibilitas dan validitas tanpa menggunakan ARIA atau JavaScript.
Menguji pemahaman Anda
Uji pengetahuan Anda tentang formulir.
Bagaimana Anda membuat tombol pilihan menjadi bagian dari grup yang sama?
name yang sama.id yang sama.Elemen HTML mana yang digunakan untuk memberi tahu pengguna untuk apa kolom formulir ini?
<h1><title><label>