Contoh
Bentuk HTML dengan dua jenis input yang berbeda; teks dan menyerahkan:
<form action="demo_form.asp">
Username: <input type="text" name="usrname"><br>
<input type="submit" value="Submit">
</form>
Cobalah sendiri " Lebih "Cobalah Sendiri" contoh di bawah ini.
Definisi dan Penggunaan
The type Atribut menentukan jenis <input> elemen untuk menampilkan.
Jenis default adalah: text .
Tip: Ini bukan atribut yang diperlukan, tapi kami pikir Anda harus selalu memasukkannya.
Dukungan Browser
Atribut | |||||
---|---|---|---|---|---|
type | iya nih | iya nih | iya nih | iya nih | iya nih |
Catatan: type atribut bekerja di semua browser utama. Namun, tidak semua jenis input yang berbeda bekerja di semua browser utama.
Lihat di bawah untuk melihat dukungan browser untuk setiap jenis input.
Perbedaan Antara HTML 4.01 dan HTML5
HTML5 memiliki jenis berikut masukan baru: color, date, datetime, datetime-local, month, week, time, email, number, range, search, tel , dan url .
Sintaksis
<input type="value">
atribut Nilai
Nilai | Deskripsi |
---|---|
button | Mendefinisikan tombol yang dapat diklik (kebanyakan digunakan dengan JavaScript untuk mengaktifkan script) |
checkbox | Mendefinisikan kotak centang |
color | Mendefinisikan sebuah color picker |
date | Mendefinisikan kontrol tanggal (tahun, bulan dan hari (waktu)) |
datetime | Jenis masukan datetime telah dihapus dari standar HTML. Gunakan datetime-lokal sebagai gantinya. |
datetime-local | Mendefinisikan tanggal dan waktu kontrol (tahun, bulan, hari, jam, menit, detik, dan sepersekian (tidak ada zona waktu kedua) |
Mendefinisikan lapangan untuk alamat e-mail | |
file | Mendefinisikan bidang berkas-pilih dan tombol "Browse ..." (untuk upload file) |
hidden | Mendefinisikan field input tersembunyi |
image | Mendefinisikan gambar sebagai tombol submit |
month | Mendefinisikan bulan dan tahun kontrol (tanpa zona waktu) |
number | Mendefinisikan lapangan untuk memasukkan nomor |
password | Mendefinisikan bidang sandi (karakter yang bertopeng) |
radio | Mendefinisikan sebuah tombol radio |
range | Mendefinisikan kontrol untuk memasukkan nomor yang nilainya sebenarnya tidak penting (seperti kontrol slider) |
reset | Mendefinisikan sebuah tombol reset (reset semua nilai bentuk ke nilai default) |
search | Mendefinisikan kolom teks untuk memasukkan string pencarian |
submit | Mendefinisikan sebuah tombol submit |
tel | Mendefinisikan lapangan untuk memasukkan nomor telepon |
text | Default. Mendefinisikan kolom teks single-line (lebar default adalah 20 karakter) |
time | Mendefinisikan kontrol untuk memasukkan waktu (tidak ada zona waktu) |
url | Mendefinisikan lapangan untuk memasukkan URL |
week | Mendefinisikan minggu dan tahun kontrol (tanpa zona waktu) |
contoh
Jenis Input: button
Contoh
Sebuah tombol diklik, yang mengaktifkan JavaScript ketika diklik:
<input type="button" value="Click me" onclick="msg()">
Cobalah sendiri " Jenis Input: checkbox
Contoh
Centang membiarkan pengguna memilih satu atau lebih pilihan dari sejumlah pilihan:
<input type="checkbox" name="vehicle1" value="Bike"> I have a bike<br>
<input type="checkbox" name="vehicle2" value="Car"> I have a car
Cobalah sendiri " Jenis Input: color
Contoh
Pilih warna dari color picker:
Select your favorite color: <input type="color" name="favcolor">
Cobalah sendiri " Jenis Input: date
Jenis Input: datetime
Contoh
Menentukan tanggal dan waktu kontrol (dengan zona waktu):
Birthday (date and time): <input type="datetime" name="bdaytime">
Cobalah sendiri " Jenis masukan datetime telah dihapus dari standar HTML. Gunakan datetime-lokal sebagai gantinya.
Jenis Input: datetime-local
Contoh
Tentukan tanggal dan waktu kontrol (tanpa zona waktu):
Birthday (date and time): <input type="datetime-local" name="bdaytime">
Cobalah sendiri " Jenis Input: email
Contoh
Mendefinisikan lapangan untuk alamat e-mail (akan otomatis divalidasi ketika diajukan):
E-mail: <input type="email" name="usremail">
Cobalah sendiri " Tip: Safari pada iPhone mengakui jenis email, dan mengubah keyboard pada layar untuk mencocokkan (menambahkan @ dan .com pilihan).
Jenis Input: file
Contoh
Tentukan bidang berkas-pilih dan "Browse ..." tombol (untuk upload file):
Select a file: <input type="file" name="img">
Cobalah sendiri " Jenis Input: hidden
Contoh
Mendefinisikan field tersembunyi (tidak terlihat ke pengguna).
Sebuah field tersembunyi sering menyimpan nilai default, atau dapat memiliki nilai berubah dengan JavaScript:
<input type="hidden" name="country" value="Norway">
Cobalah sendiri " Jenis Input: image
Contoh
Tentukan gambar sebagai tombol kirim:
<input type="image" src="img_submit.gif" alt="Submit">
Cobalah sendiri " Jenis Input: month
Contoh
Tentukan bulan dan tahun kontrol (tanpa zona waktu):
Birthday (month and year): <input type="month" name="bdaymonth">
Cobalah sendiri " Jenis Input: number
Contoh
Mendefinisikan lapangan untuk memasukkan nomor (Anda juga dapat mengatur pembatasan nomor apa yang diterima):
Quantity (between 1 and 5): <input type="number" name="quantity" min="1"
max="5">
Cobalah sendiri " Gunakan following atribut untuk menentukan batasan:
- max - menetapkan nilai maksimum yang diizinkan
- min - menentukan nilai minimum diperbolehkan
- step - menentukan interval jumlah hukum
- value - Menentukan nilai default
Jenis Input: password
Contoh
Tentukan bidang sandi (karakter yang bertopeng)
<input type="password" name="pwd">
Cobalah sendiri " Input type: radio
Contoh
tombol radio membiarkan pengguna memilih hanya salah satu dari sejumlah pilihan:
<input type="radio" name="gender" value="male"> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other">
Other
Cobalah sendiri " Jenis masukan: range
Contoh
Mendefinisikan kontrol untuk memasukkan nomor yang nilainya sebenarnya tidak penting (seperti kontrol slider). Anda juga dapat mengatur pembatasan apa nomor yang diterima:
<input type="range" name="points" min="0" max="10">
Cobalah sendiri " Gunakan following atribut untuk menentukan batasan:
- max - menetapkan nilai maksimum yang diizinkan
- min - menentukan nilai minimum diperbolehkan
- step - menentukan interval jumlah hukum
- value - Menentukan nilai default
Jenis Input: reset
Contoh
Mendefinisikan sebuah tombol reset (reset semua nilai bentuk ke nilai default):
<input type="reset">
Cobalah sendiri " Tip: Gunakan tombol reset dengan hati-hati!Hal ini dapat mengganggu bagi pengguna yang sengaja mengaktifkan tombol reset.
Jenis Input: search
Contoh
Tentukan kolom pencarian (seperti pencarian situs, atau pencarian Google):
Search Google: <input type="search" name="googlesearch">
Cobalah sendiri " Input type: submit
Jenis Input: tel
Contoh
Mendefinisikan lapangan untuk memasukkan nomor telepon:
Telephone: <input type="tel" name="usrtel">
Cobalah sendiri " Input type: text
Contoh
Mendefinisikan dua bidang teks single-line yang pengguna dapat memasukkan teks ke:
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
Cobalah sendiri " Jenis Input: time
Contoh
Mendefinisikan kontrol untuk memasuki waktu (tidak ada zona waktu):
Select a time: <input type="time" name="usr_time">
Cobalah sendiri " Jenis Input: url
Contoh
Mendefinisikan lapangan untuk memasukkan URL:
Add your homepage: <input type="url" name="homepage">
Cobalah sendiri " Tip: Safari pada iPhone mengakui jenis masukan url, dan mengubah keyboard pada layar untuk mencocokkan (menambahkan opsi .com).
Jenis Input: week
Contoh
Mendefinisikan seminggu dan tahun kontrol (tanpa zona waktu):
Select a week: <input type="week" name="week_year">
Cobalah sendiri "