Belajar HTML Part 10 : Membuat Form Pada HTML
SCRIPT KIDDIES - Form merupakan proses pengutipan data sebelum diproses oleh sistem. Salah satunya adalah form login, form comment, form data dan form user, dan lain - lian. untuk proses pengutipan data dari form akan kita bahas pada materi PHP, MYSqL, dan Javascript. Tag yang digunakan untukmembuat form ini adalah <form> yang didalamnya dapat kita selipkan <input>, <textarea>, <option> dan <select>.
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 data inputan. Dan atribut yang kedua berupa method. method ini menjelaskan bagaimana data yang akan dikirim oleh web browser. Nilai method ini biasanya get atau post. Berikut contoh penulisan <form> pada HTML :
<form action="proses.php" method="post">
.....isikan dengan .....
</form>
2. TAG <INPUT>
Tag input merupakan tag yang akan digunakan dalam form pengisian. Tag input ini memiliki banyak sekali bentuk yang bisa digunakan misalkan isian teks,password,checkbox,radiobutton, sampai dengan tombol submit berada dalam tag <input>.
Berikut beberapa benuk dalam keluarga tag <input> yang dikategorikan beradasarkan berikut :
- <input type="text"> textbox yang bisa menerima inputan text misalkan username atau berupa inputan text yang pendek.
- <input type="password"> textbox yang menerima inputan text, akan tetapi text yang diinput akan ditampilkan sebagai tanda bintang atau titik, textbox ini biasanya digunakan untuk memebuat inputan password.
- <input type="submit"> inputan berupa tombol (button) untuk memproses data inputan dari form.
- <input type="checkbox"> inputan berupa checkbox yang dapat di ceklis oleh user.
- <input type="radio"> inputan yang berupa radio group, dimana user dapat memilih salah satu dari pilihan yang disediakan. Salah satu contoh penggunaan dari radio ini adalah jenis kelamin dan sebagainya.
Tag textarea Merupakan tag yang sama fungsinya dengan inputan text, perbedaanya adalah pada text area ini dapat diisikan lebih banyak teks didalamnya dibanding input teks. Untuk mengatur panjang dan banyak text area ini dapat menggunakan CSS.
Berikut contoh penulisan textarea:
<textarea>
Isikan pesan anda
</textarea>
TAG <SELECT>
Tag select merupakan tag yang digunakan user memilih data yang sudah disediakan. Dalam penggunaan <select> selalu diikuti oleh <option> yang digunakan untuk membuat pilihan.
Berikut contoh penulisan <select> pada HTML
<select>
<option>Semarang</option>
<option>Bandung</option>
</select>
ATRIBUT NAME
Atribur name merupakan atribut yang nilainya akan digunakan pada saat memproses data oleh web server. Berikut contoh penulisan yang menggunakan atribut name
nama : <input type="text" name="nama"><br/>
alamat : <input type="text" name="alamat"></br/>
password : <input type="password" name="pass"><br/>
Untuk lebih jelas tentang membuat form dengan HTML, perhatikan contoh berikut :
<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML Part 10 : Membuat Form Pada HTML</title>
</head>
<body>
<form>
<h3> Masukkan Data Anda </h3>
Nama : <input type="text" name="nama"><br>
Asal Sekolah : <input type="text" name="sekolah"><br>
Jenis Kelamin :
<input type="radio" name="Kelamin" value="Laki - Laki">Laki - Laki
<input type="radio" name="Kelamin" value="Perempuan">Perempuan<br>
Memilih Jurusan :
<input type="checkbox" name="RPL">RPL
<input type="checkbox" name="TPHP">TPHP
<input type="checkbox" name="TO">TO
<input type="checkbox" name="TKR">TKR
<input type="checkbox" name="TSM">TSM<br>
Kota Asal : <select>
<option>Madiun</option>
<option>Ponorogo</option>
<option>Ngawi</option>
<option>Jepara</option>
<option>Bojonegoro</option>
</select><br>
Alamat Lengkap : <br><textarea>Masukkan Alamat Anda..</textarea>
<h3>Registrasi Account</h3>
Username : <input type="text" name="username"><br>
Password : <input type="password" name="password"><br>
<input type="submit" name="submit">
</body>
</html>
Dari contoh diatas merupakan form yang sangat sederhana menggunakan HTML saja. Untuk mempercantik form yang sobat buat harus menggunakan CSS. Dari contoh diatas pula anda dapat melihat dan memahami masing - masing tag atau atribut yang sudah kita bahas, Untuk membuat form HTML dan CSS akan kita pelajari pada tutor selanjutnya, Sekian Terima Kasih
Kunjungi Juga : Tampan Squad
Referensi : Malas Ngoding
TUTORIAL HTML DASAR LAINYA
Belajar HTML : Mengenal Text Editor
Belajar HTML Part 1 : Mengenal HTML
Belajar HTML Part 2 : Mengenal Tag, Element, Atribut & Struktur Dasar HTML
Belajar HTML Part 3 : Mengenal Heading Pada HTML
Belajar HTML Part 4 : Format Text Pada HTML
Belajar HTML Part 5 : Membuat Paragraf Pada HTML
Belajar HTML Part 6 : Membuat Tabel Pada HTML
Belajar HTML Part 7 : Membuat Hyperlink Pada HTML
Belajar HTML Part 8 : Membuat List Pada HTML
Belajar HTML Part 9 : Membuat Format Code dan Pre Pada HTML
Belajar HTML Part 10 : Membuat Form Pada HTML
Belajar HTML Part 11 : Mengenal Atribut Form Pada HTML
Tidak ada komentar :
Posting Komentar