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 melihat dua elemen <input>, <input type="text"> dan <input type="file">. Mengapa mereka 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 tepat akan membantu Anda membuat formulir yang lebih baik.

Label untuk elemen formulir

Misalnya Anda ingin menambahkan input tempat pengguna dapat memasukkan warna favoritnya. Untuk melakukannya, Anda perlu menambahkan elemen <input> ke formulir. Tapi, bagaimana pengguna tahu bahwa mereka harus mengisi warna favorit mereka?

Untuk menjelaskan 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 tersebut menyertakan informasi ini sebagai mountain=Gutenberg.

Coba ubah nama kontrol formulir menjadi hill. Jika Anda melakukannya dengan benar lalu 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 jenis huruf.

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

Ada berbagai jenis lainnya yang dapat Anda pilih. Kita telah membahasnya secara terperinci di modul selanjutnya.

Izinkan beberapa baris teks

Misalnya, Anda memerlukan kolom tempat pengguna dapat menulis komentar. Untuk ini, bukankah lebih bagus jika mereka bisa 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 memberikan daftar opsi yang dapat dipilih pengguna? Anda dapat menggunakan elemen <select> untuk mencapainya.

<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 jika:

  • Satu elemen <option> memiliki atribut selected.
  • Pengguna memilih opsi lain.

Pilihkan opsi terlebih dahulu

Dengan atribut selected, Anda dapat memilih salah satu opsi terlebih dahulu. Ini menjadi default, terlepas dari urutan elemen <option> 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, manakah yang 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> 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 cara 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>. Daripada menggunakan elemen <label> untuk mendeskripsikan <input>, gunakan atribut value sebagai gantinya.

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

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

Menguji pemahaman Anda

Uji pengetahuan Anda tentang elemen bentuk

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 tombol Enter.
Benar, ini adalah salah satu opsi.
Mengklik elemen <input> dengan type='submit'.
Benar, ini adalah salah satu opsi.
Semua yang di atas.
Benar, semua jawaban adalah opsi untuk mengirimkan formulir.

Referensi