Form
Uraian:
Bab ini memberikan pengetahuan kepada siswa tentang cara membuat
formulir dengan perintah HTML
Sasaran:
Siswa mampu memahami dan mempraktikkan coding HTML berupa
<form>
Form ini biasa dipakai untuk mengumpulkan data dari pengunjung website.
Biasanya, dalam sebuah website terdapat satu atau lebih form, seperti form
pencarian, registrasi dan lain sebagainya. Sebuah form, bisa jadi mempunyai
beragam kontrol, seperti text input, Button, Combo box dan lainnya.
Sebuah form diawali dengan tag <form> Top of Form, dan setiap kontrol-kontrol
yang dibutuhkan ditempatkan di dalam tag ini.
FORM atau sering disebut sebagai FORMULIR sering kita jumpai seperti formulir
pendaftaran siswa baru, formulir pembuatan KTP dan lain sebagainya.
36
Control-control Form
Setiap control pada form bisa dibuat dengan mamakai tag <input>. Dan yang
membedakan tipe dari control tersebut berada pada atribut type (tipe kontrol).
Berikut ini adalah sebagian tipe kontrol yang biasa ditemui :
8.1 Label
Label dipakai untuk menambahkan keterangan pada setiap input data. Jika kita
amati formulir pendaftaran situs yahoo misalnya, yang disebut dengan label
merupakan bagian yang ditandai seperti berikut ini:
37
<label for=”Name”> Keterangan Input </label>
Atribut for diisi dengan isi dari atribut name pada kontrol yang ingin diberi label.
8.2 Text
Text merupakan control input ini bisa diisi dengan teks yang mempunyai kata
yang pendek hanya satu baris.
Apabila text input yang akan ditampilkan ingin mempunyai nilai, maka kita perlu
tuliskan nilai tersebut di dalam atribut value.
Dengan begitu, ketika halaman dibuka, text input ini secara otomatis akan terisi
dengan nilai dari atribut value.
38
8.3 Text Area
Fungsinya seperti Input Text, Tetapi Textarea bisa diisi lebih dari satu baris, bisa
dipakai untuk isian yang panjang, seperti alamat, deskripsi, atau biodata.
Berbeda dengan kontrol lainnya yang menggunakan tag <input>, text area
memiliki tag sendiri yaitu <textarea>. Dan apa yang terdapat di dalam tag ini
adalah value dari kontrol tersebut.
8.4 Combo Box
Combo Box merupakan kontrol ketika diklik memiliki beberapa pilihan. Formatnya
sama seperti pembuatan Daftar/List namun dengan tag yang berbeda.
39
8.5 Submit/Button
Submit atau Button merupakan tombol yang bisa di klik. Pemakaian atribut value
pada kontrol ini bisa merubah text yang ada di dalamnya.
<input type=”submit” value=”kirimkan data” />
40
Mari kita coba memanipulasi kontrol-kontrol yang telah kita pelajari sebelumnya
menjadi satu form utuh. Bukalah file baru, simpan dengan nama file [Link],
lalu ketikkan coding HTML berikut pada file [Link]
Apabila coding diatas dijalankan padad browser, hasilnya seperti berikut:
41