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 tampilannya 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 Anda. 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.

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 memberi nama 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 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 virtual yang berbeda, menggunakan aturan validasi yang berbeda, dan lainnya. 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 menyetel atribut checked, untuk menampilkannya sebagai dicentang.

Ada berbagai jenis lainnya yang dapat Anda pilih. Kita akan membahasnya secara mendetail di modul selanjutnya.

Mengizinkan beberapa baris teks

Misalnya, Anda memerlukan kolom tempat pengguna dapat menulis komentar. Untuk itu, bukankah 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 memberi pengguna daftar opsi yang dapat dipilih? 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, Anda menambahkan 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 oleh 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 akan 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, apa kegunaannya?

Jika jawaban Anda adalah "untuk mendeskripsikan 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 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 tombol Enter saat kolom formulir difokuskan.

Periksa 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 multi-baris?

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.

Resource