HTML Input Type
Bab ini menjelaskan jenis input yang berbeda untuk elemen <input>.
Input Type Text
<input type = "text"> mendefinisikan field input teks satu baris:
<form>
First name:<br>
<input type="text" name="firstname"><br>
Last name:<br>
<input type="text" name="lastname">
</form>
Input Type Password
<input type = "password"> mendefinisikan field kata sandi:
<form>
User name:<br>
<input type="text" name="username"><br>
User password:<br>
<input type="password" name="psw">
</form>
Karakter dalam field kata sandi tidak ditampilkan secara langsung (ditampilkan sebagai tanda bintang atau lingkaran).
Input Type Submit
<input type = "submit"> mendefinisikan sebuah tombol untuk mengirimkan data formulir ke form-handler.
Form-handler biasanya adalah halaman server dengan script untuk memproses data masukan.
Form-handler ditentukan dalam atribut tindakan form:
<form action="/action_page.php">
First name:<br>
<input type="text"
name="firstname" value="Mickey"><br>
Last name:<br>
<input
type="text" name="lastname" value="Mouse"><br><br>
<input type="submit"
value="Submit">
</form>
Pada contoh diatas, jika Anda mengklik "Submit", form-data akan dikirim ke halaman yang bernama "/action_page.php".
Jika Anda menghilangkan atribut nilai tombol kirim, tombol akan mendapatkan teks default:
<form action="/action_page.php">
First name:<br>
<input type="text"
name="firstname" value="Mickey"><br>
Last name:<br>
<input
type="text" name="lastname" value="Mouse"><br><br>
<input type="submit">
</form>
Input Type Reset
<input type = "reset"> mendefinisikan tombol reset yang akan mengatur ulang semua nilai bentuk ke nilai defaultnya:
<form action="/action_page.php">
First name:<br>
<input type="text"
name="firstname" value="Mickey"><br>
Last name:<br>
<input
type="text" name="lastname" value="Mouse"><br><br>
<input type="submit"
value="Submit">
<input type="reset">
</form>
Jika Anda mengubah nilai input dan kemudian klik tombol "Reset", form-data akan disetel ulang ke nilai default.
Input Type Radio
<input type = "radio"> mendefinisikan sebuah tombol radio.
Tombol radio membiarkan pengguna memilih HANYA SATU dari sejumlah pilihan terbatas:
<form>
<input type="radio" name="gender" value="male"
checked> Male<br>
<input
type="radio" name="gender" value="female"> Female<br>
<input
type="radio" name="gender" value="other"> Other
</form>
Input Type Checkbox
<input type = "checkbox"> mendefinisikan kotak centang.
Kotak centang membiarkan pengguna memilih opsi NOL atau LEBIH dari sejumlah pilihan.
<form>
<input type="checkbox" name="vehicle1" value="Bike"> I have a bike<br>
<input type="checkbox" name="vehicle2" value="Car"> I have a car
</form>
Input Type Button
<input type = "button"> mendefinisikan sebuah tombol:
<input type="button" onclick="alert('Hello World!')" value="Click Me!">
HTML5 Input Types
HTML5 menambahkan beberapa jenis masukan baru:
- color
- date
- datetime-local
- month
- number
- range
- search
- tel
- time
- url
- week
Jenis input baru yang tidak didukung oleh browser web lama, akan berperilaku seperti <input type = "text">.
Input Type Color
<Input type = "color"> digunakan untuk field input yang seharusnya mengandung warna.
Bergantung pada dukungan browser, pemilih warna dapat muncul di kolom input.
<form>
Select your favorite color:
<input type="color" name="favcolor">
</form>
Input Type Date
<Input type = "date"> digunakan untuk kolom masukan yang harus berisi tanggal.
Bergantung pada dukungan browser, pemetik tanggal dapat muncul di kolom masukan.
<form>
Birthday:
<input type="date" name="bday">
</form>
Anda juga dapat menambahkan batasan tanggal:
<form>
Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31"><br>
Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02"><br>
</form>
Input Type Datetime-local
<Input type = "datetime-local"> menentukan field masukan tanggal dan waktu, tanpa zona waktu.
Bergantung pada dukungan browser, pemetik tanggal dapat muncul di kolom masukan.
<form>
Birthday (date and time):
<input type="datetime-local" name="bdaytime">
</form>
Input Type Email
<Input type = "email"> digunakan untuk kolom input yang harus berisi alamat e-mail.
Bergantung pada dukungan browser, alamat e-mail dapat divalidasi secara otomatis saat dikirimkan.
Beberapa smartphone mengenali jenis email, dan menambahkan ".com" ke keyboard agar sesuai dengan masukan email.
Input Type Month
<Input type = "month"> memungkinkan pengguna memilih bulan dan tahun.
Bergantung pada dukungan browser, pemetik tanggal dapat muncul di kolom masukan.
<form>
Birthday (month and year):
<input type="month" name="bdaymonth">
</form>
Input Type Number
Nomor Tipe Input
<Input type = "number"> mendefinisikan field input numerik.
Anda juga dapat menetapkan batasan jumlah yang diterima.
Contoh berikut menampilkan bidang masukan numerik, di mana Anda dapat memasukkan nilai dari 1 sampai 5:
<form>
Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">
</form>
Input Restrictions
Berikut adalah daftar beberapa batasan masukan yang umum (beberapa ada yang baru di HTML5):
| Attribute | Description |
|---|---|
| disabled | Menentukan bahwa bidang masukan harus dinonaktifkan |
| max | Menentukan nilai maksimum untuk bidang masukan |
| maxlength | Menentukan jumlah maksimum karakter untuk bidang masukan |
| min | Menentukan nilai minimum untuk bidang masukan |
| pattern | Menentukan ekspresi reguler untuk memeriksa nilai input |
| readonly | Menentukan bahwa bidang masukan hanya dibaca (tidak dapat diubah) |
| required | Menentukan bahwa bidang masukan diperlukan (harus diisi) |
| size | Menentukan lebar (dalam karakter) bidang masukan |
| step | Menentukan interval jumlah hukum untuk bidang masukan |
| value | Menentukan nilai default untuk field input |
Anda akan belajar lebih banyak tentang batasan masukan di bab berikutnya.
Contoh berikut menampilkan bidang masukan numerik, di mana Anda dapat memasukkan nilai dari 0 sampai 100, dalam langkah 10. Nilai default adalah 30:
<form>
Quantity:
<input type="number" name="points"
min="0" max="100" step="10" value="30">
</form>
Input Type Range
<Input type = "range"> mendefinisikan kontrol untuk memasukkan nomor yang nilai pastinya tidak penting (seperti kontrol slider). Rentang default adalah 0 sampai 100. Namun, Anda dapat menetapkan batasan jumlah yang diterima dengan atribut min, max, dan step:
<form>
<input type="range" name="points" min="0" max="10">
</form>
Input Type Search
<Input type = "search"> digunakan untuk bidang pencarian (bidang pencarian berperilaku seperti bidang teks biasa).
<form>
Search Google:
<input type="search" name="googlesearch">
</form>
Input Type Tel
<Input type = "tel"> digunakan untuk kolom masukan yang berisi nomor telepon.
Atribut Type tel saat tulisan ini dibuat hanya didukung di Safari 8.
<form>
Telephone:
<input type="tel" name="usrtel">
</form>
Input Type Time
<input type = "time"> memungkinkan pengguna untuk memilih waktu (no time zone).
Bergantung pada dukungan browser, pemetik waktu dapat muncul di kolom masukan.
<form>
Select a time:
<input type="time" name="usr_time">
</form>
Input Type Url
<Input type = "url"> digunakan untuk kolom masukan yang harus berisi alamat URL.
Bergantung pada dukungan browser, bidang url dapat divalidasi secara otomatis saat diserahkan.
Beberapa smartphone mengenali jenis url, dan menambahkan ".com" ke keyboard agar sesuai dengan masukan url.
<form>
Add your homepage:
<input type="url" name="homepage">
</form>
Input Type Week
<Input type = "week"> memungkinkan pengguna untuk memilih satu minggu dan tahun.
Bergantung pada dukungan browser, pemetik tanggal dapat muncul di kolom masukan.
<form>
Select a week:
<input type="week" name="week_year">
</form>
HTML Input Type Attribute
| Tag | Description |
|---|---|
| <input type=""> | Menentukan jenis input yang akan ditampilkan |
Belajar HTML Secara Lengkap Disini:
1. Tutorial HTML Bagian 1
2. Tutorial HTML Bagian 2