Membantu pengguna memasukkan data dalam formulir

Untuk membuat formulir interaktif, Anda perlu menambahkan elemen formulir. Ada kontrol untuk memasukkan dan memilih data, elemen yang mendeskripsikan kontrol, elemen yang mengelompokkan kolom, 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 keduanya terlihat berbeda?

Berdasarkan nama elemen dan atribut type, browser menampilkan antarmuka pengguna yang berbeda, menggunakan aturan validasi yang berbeda, dan menyediakan banyak fitur lainnya. Menggunakan kontrol formulir yang sesuai akan membantu Anda membuat formulir yang lebih baik.

Label untuk elemen formulir

Misalnya, Anda ingin menambahkan input tempat pengguna dapat memasukkan warna favorit mereka. Untuk melakukannya, Anda perlu menambahkan elemen <input> ke formulir. Namun, 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.

Mengambil 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 memberi nama kontrol formulir mountain dan pengguna memasukkan Gutenberg, permintaan akan menyertakan informasi ini sebagai mountain=Gutenberg.

Coba ubah nama kontrol formulir menjadi hill. Jika Anda melakukannya dengan benar, dan mengirimkan formulir, hill akan terlihat di URL.

Jenis input

Ada berbagai jenis kontrol formulir, semuanya dengan fitur bawaan yang berguna dan berfungsi di berbagai browser dan platform. Berdasarkan atribut type, browser merender antarmuka pengguna yang berbeda, menampilkan keyboard di layar yang berbeda, menggunakan aturan validasi yang berbeda, dan lainnya. Mari kita lihat cara mengubah jenisnya.

Dengan menggunakan type="checkbox", browser kini merender kotak centang, bukan kolom teks. Kotak centang juga dilengkapi dengan atribut tambahan. Anda dapat menetapkan atribut checked, untuk menampilkannya sebagai dicentang.

Ada berbagai jenis lain yang dapat Anda pilih. Kita akan membahasnya secara mendetail di modul berikutnya.

Mengizinkan beberapa baris teks

Misalnya, Anda memerlukan kolom tempat pengguna dapat menulis komentar. Untuk itu, bukankah akan lebih baik jika mereka dapat memasukkan beberapa baris teks? Inilah tujuan elemen <textarea>.

<label for="comment">Comment</label>
<textarea id="comment" name="comment"></textarea>

Memilih dari daftar opsi

Bagaimana cara 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 memberinya nama unik menggunakan atribut name.

Di antara tag awal dan akhir 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 atribut selected.
  • Pengguna memilih opsi lain.

Memilih opsi terlebih dahulu

Dengan atribut selected, Anda dapat memilih satu opsi sebelumnya. Ini menjadi default, terlepas dari urutan elemen <option> yang ditentukan.

Mengelompokkan kontrol formulir

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 mendeskripsikan grup kontrol formulir", Anda benar.

Setiap elemen <fieldset> memerlukan elemen <legend>, seperti halnya setiap kontrol formulir memerlukan elemen <label> terkait. <legend> juga harus menjadi elemen pertama di <fieldset>. Setelah elemen <legend>, Anda dapat menentukan kontrol formulir yang harus menjadi bagian dari grup.

Mengirim formulir

Setelah mempelajari cara menambahkan kontrol formulir, dan mengelompokkan kontrol tersebut, Anda mungkin bertanya-tanya bagaimana pengguna dapat mengirimkan formulir?

Opsi pertama adalah menggunakan elemen <button>.

<button>Submit</button>

Setelah pengguna mengklik tombol Kirim, browser akan membuat permintaan ke URL yang ditentukan dalam atribut tindakan elemen <form> dengan semua data dari kontrol formulir.

Anda juga dapat menggunakan elemen <input> dengan type="submit", bukan elemen <button>. Input terlihat dan berperilaku seperti <button>. Sebagai ganti elemen <label> untuk mendeskripsikan <input>, gunakan atribut value.

<input type="submit" value="Submit">

Selain itu, formulir juga dapat dikirimkan menggunakan tombol Enter saat kolom formulir memiliki fokus.

Memeriksa pemahaman Anda

Uji pengetahuan Anda tentang elemen formulir

Bagaimana cara menghubungkan <label> ke kontrol formulir?

for='color' di <label>, dan name='color' di <input>.
Coba lagi.
for='color' di <label>, dan id='color' di <input>.
Benar.
id='color' di <label>, dan for='color' di <input>.
Coba lagi.
name='color' di <label>, dan for='color di <input>.
Coba lagi.

Apa yang Anda gunakan untuk kontrol formulir multibaris?

Elemen <input> dengan type='multi-line'.
Coba lagi.
Elemen <text>.
Coba lagi.
Elemen <textarea>.
🎉
Elemen <input> dengan type='long'.
Coba lagi.

Bagaimana cara mengirimkan formulir?

Mengklik elemen <button>.
Benar, ini adalah salah satu opsi.
Menggunakan kunci Enter.
Benar, ini adalah salah satu opsi.
Mengklik elemen <input> dengan type='submit'.
Benar, ini adalah salah satu opsi.

Resource