Membuat Form pada HTML
Untuk memulai materi kali ini, coba kita diskusikan di mana saja teman-teman dapat menemukan elemen form pada aplikasi web yang sering-sering teman gunakan. Jika teman-teman ingat lagi, pada saat kita mendaftar atau masuk menggunakan sebuah akun dalam sebuah aplikasi, kita akan menemukan form.
Input, Button dan Label
Contoh di atas menampilkan sebuah contoh penggunaan elemen form, walaupun hanya berisi satu buah field (Email atau ponsel) dan sebuah tombol "Selanjutnya". Namun tetap saja, itu merupakan sebuah form yang utuh.
Lalu bagaimana cara kita membuat sebuah form pada HTML?
<form>
<!-- Isi formulir di sini -->
</form>Sebuah form selalu diawali dengan penulisan tag <form> yang menjadi pembungkus beberapa elemen yang berhubungan dengan form tersebut di dalamnya. Tag ini juga berfungsi untuk menyimpan informasi yang selanjutnya akan kita pelajari lebih dalam ketika sudah masuk ke materi Javascript.
<form>
<label for="nama">Nama:</label>
<input type="text" id="nama" name="nama"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<button type="submit">Daftar</button>
</form>Pada potongan kode di atas, kita membuat sebuah form yang menampilkan input bertipe text untuk nama dan input bertipe email untuk menerima data email. Lalu kita tambahkan sebuah tombol dengan elemen <button>. Selain itu, kita juga menambahkan <label> pada setiap elemen input tersebut yang berfungsi sebagai tanda pada setiap field-nya. Kita dapat mengubah nilai properti input untuk menyesuaikan dengan kebutuhan.
<input type="button"><input type="checkbox"><input type="color"><input type="date"><input type="datetime-local"><input type="email"><input type="file"><input type="hidden"><input type="image"><input type="month"><input type="number"><input type="password"><input type="radio"><input type="range"><input type="reset"><input type="search"><input type="submit"><input type="tel"><input type="text">(default value)<input type="time"><input type="url"><input type="week">
Silahkan teman-teman coba beberapa tipe input di atas untuk melihat perubahannya. Bahkan, input bisa menjadi berupa sebuah button. Namun pada HTML versi terbaru, kita lebih disarankan menggunakan tag <button> agar lebih memudahkan dalam membaca kode HTML.
Elemen Select
<label for="kota">Pilih Kota:</label>
<select id="kota" name="kota">
<option value="jakarta">Jakarta</option>
<option value="bandung">Bandung</option>
<option value="surabaya">Surabaya</option>
</select>Elemen ini digunakan untuk membuat daftar dropdown dari pilihan yang tersedia. Pengguna bisa memilih salah satu pilihan saja. Pada contoh kode di atas, kita membuat sebuah elemen select yang di dalamnya terdapat 3 pilihan (jakarta, bandung dan surabaya). Setiap pilihan diwakili oleh tag <option> yang berisi value dan teks di dalamnya. Teks yang diapit oleh tag pembuka dan penutup merupakan teks yang akan ditampilkan pada browser. Sedangkan nilai yang ada pada properti value merupakan nilai yang dapat kita ambil dan kirim ke server (akan dibahas lebih lanjut pada materi Javascript).
Elemen Textarea
<textarea id="komentar" name="komentar" rows="4" cols="50"></textarea>Sekilas, tampilan dari <textarea> pada browser akan hampir sama dengan input bertipe text. Kita juga bisa memasukkan nilai apapun ke dalam textarea. Hanya saja, elemen ini dikhususkan untuk memasukkan nilai berupa paragraf panjang, misalnya deskripsi dan sebagainya.
Referensi
https://www.w3schools.com/tags/tag_input.asp https://www.w3schools.com/html/html_forms.asp https://www.w3schools.com/tags/tag_button.asp https://www.w3schools.com/tags/tag_select.asp https://www.w3schools.com/tags/tag_textarea.asp
Last updated