RudihartoMelanjutkan panduan belajar HTML part 2 – Gambar dan Tabel, kali ini kami akan membahas cara membuat form HTML dengan mudah. Untuk memulai belajar membuat script formulir dengan html, kita kenali terlebih dahulu poin-poin yang biasanya ada di dalam formulir.
Atribut di dalam Form HTML
Form HTML dapat kita buat menggunakan tag <form> dan penutup </form>
Contoh Form:
<form action="prosess-form.php" method="GET">
<!-- letakkan field di sini -->
</form>Didalam tag form tersebut terdapat beberapa atribut:
- action untuk menentukan aksi yang akan dilakukan saat data form dikirim. Pada atribut action kita isi dengan url yang akan memproses data form. Pada contoh file yang akan memproses data form adalah prosess-form.php
- method sebagai metode pengiriman data
Tetapi Form tersebut belum menampilkan data maupun formulir, karena belum ada field form nya.
Apa itu Field?
Field adalah bagian yang kita gunakan untuk mengisi data, sesuai tipe yang dibutuhkan. Yang sering kita temui adalah tag <input>.
Contoh Field:
<input type="text" name="nama-lengkap" />Didalam Field tersebut terdapat tag yang didalamnya ada beberapa atribut yang harus diberikan;
- type merupakan type dari field, seperti textarea, password, checkbox, sumbit dan lainnya
- name nama dari atribut name wajib ada dan beda, sebagai variable untuk proses data
Hasilnya:
Agar tampilan tidak hanya menampilkan form saja, kita perlu menambahkan tabel atau label diatas tag <input>
Contoh Field:
<label> Nama: </label>
<input type="text" name="nama-lengkap" /><br />Hasilnya:
type dan name didalam atribut ini yang akan sering kita temui didalam membuat form HTML. Perlu diketahui atribut type ini banyak macamnya. Agar lebih jelas, mari lanjut pembahasannya.
Contoh Atribut
Atribut Type
Atribut type banyak sekali macamnya. Tetapi karena pembahasan kita adalah Form HTML, berikut beberapa atribut type yang sering digunakan.
- text field untuk mengisi data berupa teks
- email field untuk mengisi data khusus email
- password field untuk mengisi data khusus password, nantinya hanya menampilkan karakter bintang-bintang agar karakter password tidak terbaca/terlihat nilai aslinya
- checkbox field untuk pengguna memilih nilai lebih dari satu sesuai pilihan yang diberikan
- radio field untuk memilih salah satu nilai yang diberikan
- number field untuk mengisi data khusus angka
- date field untuk mengisi data khusus tanggal
- file field untuk upload file didalam form
- submit field untuk tombol submit, agar form diproses oleh form action
Contoh:
<!DOCTYPE html>
<html>
<head><title>Belajar HTML - Membuat Form</title></head>
<body>
<form action="prosess-form.php" method="GET">
<!-- letakkan field di sini -->
<label> Nama: </label>
<input type="text" name="nama-lengkap" /><br />
<label> Email: </label>
<input type="email" name="email" /><br />
<label> Password: </label>
<input type="password" name="password" /><br />
<label> Checkbox: </label>
<input type="checkbox" name="hobi" /> Membaca
<input type="checkbox" name="hobi" /> Menulis
<input type="checkbox" name="hobi" /> Olahraga <br />
<label> Radio: </label>
<input type="radio" name="jenis-kelamin" /> Pria
<input type="radio" name="jenis-kelamin" />Wanita<br />
<label> Number/angka: </label>
<input type="number" name="number" /><br />
<label> Tanggal: </label>
<input type="date" name="tanggal" /><br />
<label> File: </label>
<input type="file" name="file" /><br />
<label> Submit: </label>
<input type="submit" name="submit" /><br />
</form>
</body>
</html>Hasilnya:
Atribut Name
Atribut name digunakan sebagai pengenal atau variable untuk proses data dan harus berbeda dengan name lain. Name ini tidak akan ditampilkan dibrowser.
Atribut Value
Atribut Value digunakan untuk memberikan nilai default didalam form
Contoh:
<form action="prosess-form.php" method="GET">
<!-- letakkan field di sini -->
<label> Nama: </label>
<input type="text" name="nama-lengkap" value="Sri" /><br />
</form>Atribut Placeholder
Atribut placeholder digunakan untuk memberikan teks bantuan didalam field. Selain itu, Atribut ini akan muncul apabila form dalam keadaan kosong atau saat belum kita isi.
Contoh:
<form action="prosess-form.php" method="GET">
<!-- letakkan field di sini -->
<label> Nama Lengkap dan gelar: </label>
<input type="text" name="nama-lengkap" placeholder="Ir. H. Soekarno" /><br />
<input type="submit" name="submit" /><br />
</form>Atribut Required
Atribut Required digunakan agar field wajib diisi. Apabila tidak diisi maka akan menghasilkan warning tertentu
Contoh:
<form action="prosess-form.php" method="GET">
<!-- letakkan field di sini -->
<label> Alamat email: </label>
<input type="email" name="nama-lengkap" required/><br />
<input type="submit" name="submit" /><br />
</form>Baca juga artikel : Kode Warna HTML dan CSS yang Perlu Anda Ketahui
Elemen lain di form HTML
<select>
Elemen yang digunakan untuk membuat list drop-down
</textarea>
Elemen yang digunakan teks untuk multi baris, biasanya digunakan untuk mengisi form komentar
Contoh:
<form action="prosess-form.php" method="GET">
<!-- letakkan field di sini -->
<label> Isi Komentar: </label>
<textarea name="komentar" rows="4" cols="50" ></textarea> <br /><br />
<label> Asal Kota: </label>
<select name="kota">
<option value="sleman"> Sleman</option>
<option value="bantul"> Bantul</option>
<option value="gunungkidul"> Gunung Kidul</option>
<option value="kulonprogo"> Kulon Progo</option>
<option value="yogyakota"> Yogyakarta Kota</option>
</select>
</form>Hasilnya:
Contoh membuat formulir pendaftaran HTML
Dalam latihan kali ini kita akan menggabungkan beberapa type dan elemen. Sekaligus menggunakan tabel agar nama dan form terlihat rapi.
Contoh:
<!DOCTYPE html>
<html>
<head><title>Belajar HTML - Membuat Form</title></head>
<body>
<form action="prosessForm.php" method="GET">
<!-- letakkan field di sini -->
<fieldset>
<legend><h1>Formulir Pendaftaran Siswa</h1></legend>
<table>
<tr>
<td>Nama Calon Siswa</td>
<td>:</td>
<td><input type="name" name="nama" required/><br /></td>
</tr>
<tr>
<td>Tempat/Tanggal Lahir</td>
<td>:</td>
<td><input type="name" name="tempatLahir"/> <input type="date" name="tanggal" /></td>
</tr>
<tr>
<td>Agama</td>
<td>:</td>
<td><select name="agama">
<option value="islam"> Islam</option>
<option value="kristen"> Kristen</option>
<option value="katolik"> Katolik</option>
<option value="budha"> Budha</option>
<option value="hindu"> Hindu</option>
</select></td>
</tr>
<tr>
<td>Alamat</td>
<td>:</td>
<td><textarea name="komentar" rows="4" cols="50" ></textarea> </td>
</tr>
<tr>
<td>No Telp/Hp</td>
<td>:</td>
<td><input type="number" name="number" /></td>
</tr>
<tr>
<td>Jenis Kelamin</td>
<td>:</td>
<td><input type="radio" name="jenisKelamin" /> Pria
<input type="radio" name="jenisKelamin" /> Wanita</td>
</tr>
<tr>
<td>Hobi</td>
<td>:</td>
<td><input type="checkbox" name="hobi" /> Membaca </input>
<input type="checkbox" name="hobi" /> Menulis </input>
<input type="checkbox" name="hobi" /> Olahraga </input></td>
</tr>
<tr>
<td>Pas Foto</td>
<td>:</td>
<td><input type="file" name="foto" /></td>
</tr>
<tr>
<td><input type="submit" name="submit" value="SUBMIT"/></td>
<td></td>
<td></td>
</tr>
</table>
</fieldset>
</form>
</body>
</html>Hasilnya:
Demikian beberapa hal yang dapat dipelajari untuk membuat Formulir HTML. Mudah bukan ?
