11 - Membuat Form Pada HTML
11 - Membuat Form Pada HTML
…Web juga digunakan untuk mengambil informasi atau data dari pengunjung.
Salah satu cara untuk mengambil informasi dari pengunjung ialah menggunakan form.
Pada tutorial ini, kita akan belajar cara membuat form di HTML.
Baiklah…
action untuk menentukan akasi yang akan dilakukan saat data dikirim;
method metode pengiriman data.
Contoh:
Secara sederhana,—pada contoh di atas— kita akan menyuruh file prosess.php untuk
memproses data form.
1
Belajar HTML
Contoh field:
<!DOCTYPE html>
<html>
<head>
<title>Form Login</title>
</head>
<body>
<form action="login.php" method="POST">
<fieldset>
<legend>Login</legend>
<p>
<label>Username:</label>
<input type="text" name="username" placeholder="username..." />
</p>
<p>
2
Belajar HTML
<label>Password:</label>
<input type="password" name="password" placeholder="password..."
/>
</p>
<p>
<label><input type="checkbox" name="remember" value="remember"
/> Remember me</label>
</p>
<p>
<input type="submit" name="submit" value="Login" />
</p>
</fieldset>
</form>
</body>
</html>
Hasilnya:
Sekarang perhatikan!
3
Belajar HTML
Di dalam tag <fieldset>, kita membuat tag <legend> untuk memberikan teks
pada fieldset.
Setiap field kita bungkus dalam tag <p> agar terlihat rapi dan juga kita berikan sebuah
label dengan tag <label>.
<!DOCTYPE html>
<html>
<head>
<title>Contact Us</title>
</head>
<body>
<form action="contact.php" method="POST">
<fieldset>
<legend>Contact</legend>
<p>
<label>Name:</label>
<input type="text" name="name" placeholder="your name..." />
</p>
<p>
<label>Subject:</label>
4
Belajar HTML
Pada contoh di atas, kita memberikan type="email" untuk field email, agar filed ini
harus diisi dengan email saja.
Coba saja isi dengan yang lain, lalu klik Send…maka akan muncul pesan peringatan.
5
Belajar HTML
6
Belajar HTML
<!DOCTYPE html>
<html>
<head>
<title>Registrasi</title>
</head>
<body>
<form action="contact.php" method="POST">
<fieldset>
<legend>Registrasi</legend>
<p>
<label>Nama:</label>
<input type="text" name="nama" placeholder="Nama lengkap..." />
</p>
<p>
<label>Username:</label>
<input type="text" name="username" placeholder="Username..." />
</p>
<p>
<label>Email:</label>
<input type="email" name="email" placeholder="Your email..." />
</p>
<p>
<label>Password:</label>
<input type="password" name="password" placeholder="Passowrd..."
/>
</p>
<p>
<label>Jenis kelamin:</label>
<label><input type="radio" name="jenis_kelamin" value="laki-
laki" /> Laki-laki</label>
<label><input type="radio" name="jenis_kelamin"
value="perempuan" /> Perempuan</label>
</p>
<p>
7
Belajar HTML
<label>Agama:</label>
<select name="agama">
<option value="islam">Islam</option>
<option value="kristen">Kristen</option>
<option value="hindu">Hindu</option>
<option value="budha">Budha</option>
</select>
</p>
<p>
<label>Biografi:</label>
<textarea name="biografi"></textarea>
</p>
<p>
<input type="submit" name="submit" value="Daftar" />
</p>
</fieldset>
</form>
</body>
</html>
Hasilnya:
8
Belajar HTML
1. Field radio;
2. Field <select><option>;
3. Field <textearea>.
Jika kita ingin agar pengunjung memilih salah satu, maka kita gunakan radio.
Tapi kalau kita ingin pengunjung memilih lebih dari satu, maka kita
gunakan checkbox.
Lalu untuk <select></option>, sifatnya sama seperti radio. Cuma dia bentuknya
berbeda.
9
Belajar HTML
Lalu untuk menginputkan teks yang panjang, kita gunakan tag <textarea>.
<!DOCTYPE html>
<html>
<head>
<title>Form HTML</title>
</head>
<body>
<form action="contact.php" method="POST">
<fieldset>
<legend>Form</legend>
<p>
<label>Alamat Web:</label>
<input type="url" name="name" placeholder="Masukan URL Web..."
/>
</p>
<p>
<label>Tanggal Lahir:</label>
<input type="date" name="tanggal" />
</p>
<p>
<label>Umur:</label>
<input type="number" min="10" max="90" name="umur" />
</p>
<p>
<input type="submit" name="submit" value="Send" />
</p>
</fieldset>
</form>
</body>
</html>
10
Belajar HTML
Hasilnya:
Apabila di browser anda tidak tampil kalender seperti di atas, coba gunakan browser
versi terbaru.
Apa Selanjutnya?
Apa yang kita pelajari pada tutorial ini adalah tag dan field dasar—dan sering
digunakan—dalam pembuatan form.
Masih terdapat banyak tipe field lagi yang belum kita coba.
Seperti: meter, color, time, dsb.
11