Untuk membuat formulir menjadi interaktif, Anda perlu menambahkan elemen formulir. Ada kontrol untuk memasukkan dan memilih data, elemen yang menjelaskan kontrol, elemen yang mengelompokkan {i>field<i}, dan tombol untuk mengirimkan formulir.
Apa yang dimaksud dengan elemen formulir?
Anda akan melihat dua elemen <input>
, <input type="text">
dan <input type="file">
. Mengapa terlihat berbeda?
Berdasarkan nama elemen dan atribut type, browser menunjukkan antarmuka pengguna yang berbeda, gunakan aturan validasi, dan menyediakan banyak fitur lainnya. Menggunakan kontrol formulir yang tepat akan membantu Anda membuat formulir yang lebih baik.
Label untuk elemen formulir
Misalnya Anda ingin menambahkan input yang memungkinkan pengguna memasukkan warna favoritnya.
Untuk melakukannya, Anda perlu menambahkan elemen <input>
ke formulir.
Tapi, bagaimana pengguna tahu bahwa mereka harus mengisi warna favorit mereka?
Untuk mendeskripsikan kontrol formulir, gunakan <label>
untuk setiap kontrol formulir.
<label for="color">What is your favorite color?</label>
<input type="text" id="color" name="color">
Atribut for
pada elemen label cocok dengan atribut id
pada input.
Merekam input pengguna
Seperti namanya, elemen <input>
digunakan untuk mengumpulkan input dari pengguna.
<label for="color">What is your favorite color</label>
<input type="text" id="color" name="color">
Seperti yang disebutkan sebelumnya, atribut id
menghubungkan <input>
ke <label>
.
Bagaimana dengan atribut nama dan jenis dalam contoh ini?
Atribut nama
Gunakan atribut name
untuk mengidentifikasi data yang dimasukkan pengguna dengan kontrol.
Jika Anda mengirimkan formulir, nama ini akan disertakan dalam permintaan.
Misalnya Anda menamai kontrol formulir mountain
dan pengguna memasukkan Gutenberg
,
permintaan menyertakan informasi ini sebagai mountain=Gutenberg
.
Coba ubah
nama kontrol formulir menjadi hill
.
Jika Anda melakukannya dengan benar dan mengirimkan formulir, hill
dapat dilihat di URL.
Jenis input
Ada berbagai
jenis kontrol formulir, semuanya
dengan fitur bawaan yang berguna
yang bekerja di berbagai {i>browser<i} dan platform. Berdasarkan type
, browser merender antarmuka pengguna yang berbeda, menunjukkan keyboard pada layar yang berbeda, menggunakan
aturan validasi yang berbeda, dan banyak lagi. Mari kita lihat cara mengubah jenis.
Dengan menggunakan type="checkbox"
, browser kini merender kotak centang, bukan kolom teks.
Kotak centang ini juga dilengkapi dengan atribut tambahan.
Anda dapat menyetel atribut checked
, untuk menampilkannya sebagai dicentang.
Ada berbagai jenis lain yang dapat Anda pilih. Kita telah membahasnya secara terperinci di modul selanjutnya.
Izinkan beberapa baris teks
Katakanlah, Anda memerlukan kolom tempat pengguna dapat menulis komentar.
Untuk ini, bukankah lebih bagus jika mereka bisa memasukkan beberapa baris teks?
Ini adalah tujuan dari elemen <textarea>
.
<label for="comment">Comment</label>
<textarea id="comment" name="comment"></textarea>
Memilih dari daftar opsi
Bagaimana Anda memberi pengguna daftar opsi yang dapat dipilih?
Anda dapat menggunakan elemen <select>
untuk melakukannya.
<label for="color">Color</label>
<select id="color" name="color">
<option value="orange">Orange</option>
<option value="pink">Pink</option>
</select>
Pertama, tambahkan elemen <select>
.
Seperti semua kontrol formulir lainnya, Anda menghubungkannya ke <label>
dengan atribut id
.
dan beri nama unik menggunakan atribut name
.
Di antara tag awal dan akhir dari elemen <select>
,
Anda dapat menambahkan beberapa elemen <option>
, yang masing-masing mewakili satu pilihan.
Setiap opsi memiliki atribut value
yang unik, sehingga Anda dapat membedakannya saat memproses data formulir.
Teks di dalam elemen opsi adalah nilai yang dapat dibaca manusia.
Jika Anda mengirimkan formulir menggunakan <select>
ini tanpa mengubah pilihan,
permintaan akan menyertakan color=orange
. Namun, bagaimana browser mengetahui opsi mana yang harus digunakan?
Browser menggunakan opsi pertama dalam daftar, kecuali:
- Satu elemen
<option>
memiliki atributselected
. - Pengguna memilih opsi lain.
Pilih opsi terlebih dahulu
Dengan atribut selected
, Anda dapat memilih satu opsi terlebih dahulu.
Ini menjadi default, terlepas dari urutan elemen <option>
ditentukan.
Kontrol formulir pengelompokan
Terkadang Anda perlu mengelompokkan kontrol formulir. Anda dapat menggunakan elemen <fieldset>
untuk melakukannya.
<fieldset>
<legend>What is your favorite web technology</legend>
<label for="html">HTML</label>
<input type="radio" name="webfeature" value="html" id="html">
<label for="css">CSS</label>
<input type="radio" name="webfeature" value="css" id="css">
</fieldset>
Apakah Anda melihat elemen <legend>
di dalam elemen <fieldset>
? Menurut Anda, untuk apa alat ini digunakan?
Jika jawaban Anda adalah "untuk menjelaskan grup kontrol formulir", Anda benar!
Setiap elemen <fieldset>
memerlukan elemen <legend>
,
sama seperti setiap kontrol formulir
memerlukan elemen <label>
yang terkait.
<legend>
juga harus menjadi elemen pertama dalam <fieldset>
.
Setelah elemen <legend>
, Anda dapat menentukan kontrol formulir yang harus menjadi bagian dari grup.
Mengirimkan formulir
Setelah mempelajari cara menambahkan kontrol formulir, dan mengelompokkannya, Anda mungkin bertanya-tanya bagaimana pengguna dapat mengirimkan formulir?
Opsi pertama adalah menggunakan elemen <button>
.
<button>Submit</button>
Setelah pengguna mengklik tombol Submit,
browser membuat permintaan ke URL yang ditentukan dalam atribut <form>
atribut tindakan
dengan semua data
dari kontrol formulir.
Anda juga dapat menggunakan elemen <input>
dengan type="submit"
, bukan elemen <button>
.
Input terlihat dan berperilaku seperti <button>
. Daripada menggunakan elemen <label>
untuk mendeskripsikan
<input>
, gunakan atribut value
sebagai gantinya.
<input type="submit" value="Submit">
Selain itu, formulir juga dapat dikirim dengan menggunakan tombol Enter
saat kolom formulir sedang difokuskan.
Menguji pemahaman Anda
Uji pengetahuan Anda tentang elemen formulir
Bagaimana cara menghubungkan <label>
ke kontrol formulir?
for='color'
pada <label>
, dan id='color'
pada <input>
.for='color'
pada <label>
, dan name='color'
pada <input>
.id='color'
pada <label>
, dan for='color'
pada <input>
.name='color'
pada <label>
, dan for='color
pada <input>
.Apa yang Anda gunakan untuk kontrol formulir multibaris?
<input>
dengan type='multi-line'
.<textarea>
.<text>
.<input>
dengan type='long'
.Bagaimana cara mengirimkan formulir?
<input>
dengan type='submit'
.<button>
.Enter
.