Pada kali ini saya akan menjelaskan tentang fitur-fitur yang sering digunakan apabila kita membuat suatu form dalam HTML 5(Datalist,Fieldset,dan Meter).Selamat membaca ! ^ ^
Jika sebelumnya kita sudah menguasai dasar-dasar pembuatan form dalam HTML,maka kita bisa menemukan banyak fitur baru pada HTML 5 untuk pembuatan form tersebut.Selama ini kita mengenal berbagai elemen atau komponen seperti textbox,radio button,text area dan tombol submit.
Berikut adalah elemen-elemen baru yang berhubungan dengan form di HTML 5.
DATALIST
Element datalist berfungsi untuk membantu kita menciptakan daftar saran ke dalam suatu textbox.Jadi ketika pengunjung website mengetikkan sesuatu dalam textbox,maka daftar saran itu akan muncul di dalam texbox.Dan jika teks yang ingin diketik muncul dalam salah satu saran,maka kita tinggal mengklik kata dalam saran tersebut.Contoh penggunaannya adalah sebagai berikut :
<!DOCTYPE HTML>
<html>
<head>
<title>LATIHAN DATALIST</title>
</head>
<body>
<label for="daftarnama">Masukkan Nama :
<input type="text"
List="nama"
Id ="daftarnama"/>
<datalist id="nama">
<option value="Fabio">
<option value="Johny">
<option value="Kounang">
</datalist>
</label>
</body>
</html>
Tampilannya akan menjadi seperti ini(klik gambar) :
Coba ketikkan huruf f,j dan k ,maka kata saran yang keluar adalah Fabio,Johny dan Kounang.Jika ingin mengubah daftar nama saran maka tinggal di ubah di <option value = "">.
FIELDSET
Terkadang dalam pembuatan form tampak bagus kalau dipisahkan sendiri dalam halaman website dengan memberi border yang mengelilingi seluruh elemen atau komponen yang ada di dalamnya.Untuk membuat border itu pakailah tag <fieldset>.Sedangkan kalau ingin membuat label/caption teks di atas form ,maka gunakanlah tag <legend>.Berikut adalah contohnya :
<!DOCTYPE HTML>
<html>
<head>
<title>LATIHAN FIELDSET</title>
</head>
<body>
<form action= "">
<fieldset>
<legend>Masukkan Identitas Diri</legend>
<table border="0">
<tr>
<td width="120">Nama Lengkap</td> <td width="10">:</td>
<td width="30"><input type="text" name="nama_lengkap"></td>
</tr>
<tr>
<td width="120">Nama Panggilan</td> <td width="10">:</td>
<td width="30"><input type="text" name="nama_panggilan"></td>
</tr>
<tr>
<td width="120">Alamat</td> <td width="10">:</td>
<td width="30"><input type="text" name="alamat"></td>
</tr>
</table>
<table>
<tr>
<td width="134"></td>
<td><input type="submit" name ="Submit"></td>
</tr>
</table>
</fieldset>
</form>
</body>
</html>
Tampilannya akan menjadi seperti ini(klik gambar) :
<!DOCTYPE HTML>
<html>
<head>
<title>LATIHAN METER</title>
</head>
<body>
<p> HONDA PRODUCT </p>
<form action="">
<fieldset>
<legend>Car Quality</legend>
<table border="0">
<tr>
<td width="120">Nama Mobil</td> <td width="10">:</td>
<td width="200">BRV-New Type 2121</td>
</tr>
<tr>
<td width="120">Merk Mobil</td> <td width="10">:</td>
<td width="200">Honda</td>
</tr>
<tr>
<td width="120">Harga Mobil</td> <td width="10">:</td>
<td width="200">Rp 500.000.000<td>
</tr>
<tr>
<td width="120">Estimated Speed</td> <td width="10">:</td>
<td width="200">
<meter min = "0"
max = "100"
Value = "60"
</meter>
</td>
</tr>
</table>
<table>
<tr>
<td width="134"></td>
<td><input type="submit" name ="Beli"></td>
</tr>
</table>
</fieldset>
</form>
</body>
</html>
Tampilannya akan menjadi seperti ini :
Note : untuk border gunakan tag <fieldset> dan untuk caption "Masukkan Identitas Diri" gunakan tag <legend> seperti yang sudah ditulis script di atas ^ ^
METER
Tag <meter> berfungsi untuk menampilkan angka di antara range tertentu.Contohnya adalah sebagai berikut :<!DOCTYPE HTML>
<html>
<head>
<title>LATIHAN METER</title>
</head>
<body>
<p> HONDA PRODUCT </p>
<form action="">
<fieldset>
<legend>Car Quality</legend>
<table border="0">
<tr>
<td width="120">Nama Mobil</td> <td width="10">:</td>
<td width="200">BRV-New Type 2121</td>
</tr>
<tr>
<td width="120">Merk Mobil</td> <td width="10">:</td>
<td width="200">Honda</td>
</tr>
<tr>
<td width="120">Harga Mobil</td> <td width="10">:</td>
<td width="200">Rp 500.000.000<td>
</tr>
<tr>
<td width="120">Estimated Speed</td> <td width="10">:</td>
<td width="200">
<meter min = "0"
max = "100"
Value = "60"
</meter>
</td>
</tr>
</table>
<table>
<tr>
<td width="134"></td>
<td><input type="submit" name ="Beli"></td>
</tr>
</table>
</fieldset>
</form>
</body>
</html>
Tampilannya akan menjadi seperti ini :
Ada beberapa atribut yang nantinya merekat di dalam tag <meter> ini seperti :
- Value : berfungsi untuk menampilkan angka yang dipilih dalam sebuah range
- Max : Angka maksimal dalam sebuah range
- Min : Angka minimal dalam sebuah range
- High : menentukan angka tertinggi yang bisa dicapai dalam sebuah range
- Low : menentukan angka terendah yang bisa dicapai dalam sebuah range
- Optimum : angka optimal yang bisa dimasukkan ke dalam value
Nah sekian penjelasan mengenai fitur-fitur yang terdapat pada HTML 5 ! Semoga ilmu yang diberikan dapat bermanfaat bagi yang membutuhkan.Terima Kasih !
izin comot gan
ReplyDelete