Jenis masukan
Bab ini menjelaskan jenis input dari <input> elemen.
Input Type: text
<input type="text"> mendefinisikan sebuah field input satu baris untuk input teks:
Contoh
<form>
First name:<br>
<input type="text" name="firstname"><br>
Last name:<br>
<input type="text" name="lastname">
</form> Cobalah sendiri " Ini adalah bagaimana kode HTML di atas akan ditampilkan dalam browser:
Nama depan:
Nama keluarga:
Masukan Type: password
<input type="password"> mendefinisikan bidang sandi:
Contoh
<form>
User name:<br>
<input type="text" name="username"><br>
User password:<br>
<input type="password" name="psw">
</form> Cobalah sendiri " Ini adalah bagaimana kode HTML di atas akan ditampilkan dalam browser:
Nama pengguna:
User password:
Karakter dalam bidang sandi yang bertopeng (shown as asterisks or circles) .
Masukan Type: submit
<input type="submit"> mendefinisikan tombol untuk mengirimkan formulir masukan ke bentuk-handler.
Bentuk-handler biasanya halaman server dengan script untuk memproses input data.
Bentuk-handler ditentukan dalam atribut action form:
Contoh
<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> Cobalah sendiri " Ini adalah bagaimana kode HTML di atas akan ditampilkan dalam browser:
Nama depan:
Nama keluarga:
Jika Anda menghilangkan atribut nilai tombol submit ini, tombol akan mendapatkan teks default:
Contoh
<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> Cobalah sendiri " Masukan Type: radio
<input type="radio"> mendefinisikan radio button.
Radio tombol membiarkan pengguna memilih HANYA SATU dari sejumlah pilihan:
Contoh
<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> Cobalah sendiri " Ini adalah bagaimana kode HTML di atas akan ditampilkan dalam browser:
Pria
Wanita
Lain
Masukan Type: checkbox
<input type="checkbox"> mendefinisikan sebuah checkbox .
Checkboxes membiarkan pengguna memilih ZERO atau LEBIH pilihan dari sejumlah pilihan.
Contoh
<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> Cobalah sendiri " Ini adalah bagaimana kode HTML di atas akan ditampilkan dalam browser:
saya punya sepeda
saya punya mobil
Masukan Type: button
<input type="button"> mendefinisikan sebuah button :
Ini adalah bagaimana kode HTML di atas akan ditampilkan dalam browser:
HTML5 Input Jenis
HTML5 menambahkan beberapa baru input jenis:
- color
- date
- datetime
- datetime-local
- month
- number
- range
- search
- tel
- time
- url
- week
Input jenis, tidak didukung oleh browser web lama, akan berperilaku sebagai input jenis teks.
Input Type: number
The <input type="number"> digunakan untuk field input yang harus berisi nilai numerik.
Anda dapat mengatur pembatasan pada nomor.
Tergantung pada dukungan browser, pembatasan dapat diterapkan pada field input.
Contoh
<form>
Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">
</form> Cobalah sendiri " Input Pembatasan
Berikut adalah daftar dari beberapa yang umum input pembatasan (some are new in HTML5) :
| Atribut | Deskripsi |
|---|---|
| disabled | Menentukan bahwa sebuah field input harus dinonaktifkan |
| max | Menentukan nilai maksimum untuk sebuah field input |
| >maxlength | Menentukan jumlah maksimum karakter untuk sebuah field input |
| min | Menentukan nilai minimum untuk sebuah field input |
| pattern | Menentukan ekspresi reguler untuk memeriksa nilai masukan terhadap |
| readonly | Menentukan bahwa sebuah field input dibaca hanya (cannot be changed) |
| required | Menentukan bahwa sebuah field input diperlukan (must be filled out) |
| size | Menentukan lebar (in characters) dari sebuah field input |
| step | Menentukan interval nomor hukum untuk sebuah field input |
| value | Menentukan nilai default untuk field input |
Anda akan belajar lebih banyak tentang input pembatasan dalam bab berikutnya.
Contoh
<form>
Quantity:
<input type="number" name="points" min="0" max="100" step="10" value="30">
</form> Cobalah sendiri " Input Type: date
The <input type="date"> digunakan untuk field input yang harus berisi tanggal.
Tergantung pada dukungan browser, tanggal pemetik dapat muncul di bidang masukan.
Anda dapat menambahkan pembatasan ke input :
Contoh
<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> Cobalah sendiri " Input Type: warna
The <input type="color"> digunakan untuk field input yang harus berisi warna.
Tergantung pada dukungan browser, pemetik warna dapat muncul di bidang masukan.
Contoh
<form>
Select your favorite color:
<input type="color" name="favcolor">
</form> Cobalah sendiri " Input Type: kisaran
The <input type="range"> digunakan untuk field input yang harus berisi nilai dalam kisaran.
Tergantung pada dukungan browser, kolom input dapat ditampilkan sebagai kontrol slider.
Anda dapat menggunakan following atribut untuk menentukan pembatasan: min, max, langkah, nilai.
Input Type: month
The <input type="month"> memungkinkan pengguna untuk memilih bulan dan tahun.
Tergantung pada dukungan browser, tanggal pemetik dapat muncul di bidang masukan.
Contoh
<form>
Birthday (month and year):
<input type="month" name="bdaymonth">
</form> Cobalah sendiri " Input Type: week
The <input type="week"> memungkinkan pengguna untuk memilih satu minggu dan tahun.
Tergantung pada dukungan browser, tanggal pemetik dapat muncul di bidang masukan.
Input Type: time
The <input type="time"> memungkinkan pengguna untuk memilih waktu (no time zone) .
Tergantung pada dukungan browser, waktu pemetik dapat muncul di bidang masukan.
Input Type: datetime
The <input type="datetime"> memungkinkan pengguna untuk memilih tanggal dan waktu (with time zone) .
Contoh
<form>
Birthday (date and time):
<input type="datetime" name="bdaytime">
</form> Cobalah sendiri "  | Jenis masukan datetime dihapus dari standar HTML. Gunakan datetime-lokal sebagai gantinya. |
|---|
Masukan Type: datetime-lokal
The <input type="datetime-local"> memungkinkan pengguna untuk memilih tanggal dan waktu (no time zone) .
Tergantung pada dukungan browser, tanggal pemetik dapat muncul di bidang masukan.
Contoh
<form>
Birthday (date and time):
<input type="datetime-local" name="bdaytime">
</form> Cobalah sendiri " Masukan Type: email
The <input type="email"> digunakan untuk field input yang harus berisi alamat email.
Tergantung pada dukungan browser, alamat e-mail dapat secara otomatis divalidasi ketika disampaikan.
Beberapa smartphone mengenali jenis email, dan menambahkan ".com" ke keyboard untuk mencocokkan masukan email.
Masukan Type: cari
The <input type="search"> digunakan untuk bidang pencarian (a search field behaves like a regular text field) .
Masukan Type: tel
The <input type="tel"> digunakan untuk field input yang harus berisi nomor telepon.
Jenis tel saat ini didukung hanya dalam Safari 8.
Masukan Type: url
The <input type="url"> digunakan untuk field input yang harus berisi alamat URL.
Tergantung pada dukungan browser, bidang url dapat secara otomatis divalidasi ketika disampaikan.
Beberapa smartphone mengenali jenis url, dan menambahkan ".com" ke keyboard untuk mencocokkan masukan url.