KEGUNAAN MASING - MASING TAG FORM
1. Tag <form>
Dalam tag <form> ini dibutuhkan beberapa atribut untuk memproses data yang akan dikirim, dan biasanya nilai yang dikirim berupa alamat dari sebuah halaman untuk memproses penginputan data. Yang Kedua Atribut method, method ini menjelaskan bagaimana data yang akan dikirim dapat muncul / masuk di alamat web browser yang tadi dicantumkan, nah nilai dari method ini biasanya memakai perintah GET atau POST.
2. Tag <input>
Tag input merupakan tag yang akan digunakan dalam form pengisian. Tag input ini memiliki banyak variasi, bentuk yang bisa digunakan dan mempunyai fungsi yang berbeda, beberapa fungsi dari tag input misalnya isian teks, password, checkbox, radio button, sampai dengan tombol submit berada dalam tag <input>.
Berikut beberapa bentuk dalam tag <input> yang di kategorikan berdasarkan atribut serta Macam - Macam Input dan Fungsinya :
<input type="text">
Form ini berfungsi untuk menerima inputan berupa text, misalnya : username, nama, tempat_lahir, jg dapat berupa inputan text yang pendek.
<input type="password">
Form ini berfungsi untuk menerima inputan password. Setiap text yang di inputkan / diketikkan di textbox type password ini, text tersebut akan disamarkan sebagai tanda bulatan / titik besar.
<input type="submit">
Submit ini berupa suatu tombol yang berguna untuk menginputkan sekaligus memproses suatu data inputan dari form.
<input type="checkbox">
Checkbox ini merupakan suatu ceklis yang dapat digunakan oleh user untuk kebutuhan tertentu, Inputan ini juga memungkinkan user untuk men-checklist banyak pilihan sekaligus.
<input type="radio">
Inputan ini merupakan radio grup, dimana user hanya dapat memilih salah satu dari beberapa pilihan yang telah disediakan dengan menggunakan form radio. Contohnya adalah form Jenis_Kelamin.
3. Tag <textarea>
Tag <textarea> adalah tag yang hampir sama fungsinya dengan inputan text, hanya saja pada textarea ini kita dapat mengisikan lebih banyak text didalamnya. Contohnya untuk pengisian alamat lengkap.
Berikut contoh penulisan tag textarea :
<textarea></textarea>
4. Tag <select>
Tag <select> merupakan tag yang digunakan user untuk memilih suatu data yang telah disediakan. Dalam penggunaan tag <select> selalu di sertai oleh tag <option> yang digunakan untuk membuat pilihan.
<select>
<option>Madiun</option>
<option>Caruban</option>
</select>
Agar lebih memberikan pemahaman yang lebih tentang cara membuat form pada HTML, silahkan dipahami yak... gambar dibawah ini :
<!DOCTYPE html>
<html>
<head>
<title>Belajar Membuat Form pada HTML</title>
</head>
<body>
<form>
nama : <input type="text" name="nama"><br/>
asal sekolah : <input type="text" name="asal sekolah"><br/>
password : <input type="password" name="password"><br/>
Jenis Kelamin :
<input type="radio" name="jk" value="laki-laki"/> Laki - laki
<input type="radio" name="jk" value="perempuan"/> Perempuan
<br/>
Bahasa Pemrograman yang dikuasai :
<input type="checkbox" name="web"> Web
<input type="checkbox" name="mobile"> Mobile
<input type="checkbox" name="desk"> Desktop
<br/>
Kota Asal :
<select>
<option>Madiun</option>
<option>Caruban</option>
</select>
<br/>
Pesan Anda :
<textarea></textarea>
<br/>
<input type="submit" value="proses">
</form>
</body>
</html>
Gambar ScreenShoot scriptnya :
 |
| Gambar 1.1 Membuat Form pada HTML |
Dan ini hasil dari shortcode yang diatas ketika dijalankan ke web browser :
 |
| Gambar 1.2 Membuat Form pada HTML |
Dari sekian dan beberapa fungsi dari macam" From yang telah Author bahas tadi, terbagi menjadi 2 yaitu Tag Form dan Tag Input, untuk Tag <form> sendiri di gunakan untuk mengirim proses data yang akan dikirim, nah sedangkan Tag <input> gunanya untuk form pengisian jd tag <input> ini merupakan wadah dari sebuah data yang akan dikirim. Dari penjelasan diatas mungkin teman" udah pada bisa semua kan ?, nah kalau gagal atau ada script yang eror jangan malah ditinggal tidur tpi diperbaiki dulu :v, erornya bagian mana dan kalau bisa di tanyakan di grup facebook, atau yang lainnya (juga boleh tanya di komentar kok). Sekian apa yang dapat Author sharing, Semoga Bermanfaat.
REFERENSI
1. MalasNgoding
Wassalamu'alaikum Wr.Wb
No comments:
Post a Comment