HTML5 mempunyai beberapa tipe input yang baru untuk form yang bisa melakukan validasi input. Disana ada beberapa feature baru yang membuat control input dan validasi menjadi lebih baik. Sebagai contoh, dengan tipe input datetime, maka form akan mengecek apakah formatnya sesuai dengan tanggal atau tidak saat ada yang melakukan pengisian form. Menarik bukan?
Pembahasan kali ini kita akan mengupas tentang input baru ini yaitu :
- color
- date
- datetime
- datetime-local
- month
- number
- range
- search
- tel
- time
- url
- week
Tipe Input : Color
Color type ini digunakan untuk memasukkan field yang mengandung warna.
<!DOCTYPE html>
<html>
<body>
<form action=”demo_form.asp”>
Select your favorite color: <input type=”color” name=”favcolor” /><br />
<input type=”submit” />
</form>
</body>
</html>
Input Type: date
Digunakan pengguna untuk memilih tanggal :
Birthday: <input type=”date” name=”bday” />
Input Type: datetime
Digunakan pengguna untuk memilih tanggal dan waktu (dengan zona waktu)
Birthday (date and time): <input type=”datetime” name=”bdaytime” />
Input Type: datetime-local
Digunakan untuk memilih tanggal dan waktu tanpa zona waktu
Birthday (date and time): <input type=”datetime-local” name=”bdaytime” />
Input Type: email
Digunakan untuk menginput data yang mengandung email. Secara otomatis akan divalidasi ketika user submitted.
E-mail: <input type=”email” name=”usremail” />
Input Type: month
Digunakan untuk menyeleksi bulan dan tahun.(tidak dengan zona waktu)
Birthday (month and year): <input type=”month” name=”bdaymonth” />
Input Type: number
Digunakan untuk menginput data yang mengandung nilai angka, kita juga bisa mengatur pembatasan pada nomer yang diterima.
Quantity (between 1 and 5): <input type=”number” name=”quantity” min=”1″ max=”5″ />
Input Type: range
Digunakan untuk memasukkan data yang ada nilai form dari nomer yang berjarak.
<input type=”range” name=”points” min=”1″ max=”10″ />
Input Type: search
Digunakan untuk mencari field
Try This: 4 Langkah Mudah Belajar Cara Membuat Website, Langsung Praktek! KLIK DI SINI!.
Search Google: <input type=”search” name=”googlesearch” />
Input Type: tel
Telephone: <input type=”tel” name=”usrtel” />
Input Type: time
Select a time: <input type=”time” name=”usr_time” />
Input Type: url
Digunakan untuk memasukkan field yang mengandung url addres.
Add your homepage: <input type=”url” name=”homepage” />
Input Type: week
Digunakan untuk memilih minggu dan tahun.
Select a week: <input type=”week” name=”week_year” />
0 comments:
Post a Comment