TIPE INPUT FORM HTML 5
Posted in Pemprograman Berbasis Web on December 29th, 2010 by nur ichsan – Comments Off on TIPE INPUT FORM HTML 5 Tags: HTML5, InternetPada versi HTML sebelumnya saat kita menginput atau mengentrikan data pada suatu form maka pengkontrolan datanya sepenuhnya menggunakan bahasa pemprogram web seperti PHP, JAVA atau ASP. Sekarang dengan adanya teknologi HTML5 maka validasi dan pengkontrolan input data dapat dilakukan menggunakan HTML dengan menggunakan script-script yang telah didefinisikan. Berikut adalah beberapa komponen baru dari HTML5 untuk melakukan tipe input data :
- URL
- Number
- Range
- Date Pickers
- Search
- Color
Perlu diperhatikan bahwa belum tentu semua web browser mendukung script-script tipe input tersebut.
| Tipe Input | IE | Firefox | Opera | Chrome | Safari |
| No | No | 9.0 | No | No | |
| URL | No | No | 9.0 | No | No |
| Number | No | No | 9.0 | No | No |
| Range | No | No | 9.0 | 4.0 | 4.0 |
| Date Pickers | No | No | 9.0 | No | No |
| Search | No | No | No | No | No |
| Color | No | No | No | No | No |
Tipe inputan email digunakan untuk menginput field yang berisi email address. Sebelum data dikirimkan ke server maka sebelumnya akan dilakukan pengecekan apakah yang dimasukan adalah sebuah email (ditandai dengan ‘@’) atau bukan. Berikut script yang digunakan untuk tipe input email :
<input type=”email” nama=”email_pengguna” />
Contoh dari penggunaan script tersebut adalah sebagai berikut :
<form action=” form.asp” method=”get”>
E-mail: <input type=”email” /><br />
<input />
</form>
Output dari script diatas adalah sebagai berikut :
Jika kita memasukan suatu email kedalam form tersebut tanpa tanda ‘@’ maka akan muncul pesan validasi bahwa email tersebut tidak benar. Namun jika memasukan email yang benar (ex : nurichsan@hotmail.co.id) maka perintah tersebut akan langsung dikirimkan ke file form.asp yang selanjutnya akan dilakukan penyimpanan data.
URL
Digunakan untuk menginput data berupa alamat web atau URL. Jika tanpa domain atau menggunakan ‘@’ maka input data akan dinyatakan invalid atau tidak benar. Berikut script nya :
<input type=”url” nama=”url_pengguna” />
Contoh penggunaan tipe inputan URL adalah sebagai berikut :
<form action=” form.asp” method=”get”>
URL: <input name=”url_email” /><br />
<input />
</form>
Jika inputan data benar maka tidak akan pesan invalid pada prosesnya. Namun jika gagal maka akan muncul pesan seperti pada gambar dibawah ini :
atau
NUMBER
Digunakan untuk menginput data yang bertipe angka. Dengan ketentuan batas minimal dan batas maksimal. Berikut scipt penggunaanya :
Poin : <input type=”number” min=”1″ max=”10″ />
Contoh pengunaanya adalah sebagai berikut :
<form action=” form.asp” method=”get”>
<input type=”number” min=”0″ max=”10″ step=”3″ value=”6″ />
<input type=”submit” />
</form>
Form diatas akan menampilkan pengisian data dimana angka yang boleh dimasukan adalah minimal 0 dan maksimal 10. Angka lebih kecil dari 0 dan lebih besar dari 10 tidak akan bisa dimasukan dalam form tersebut. Atribut step berfungsi untuk menetukan jumlah interval kenaikan dan penurunan angka. Sedangakan atribut value berfungsi untuk menampilkan angka awal atau default dari step tersebut.
RANGE
Digunakan untuk menginput data berupa angka yang memiliki jarak atau interval tertentu yang ditampilkan dalam bentuk slider bar. Beriktu script penggunaanya :
<input name=”poin” min=”1″ max=”10″ />
Contoh penggunaanya adalah sebagai berikut :
<form action=”demo_form.asp” method=”get”>
Points: <input type=”range” min=”1″ max=”10″ />
<input type=”submit” />
</form>
Input Tipe Range juga memiliki atribut yang sama dengan Number yaitu step, value, min, dan max.
