Web tidak hanya untuk menampilkan informasi, tetapi juga mengambil informasi dengan cara mengisi form. Seperti di dunia nyata kalau kita ingin mendaftar sesuatu mesti pakai formulir untuk pendaftaran. Pada web juga terdapat fasilitas untuk membuat form. Pada tutorial kali ini kita akan belajar bagaimana Cara Membuat Form pada HTML.
Cara Membuat Form pada HTML
Pada HTML kita membuat tag di awali dengan tag
Pada form tersebut data yang sudah kita isi akan dikirimkan ke proses.php melalui metode POST. Jika hanya sekedar membuat form pada HTML tidak menghasilkan apa-apa atau tidak dapat menyimpan suatu informasi, karena HTML merupakan Website yang statis. Untuk dapat menyimpan suatu informasi anda dapat belajar salah satu opsi pemrograman web yaitu PHP.
Mengenal tag
Tag input merupakan tag paling sering digunakan di dalam form dan memiliki banyak bentuk, mulai dari isian teks biasa, password, email, checkbox, radio sampai dengan tombol submit, semuanya dalam bentuk tag .
Contoh tag input :
<input type="text" name="info">- Type merupakan tipe dari field. attribut dan element type="text" menggambarkan bahwa form tersebut dapat diisi dengan karakter huruf atau angka
- name merupakan key atau kunci dan variabel dalam program, guna untuk mendapatkan informasi dari field tersebut.
Macam-macam bentuk tag input berdasarkan type :
adalah textbox inputan biasa yang menerima input berupa text.
adalah teks inputan berbentuk password namun teks yang diinput tidak akan terlihat, akan berupa bintang atau bulatan.
adalah teks inputan yang hanya email dapat diisi
adalah teks inputan yang hanya angka dapat diisi
adalah inputan berupa checkbox yang dapat diceklist atau di centang.
mirip dengan checkbox, namun hanya bisa memilih satu diantara pilihan group radio.
akan menampilkan tombol untuk memproses form. Biasanya diletakkan pada baris terakhir dari form. Atribut value jika diisi akan membuat text tombol submit berubah sesuai inputan nilai value.
Mengenal tag .
contoh kode :
Hasil :
Mengenal Attribut pada Form :
autofocus
Menentukkan bahwa area teks secara otomatis harus fokus (berada padanya) ketika halaman dimuat.
cols
Menunjukkan kolom. Menentukkan lebar dari textarea.
rows
Menunjukkan jumlah baris pada textarea. semakin besar jumlahnya maka tinggi element textarea akan bertambah.
Value : nomor
disabled
Menentukkan bahwa textarea atau form input nonaktif (tidak dapat diedit).
Value : disabled
maxlegth
Menentukkan maksimal jumlah karakter yang dapat diinput pada area teks tersebut.
Value : nomor
minlegth
Menentukkan minimum jumlah karakter yang dapat diinput pada area teks tersebut.
Value: nomor
name
Menentukkan nama untuk textarea atau form input.
Value : teks
placeholder
Menentukkan teks yang dijadikan bayangan sebagai kunci atau keterangan yang akan hilang dengan sendirinya ketika area teks diedit.
Value : teks
readonly
Menunjukkan bahwa textarea hanya dapat dibaca (tidak dapat dihapus atau diubah).
Value : readonly
required
Menunjukkan bahwa textarea wajib diisi, jika tidak diisi maka tindakan selanjutnya tidak akan diproses dan akan muncul pesan error.
Value : required
warp
Menentukkan bagaimana area teks dilipat (wrap) ketika dikirimkan pada sebuah form.
Value : hard atau soft
Contoh 1 Membuat Form Login :
Pada form login, terdapat beberapa field dan elemen:
- Field untuk input username atau email;
- Field untuk input password;
- Checkbox untuk remember me;
- Tombol untuk login.
kode :
<!DOCTYPE html>
<html>
<head>
<title>Form Login</title>
</head>
<body>
</body>
</html>
Hasil :
Keterangan :
- tag ini akan membuat sebuah garis.
- pada input username berisi type text
- pada input password berisi type password
- pada input remember me berisi type checkbox
- pada tombol login berisi type submit
Lalu, perhatikan juga atirbut yang digunakan pada setiap field.
- Atribut placeholder untuk menampilkan teks sementara,
- Atribut value untuk memberikan nilai default pada field.
Di dalam tag , kita membuat tag untuk memberikan teks pada fieldset.
Setiap field kita bungkus dalam tag agar terlihat rapi dan juga kita berikan sebuah label dengan tag .<br />
Untuk Tutorial Selanjutnya adalah : Tutorial HTML Part 13 : Cara Menampilkan Gambar pada HTML
