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. Form di HTML dan Control-Control Form Lengkap input box, Radio Button, Check Box, Text Area, List, Password, File dan Button
Pertama-tama, pembuatan sebuah form diawali dengan tag <form>, dan setiap kontrol-kontrol yang dibutuhkan ditempatkan di dalam tag ini. Tag <FORM> memiliki dua atribut yang penting, yaitu atribut METHOD untuk menentukan bagaimana form diberlakukan, dan atribut ACTION yang sering diisikan URL tepat pemrosesan form selanjutnya. Struktur dasar form dapat dituliskan sebagai berikut:
<!DOCTYPE html>
<html>
<head>
<title>struktur dasar Form</title>
</head>
<body>
<form action="url" method="post"> </form>
</body>
</html>
Input Box
Input box adalah inputan pada form yang memungkinkan user memasukkan string dalam satu baris. Untuk membuat input box, HTML menyediakn tag <INPUT> dan memanfaatkan atribut TYPE=”Text”. Atribut pada tag <INPUT> lainnya adalah NAME untuk menyatakan nama dari input tersebut, VALUE untuk menyatakan nilai dari suatu input, dan SIZE untuk menyatakan panjang sebuah input. Contoh berikut simpan dengan nama input_box.html.
<html>
<head>
<title>Form Text Box</title>
</head>
<body>
<form method="post" action="simpan.php">
Nama : <input name="nama" type="text" size="30">
</form>
</body>
</html>
Method merupakan komponen untuk melakukan aksi dari file yang dituju, dimisalkan method post berarti form akan mengirimkan sebuah data input. Sedangkan action merupakan aksi dari data input yang dikirimkan. Dengan kata lain file ini (input_box.html) akan diteruskan ke file simpan.php untuk diproses.
Hasil dari kode diatas adalah:
Radio Button
Bila atribut TYPE pada tag <INPUT> Anda ganti dengan “Radio” maka Anda sudah mendefenisikan sebuah radio button. Buat kode berikut, simpan dengan nama radio.html.
<html>
<head>
<title>Radio Button</title>
</head>
<body>
<form method="post" action="simpan.php">
Jenis Kelamin :
<input checked name="jk" type="radio" value="L">Laki-Laki
<input name="jk" type="radio" value="P">Perempuan
</form>
</body>
</html>
Perhatikan contoh HTML di atas. Anda akan menemukan bahwa pada input type radio button terdapat atribut CHECKED. Atribut ini menandakan bahwa radio button tersebut diaktifkan. Pada radio button Anda hanya bisa mengaktifkan satu pada satu saat.
Hasil kode diatas adalah:
Check Box
Berbeda dengan radio button yang hanya memungkinkan user memilih satu pilihan, pada input type checked box Anda dapat memilih satu atau beberapa pilihan, atau tidak memilih sama sekali. Pilihan ini biasanya dipakai untuk memasukkan data yang sifatnya opsional. Anda dapat menggunakan “Checkbox” pada atribut <INPUT>. Untuk lebih jelasnya tuliskan kode berikut dan simpan dengan nama check.html.
<html>
<head>
<title>Check Box</title>
</head>
<body>
<form method="post" action="simpan.php">
Hobi :
<input type="checkbox" name="hobi" value="Olah Raga">Olah Raga
<input type="checkbox" name="hobi" value="Membaca">Membaca
<input type="checkbox" name="hobi" value="Main Musik">Main Musik
</form>
</body>
</html>
Hasil kode diatas adalah:
Textarea
Text area biasanya digunakan untuk menginputkan karakter yang sangat panjang dan dapat mengikuti seperti halnya multiline, sebagai contoh digunakan untuk memasukkan alamat, keterangan, atau berita. Contoh berikut, simpan dengan nama textarea.html.
<html>
<head>
<title>Text Area</title>
</head>
<body>
<form method="post" action="simpan.php">
Alamat :
<textarea name="alamat" rows="3" cols="35"></textarea>
</form>
</body>
</html>
Hasil kode diatas adalah:
List
List atau terkadang disebut juga combo box digunakan untuk memilih pilihan yang telah disediakan, pilihan dapat dipilih hanya satu dari beberapa yang disediakan, penggunaan list biasanya digunakan untuk memilih tanggal lahir, agama, pekerjaan dan lain-lain. Contoh berikut sebagai pemahaman dan simpan dengan nama list.html.
<html>
<head>
<title>List Combo</title>
</head>
<body>
<form method="post" action="simpan.php">
Agama :
<select name="agama">
<option value="">Pilih Agama</option>
<option value="Islam">Islam</option>
<option value="Protestan">Protestan</option>
<option value="Hindu">Hindu</option>
<option value="Budha">Budha</option>
<option value="Katolik">Katolik</option>
</select>
</form>
</body>
</html>
hasil kode diatas adalah:
Password
Sebenarnya password berasal dari input box, akan tetapi pada TYPE text diganti dengan “password” untuk mendeklarasikan sebuah kode tersembunyi yang berupa * dan sebagainya. Perhatikan contoh berikut, tulis dan simpan dengan nama password.html.
<html>
<head>
<title>Karakter Password</title>
</head>
<body>
<form method="post" action="simpan.php">
Password :
<input type="password" name="password">
</form>
</body>
</html>
Hasil kode diatas sperti berikut:
File
Yang dimaksud dengan File adalah sebuah Inputan yang manghasilkan tampilan input box disertai tombol BROWSE. Pada dasarnya File sama saja dengan password yakni berasal dari input box, jika pada password Type diganti dengan “Password” sedangkan pada Type pada File diganti dengan “File”. Buatlah contoh berikut simpan dengan nama file.html.
<html>
<head>
<title>Type File</title>
</head>
<body>
<form method="post" action="simpan.php">
Cari Foto :
<input type="file" name="photo">
</form>
</body>
</html>
Hasil dari kode diatas seperti berikut:
Button
Hal terpenting dari form adalah Button, button merupakan fasilitas proses sistem data yang akan dijalankan, tanpa adanya button proses data tidak akan dapat dilakukan. Untuk lebih jelasnya, ketikkan kode berikut kemuadian simpan dengan nama button.html.
<html>
<head>
<title>Button</title>
</head>
<body>
<form method="post" action="simpan.php">
<input type="submit" name="simpan" value="Simpan">
<input type="submit" name="keluar" value="Keluar">
</form>
</body>
</html>
Hasil dari kode diatas seprti berikut:
Dalam tutorial 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 untuk memformat dokumen, bukan untuk memroses data.
Untuk memroses data, kita bisa menggunakan bahasa pemrograman web, seperti Javascript atau PHP atau bahasa pemrograman web lainnya. Dengan bahasa pemrograman seperti Javascript atau PHP anda dapat mengolah data-data yang dikumpulkan dari Form HTML untuk diproses dan dikeluarkan kembali menjadi suatu informasi baru.
Nah Bagaimana…? apakah sekarang kamu sudah mengerti apa itu Form dan control-control form di html? Mungkin itu saja tulisan yang membahas tentang Form dan control-control form di html, jika terdapat kekurangan ataupun kesalahan dalam penulisan mohon di maafkan dan perbaiki atau lengkapi saja jika terdapat kesalahan. Kalau memang tulisan ini bermanfaat tidak ada salahnya jika men-Sharenya kepada teman kamu yang lain, sekian dan terimakasih.
This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.
ConversionConversion EmoticonEmoticon