Sebagian besar situs dan aplikasi menyertakan formulir web. Situs lelucon, seperti DoWebsites<form>.
Elemen <form> HTML mengidentifikasi landmark dokumen yang berisi kontrol interaktif untuk mengirim informasi. Bertingkat pada <form>, Anda akan menemukan semua kontrol formulir interaktif (dan non-interaktif)
yang membentuk formulir tersebut.
HTML sangat ampuh. Bagian ini berfokus pada kemampuan HTML, yang membahas apa yang dapat dilakukan HTML tanpa menambahkan JavaScript. Menggunakan data formulir sisi klien untuk mengupdate UI dalam beberapa cara umumnya melibatkan CSS atau JavaScript, yang tidak dibahas di sini. Ada seluruh kursus Mempelajari Formulir. Kami tidak akan menduplikasi bagian tersebut di sini, tetapi kami akan memperkenalkan beberapa kontrol formulir dan atribut HTML yang mendukungnya.
Dengan formulir, Anda dapat memungkinkan pengguna berinteraksi dengan situs atau aplikasi Anda, memvalidasi informasi yang dimasukkan, dan mengirimkan
data ke server. Atribut HTML dapat mengaktifkan mengharuskan pengguna untuk memilih kontrol formulir atau memasukkan nilai. Atribut HTML dapat menentukan kriteria tertentu yang harus cocok dengan nilainya agar valid. Saat pengguna mencoba mengirimkan formulir,
semua nilai kontrol formulir akan melalui validasi batasan sisi klien dan dapat mencegah pengiriman
hingga data sesuai dengan kriteria yang diperlukan; semuanya tanpa JavaScript. Anda juga dapat menonaktifkan fitur ini: menyetel atribut novalidate
di <form> atau, lebih sering, formnovalidate pada tombol, menyimpan data formulir untuk diselesaikan nanti,
akan mencegah validasi.
Mengirimkan formulir
Formulir dikirim saat pengguna mengaktifkan tombol kirim yang bersarang di dalam formulir. Saat menggunakan <input> untuk tombol,
'value' adalah label tombol, dan ditampilkan di tombol. Saat menggunakan <button>, label adalah teks antara tag
<button> pembuka dan 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, cara mengirim formulir tidak hanya itu.
Atribut elemen <form> menetapkan metode HTTP yang digunakan untuk mengirimkan formulir dan URL yang memproses pengiriman formulir. Ya, formulir dapat dikirim, diproses, dan halaman baru dapat dimuat tanpa JavaScript. Elemen <form> sangat efektif.
Nilai atribut action dan method elemen <form>
menentukan URL yang memproses data formulir dan metode HTTP yang masing-masing digunakan untuk mengirim data.
Secara default, data formulir dikirimkan ke halaman saat ini. Jika tidak, tetapkan atribut action ke URL tempat data harus dikirim.
Data yang dikirim terdiri dari pasangan nama/nilai dari berbagai kontrol formulir. Secara default, ini mencakup semua kontrol
formulir yang disusun bertingkat dalam formulir yang memiliki name. Namun, dengan atribut form, Anda dapat menyertakan kontrol formulir
di luar <form> dan menghilangkan kontrol formulir yang disusun bertingkat dalam <form>. Didukung pada kontrol formulir dan <fieldset>,
atribut form menggunakan id sebagai nilainya dari bentuk kontrol yang terkait, tidak harus bentuk
tempatnya berada. Ini berarti kontrol formulir tidak perlu disusun 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 mengirim data yang aman, seperti sandi dan informasi kartu
kredit, selalu gunakan POST.
Ada juga metode DIALOG. Jika <form method="dialog"> berada dalam <dialog>, pengiriman 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 mengirimkan formulir, sebaiknya sertakan formmethod="dialog" dan formnovalidate di tombol kirim.
Tombol formulir dapat memiliki lebih dari atribut yang dijelaskan di awal bagian ini. Jika tombol tersebut berisi atribut formaction, formenctype, formmethod, formnovalidate, atau formtarget, nilai yang ditetapkan pada tombol yang mengaktifkan pengiriman formulir akan 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 mengambil tombol mana yang digunakan untuk mengirimkan formulir, beri
tombol tersebut 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 dikirim. Nama tersebut adalah nilai atribut name. Nilai berasal dari konten atribut value atau nilai yang dimasukkan atau diambil oleh pengguna. Nilai <textarea> adalah teks bagian dalamnya.
Nilai <select> adalah value <option> yang dipilih atau jika <option> tidak menyertakan atribut value, nilainya adalah teks dalam 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 karena 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 bagian dalam dikirimkan sebagai nilai. Memilih "Blendan Smooth"
dan mengklik tombol kirim akan memuat ulang halaman ini, dengan 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 sebagai default, name kontrol formulir akan dikirimkan dengan nilai kosong.
Ada 22 jenis input, jadi kita tidak dapat membahas semuanya.
Perhatikan bahwa menyertakan nilai bersifat opsional, dan sering kali merupakan ide buruk, ketika Anda ingin pengguna memasukkan informasi.
Untuk elemen <input> yang nilainya tidak dapat diedit oleh pengguna, Anda harus selalu menyertakan nilai, termasuk untuk elemen
input dengan jenis hidden, radio, checkbox, submit, button, dan reset.
Penggunaan name unik untuk kontrol formulir akan menyederhanakan pemrosesan data sisi server dan direkomendasikan, dengan kotak centang dan tombol pilihan menjadi pengecualian untuk aturan ini.
Tombol pilihan
Jika Anda pernah melihat bahwa saat Anda memilih sebuah tombol pilihan dalam sekelompok tombol pilihan, hanya satu tombol pilihan yang dapat dipilih pada satu waktu, hal ini karena atribut name. Efek yang hanya dapat dipilih satu ini dibuat dengan memberikan name yang sama untuk setiap tombol pilihan
dalam grup.
name harus unik bagi grup tersebut: jika Anda tidak sengaja menggunakan name yang sama untuk dua grup yang terpisah, memilih tombol pilihan
di grup kedua akan membatalkan pilihan apa pun yang dibuat di grup pertama dengan name yang sama.
name beserta value 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 memiliki name unik untuk 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,
meskipun pengguna memilih radio yang berbeda. Tombol pilihan yang saat ini dipilih cocok dengan class semu
:checked.
Jika pengguna diharuskan memilih kontrol radio dari sekelompok tombol pilihan, tambahkan atribut required ke setidaknya salah satu
kontrol tersebut. Menyertakan required pada tombol pilihan dalam grup akan membuat pilihan diperlukan untuk pengiriman formulir, tetapi tidak harus berupa radio dengan atribut yang dipilih menjadi valid. Selain itu, tunjukkan dengan jelas di <legend>
bahwa kontrol formulir diperlukan. Pelabelan grup tombol pilihan beserta setiap tombol akan dijelaskan
nanti.
Kotak centang
Ini berlaku untuk semua kotak centang dalam grup untuk memiliki name yang sama. Hanya kotak centang yang dipilih yang mengirimkan name dan value
beserta formulir. Jika Anda memilih beberapa kotak centang dengan nama yang sama, nama yang sama akan dikirimkan dengan
(semoga) nilai yang berbeda. Jika Anda memiliki beberapa kontrol formulir dengan nama yang sama, meskipun tidak semuanya pada kotak centang, semua kontrol akan dikirimkan, dipisahkan dengan ampersand.
Jika Anda tidak menyertakan value pada kotak centang, nilai 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
Agar kotak centang diperlukan, tambahkan atribut required. Selalu beri tahu pengguna jika kotak centang harus dicentang, atau jika
kontrol formulir diperlukan. Menambahkan required ke kotak centang hanya akan mewajibkan kotak centang tersebut; hal ini tidak memengaruhi kotak centang
lain dengan nama yang sama.
Label dan fieldset
Agar pengguna dapat mengetahui cara mengisi formulir, formulir tersebut harus dapat diakses. Setiap kontrol formulir harus memiliki label.
Anda juga ingin memberi label pada grup kontrol formulir. Meskipun setiap area input, area tertentu, dan teks diberi label <label>,
grup kontrol formulir diberi label berdasarkan konten <legend>
<fieldset> yang mengelompokkannya.
Pada contoh sebelumnya, Anda mungkin telah melihat bahwa setiap kontrol formulir kecuali tombol kirim memiliki <label>. Label
menyediakan kontrol formulir dengan label aksesibilitas. Tombol mendapatkan nama yang dapat diakses dari konten atau nilainya. Semua kontrol
formulir lainnya memerlukan <label> terkait. Jika tidak ada label terkait, browser tetap akan merender kontrol formulir, tetapi pengguna tidak akan mengetahui informasi yang diharapkan.
Untuk mengaitkan kontrol formulir dengan <label> secara eksplisit, sertakan atribut for di <label>: nilai yang berupa
id dari kontrol formulir yang dikaitkan 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 memberikan kontrol dengan nama yang dapat diakses. Label juga merupakan "area hit"; label membuat situs lebih berguna bagi pengguna yang memiliki masalah ketangkasan dengan meningkatkan areanya. Jika menggunakan mouse, coba klik di mana saja pada label "Nama Anda". Tindakan ini akan memberikan fokus input.
Untuk memberikan label implisit, sertakan kontrol formulir antara tag <label> pembuka dan penutup. Ini sama-sama
dapat diakses dari perspektif pembaca layar dan perangkat pointer, tetapi tidak menyediakan hook penataan gaya seperti label
eksplisit.
<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 link di label, sementara browser akan merender HTML, pengguna akan bingung jika mereka mengklik label untuk memasuki kontrol formulir, tetapi dialihkan ke halaman baru.
Umumnya, <label> ditempatkan sebelum kontrol formulir kecuali pada tombol pilihan dan kotak centang. Hal ini tidak wajib.
Itu hanya pola UX yang umum. Seri Belajar 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 memerlukan label. Untuk memberi label pada grup, kelompokkan semua elemen ke dalam
<fieldset>, dengan <legend> memberikan label untuk grup tersebut.
<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, <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 merupakan survei dari banyak pertanyaan
yang dibagi menjadi beberapa grup pertanyaan terkait, <fieldset> “siswa favorit" dapat ditempatkan di <fieldset> lain yang diberi label
"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 -->
Tampilan default elemen ini menyebabkan kurang digunakannya elemen tersebut, tetapi <legend> dan <fieldset> dapat disesuaikan dengan CSS.
Selain semua atribut global, <fieldset> juga mendukung atribut name, disabled, dan form.
Saat Anda menonaktifkan fieldset, semua kontrol formulir bertingkat dinonaktifkan. Baik atribut name maupun form tidak
banyak digunakan pada <fieldset>. name dapat digunakan untuk mengakses fieldset dengan JavaScript, tetapi fieldset itu sendiri tidak disertakan dalam data yang dikirim (kontrol formulir bernama yang disusun bertingkat di dalamnya disertakan).
Jenis input dan keyboard dinamis
Seperti disebutkan sebelumnya, ada 22 jenis input yang berbeda.
Dalam beberapa kasus, saat pengguna menggunakan perangkat dengan keyboard dinamis yang hanya ditampilkan saat diperlukan, seperti ponsel, jenis input
yang digunakan akan menentukan jenis keyboard yang ditampilkan. Keyboard default yang ditampilkan dapat dioptimalkan untuk jenis input yang diperlukan.
Misalnya, jenis 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 masih 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, yang ditentukan dan dibatasi
oleh atribut accept. Daftar jenis file yang dapat diterima dapat berupa daftar ekstensi file yang dipisahkan koma, jenis global,
atau kombinasi ekstensi dan jenis global. Misalnya, accept="video/*, .gif" menerima file video atau GIF animasi.
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 file media
baru akan dibuat menggunakan kamera atau mikrofon pengguna. Anda dapat menetapkan nilai ke user untuk perangkat input yang dilihat pengguna,
atau environment untuk kamera belakang atau mikrofon ponsel. Umumnya, penggunaan capture, tanpa nilai, 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 yang berisi nilai yang tidak valid.
Ada beberapa pemilih CSS yang mencocokkan kontrol formulir berdasarkan keberadaan atribut HTML, termasuk :required
dan :optional jika boolean required
ditetapkan atau tidak; :default jika checked
di-hard-code; dan :enabled atau :disabled,
bergantung pada apakah elemen tersebut ada atau tidak.
}disabled Pseudoclass :read-write mencocokkan elemen dengan
kontrol yang ditetapkan contenteditable dan
formulir yang dapat diedit secara default, seperti jenis input number, password, dan text (tetapi bukan kotak centang,
tombol pilihan, atau jenis hidden, di antara lainnya). Jika elemen yang biasanya dapat ditulis memiliki kumpulan atribut readonly, elemen tersebut 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, pseudo-class :user-invalid atau
:user-valid yang belum didukung sepenuhnya 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 agar tidak dapat mengklik tombol kirim hingga formulir menjadi valid:
form:invalid [type="submit"] {
opacity: 50%;
pointer-events: none;
}
Cuplikan CSS ini merupakan antipola. Meskipun UI Anda mungkin terasa intuitif dan jelas, banyak pengguna yang mencoba mengirimkan formulir untuk mengaktifkan pesan error. Membuat tombol kirim tampak dinonaktifkan dengan cara ini tidak memungkinkan validasi batasan, sebuah fitur yang diandalkan banyak pengguna.
CSS yang diterapkan diperbarui secara terus-menerus berdasarkan status UI saat ini. Misalnya, saat Anda menyertakan jenis input dengan batasan, seperti email, number, url, dan jenis tanggal, jika nilainya bukan null (tidak kosong) dan nilai saat ini bukan email, angka, URL, tanggal, atau waktu yang valid, class semu CSS :invalid akan cocok. Pembaruan
konstan ini berbeda dengan validasi batasan HTML bawaan, yang hanya terjadi saat pengguna mencoba mengirimkan formulir.
Validasi batasan bawaan hanya relevan untuk batasan yang ditetapkan dengan atribut HTML. Meskipun Anda dapat menata gaya elemen berdasarkan
pseudoclass :required dan :valid/:invalid, browser menyediakan pesan error yang berasal dari error berdasarkan
atribut required, pattern, min, max, dan bahkan type, datang saat pengiriman formulir.
Saat kami mencoba mengirimkan formulir tanpa memilih siswa favorit yang diperlukan, validasi batasan akan mencegah pengiriman formulir
karena error validityState.valueMissing.
Jika salah satu properti validityState menampilkan true, pengiriman akan diblokir, dan browser akan menampilkan pesan error
dalam kontrol formulir pertama yang salah, sehingga akan memberinya 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, jika nilai numerik berada di luar rentang, atau jika nilai tidak sesuai dengan jenis yang diwajibkan oleh atribut type, formulir tidak akan divalidasi, tidak akan dikirimkan, dan pesan error akan muncul.
Jika nilai number, tanggal, atau waktu di bawah min minimum yang ditetapkan atau di atas setelan max maksimum, kontrol akan menjadi :out-of-range (dan :invalid), dan
pengguna akan diberi tahu tentang error valididityState.rangeUnderflow,
validityState.rangeOverflow saat mereka
mencoba mengirimkan formulir. Jika nilai di luar langkah dengan
nilai step, baik ditetapkan secara eksplisit atau ditetapkan secara default ke 1, kontrolnya akan menjadi :out-of-range (dan :invalid) dan akan ada error
validityState.stepMismatch. Error tersebut muncul sebagai balon dan secara default memberikan informasi bermanfaat tentang cara memperbaiki kesalahan tersebut.
Ada atribut serupa untuk panjang nilai: atribut minlength
dan maxlength akan memberi tahu pengguna tentang error
dengan validityState.tooLong atau
validityState.tooShort pada pengiriman.
maxlength juga mencegah pengguna memasukkan terlalu banyak karakter.
Menggunakan atribut maxlength dapat menyebabkan pengalaman pengguna yang buruk. Secara umum, akan lebih baik jika pengguna
dapat memasukkan lebih dari panjang karakter yang diizinkan dengan menyediakan penghitung, opsional dalam bentuk elemen
<output> yang tidak dikirimkan bersama formulir,
sehingga mereka dapat mengedit teks sampai output menunjukkan panjang maksimum yang diizinkan belum terlampaui. maxlength
dapat disertakan dalam HTML Anda. Seperti semua yang telah kita bahas, kode ini berfungsi 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 sebenarnya tidak. Misalnya, jenis input tel menyediakan keypad telepon
numerik di 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 harus cocok dengan nilai agar dianggap valid.
Jika nilai adalah string kosong, dan nilai tidak diperlukan, nilai tersebut tidak akan menyebabkan error
validityState.patternMismatch. Jika wajib dan kosong, pesan error default untuk validityState.valueMissing akan ditampilkan kepada pengguna, bukan
patternMismatch.
Untuk email, validityState.typeMismatch mungkin terlalu
maaf untuk kebutuhan Anda. Anda mungkin ingin menyertakan atribut pattern
sehingga alamat email intranet tanpa TLD tidak diterima sebagai valid.
Atribut pola memungkinkan pemberian ekspresi reguler yang harus cocok dengan nilai. Saat mewajibkan pencocokan pola, pastikan pengguna memahami dengan jelas apa yang diharapkan.
Semua ini dapat dilakukan tanpa satu baris JavaScript pun. Namun, dengan menjadi HTML API, Anda dapat menggunakan JavaScript untuk menyertakan pesan kustom selama validasi batasan. Anda juga dapat menggunakan JavaScript untuk memperbarui jumlah 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 petunjuk yang jelas.
Tombol kirim pertama akan menutup dialog. Gunakan formmethod="dialog" untuk mengganti metode default formulir, dan tutup <dialog> tanpa mengirim data atau menghapusnya. Anda juga harus menyertakan formnovalidate. Jika tidak, browser akan
mencoba memvalidasi pemeriksaan apakah semua kolom wajib diisi memiliki nilai. Pengguna mungkin ingin menutup dialog dan formulir tanpa
memasukkan data apa pun; validasi akan mencegah hal ini. Sertakan aria-label="close" karena "X" adalah tanda visual yang diketahui, tetapi
bukan label deskriptif.
Semua kontrol formulir memiliki label implisit, jadi Anda tidak perlu menyertakan atribut id atau for. Elemen input keduanya
memiliki atribut yang diperlukan sehingga keduanya diperlukan. Input angka memiliki step yang secara eksplisit disetel untuk menunjukkan cara step
disertakan. Karena step ditetapkan secara default ke 1, atribut ini dapat dihilangkan.
<select> memiliki nilai default yang membuat atribut required tidak diperlukan. Alih-alih menyertakan atribut value
pada setiap opsi, nilai ini akan ditetapkan secara default ke teks bagian dalam.
Tombol kirim di bagian akhir menyetel metode formulir ke POST. Saat diklik, validitas setiap nilai akan diperiksa. Jika semua
nilai valid, data formulir akan dikirimkan, dialog akan ditutup, dan halaman dapat dialihkan ke thankyou.php,
yang merupakan URL tindakan. Jika ada nilai yang tidak ada, atau jika nilai numerik memiliki ketidakcocokan langkah atau di luar rentang, pesan error yang ditentukan browser yang relevan akan muncul, formulir tidak akan dikirimkan, dan dialog tidak akan ditutup.
Pesan error default dapat disesuaikan dengan metode
validityState.setCustomValidity('message here'). Perhatikan bahwa jika Anda menetapkan pesan kustom, pesan harus secara eksplisit ditetapkan ke string kosong jika semuanya valid atau formulir tidak akan dikirimkan.
Pertimbangan lainnya
Tersedia satu bagian khusus untuk membantu pengguna Anda memasukkan data yang benar dalam formulir. Untuk memberikan pengalaman pengguna yang baik, mencegah pengguna melakukan kesalahan dengan menyertakan petunjuk dan memberikan petunjuk sesuai kebutuhan. Meskipun bagian ini membahas bagaimana HTML saja dapat memberikan validasi sisi klien, validasi harus dilakukan di sisi klien dan sisi server. Validasi dapat diberikan dengan cara yang tidak mengganggu selama pengisian formulir, seperti menambahkan tanda centang saat nilai sudah benar. Namun, jangan memberikan pesan error sebelum kontrol formulir selesai. Jika pengguna melakukan kesalahan, beri tahu pengguna di mana kesalahannya dan apa yang salah.
Dalam mendesain formulir, penting untuk mempertimbangkan bahwa tidak semua orang seperti Anda. Seseorang mungkin memiliki satu huruf sebagai nama belakang (atau tidak memiliki nama belakang sama sekali), tidak memiliki kode pos, memiliki alamat tiga baris, atau tidak memiliki alamat jalan. Mereka mungkin melihat versi terjemahan formulir Anda.
Kontrol formulir, labelnya, serta pesan error harus terlihat di layar, akurat dan bermakna, dapat ditentukan secara terprogram, dan secara terprogram dikaitkan dengan elemen formulir atau grup yang sesuai. Atribut autocomplete
dapat dan akan digunakan untuk memungkinkan pelengkapan formulir lebih cepat dan meningkatkan aksesibilitas.
HTML menyediakan semua alat agar kontrol formulir dasar dapat diakses. Semakin interaktif elemen atau proses formulir, semakin banyak perhatian yang perlu diberikan pada aksesibilitas sehubungan dengan pengelolaan fokus, penetapan dan pembaruan nama, peran, dan nilai ARIA, jika diperlukan, serta pengumuman langsung ARIA sesuai kebutuhan. Tapi, seperti yang telah kita pelajari di sini, dengan HTML saja, Anda bisa mendapatkan lebih jauh lagi untuk mencapai tujuan aksesibilitas dan validitas tanpa harus menggunakan ARIA atau JavaScript.
Menguji pemahaman Anda
Uji pengetahuan Anda tentang formulir.
Bagaimana cara membuat tombol pilihan menjadi bagian dari grup yang sama?
name yang sama.id yang sama.Elemen HTML manakah yang digunakan untuk memberi tahu pengguna tentang kegunaan kolom formulir ini?
<h1><title><label>