Kali ini kita akan belajar Cara Membuat Form pada HTML, langsung saja disimak dibawah ini,
Dalam sebuah website biasanya terdapat satu atau lebih form, seperti form pencarian, registrasi dan lain sebagainya. Form ini biasa digunakan untuk mengumpulkan data dari pengunjung website.
Sebuah form, boleh jadi memiliki beragam kontrol, mulai dari text input, Combo box, Button dan lain sebagainya. Kita akan mempelajari sebagian kontrol yang disebutkan diatas karena kontrol di atas adalah yang paling sering digunakan dalam halaman web.
Pertama-tama, pembuatan sebuah form diawali dengan tag <form>, dan setiap kontrol-kontrol yang dibutuhkan ditempatkan di dalam tag ini.
Catatan : Jika anda merasa asing dengan istilah FORM, bayangkan saja sebuah FORMULIR yang sering ditemui di sekitar kita seperti formulir pendaftaran siswa baru, formulir pembuatan KTP dan lain sebagainya.
Control-control Form
Setiap control pada form dapat dibuat dengan menggunakan tag <input>. Dan yang membedakan tipe dari control tersebut berada pada atribut type (tipe control). Berikut ini adalah sebagian tipe kontrol yang biasa ditemui :
Label
Label digunakan untuk memberikan keterangan pada setiap input yang ada. Jika anda perhatikan formulir pendaftaran situs Google (Gmail), yang disebut dengan label adalah yang ditandai berikut ini :
<label for="Name" > Keterangan Input </label>
Atribut for diisi dari atribut name pada kontrol yang ingin diberi label.
Text
Control input ini dapat diisi dengan text yang memiliki kata yang tidak terlalu panjang/hanya satu baris, biasa digunakan dalam form pencarian, nama dan lain sebagainya.
<label for="nama">Nama Lengkap</label>
<input type="text" name="nama" />
Jika text input yang akan ditampilkan ingin memiliki nilai, maka tuliskan nilai tersebut di dalam atribut value.
<input type="text" name="nama" value="Hendry Muda Rangkuti" />
Dengan begitu, ketika halaman dibuka, text input secara otomatis akan terisi dengan nilai dari atribut value.
Text Area
Sama halnya dengan Input Text, namun text area dapat diisi dari satu baris, cocok digunakan untuk isian yang panjang, seperti alamat, deskripsi, atau biodata.
Berbeda dengan kontrol lainnya yang menggunakan tag <input>, text area memiliki tag sendiri yaitu <textarea></textarea>. Dan apa yang terdapat di dalam tag ini adalah value dari kontrol tersebut
<label for="alamat">Alamat Lengkap</label>
<textarea name="alamat"></textarea>
Combo Box
Combo Box adalah kontrol yang memiliki pilihan ketika diklik. Pembuatannya sama seperti pembuatan Dafatr/List namun dengan tag yang berbeda.
<label for="kota">Kota</label>
<select name="kota">
<option>Jakarta</option>
<option>Medan</option>
<option>Padang</option>
</select>
Submit/Button
Submit atau Button, berupa tombol yang dapat di klik. Pengguna atribut value pada kontrol ini akan merubah text yang ada di dalamnya.
<input type="submit" value="Kirimkan Data" />
Sebagai latihan, kita coba menggabungkan kontrol-kontrol yang telah anda pelajari sebelumnya menjadi satu form utuh.
Buatlah file baru, dengan nama file latihan6.html, lalu ketikkan kode HTML berikut pada file latihan6.html
Berikut ini adalah tampilan yang anda dapatkan jika file latihan6.html dibuka di dalam browser.
Dalam postingan ini, saya tidak akan membahas bagaimana cara memroses data yang dikumpulkan dari form tersebut, karena dalam HTML kita tidak bisa melakukan proses pengolahan data. Ingat bahwa HTML hanya digunakan unutk memformat dokumen, bukan untuk memroses data.
Untuk memroses data, kita bisa menggunakan bahasa pemograman web, seperti Javascript atau PHP atau bahasa pemograman web lainnya.
Dengan bahasa pemograman seperti Javascript atau PHP anda dapat mengolah data-data yang dikumpulkan dari form HTML untuk diproses dan dikeluarkan kembali menjadi suatu informasi baru.
Nah, demikian dulu postngan & pembelajaran kita kali ini, di postingan selanjutnya kita akan belajar Mengenai Tabel pada HTML.
0 komentar
Posting Komentar