Membantu pengguna memasukkan data dalam formulir

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 atribut selected.
  • 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 name='color' pada <input>.
Coba lagi.
for='color' pada <label>, dan id='color' pada <input>.
Benar.
id='color' pada <label>, dan for='color' pada <input>.
Coba lagi.
name='color' pada <label>, dan for='color pada <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 yang memungkinkan untuk mengirimkan formulir.

Resource