tutorial pengembangan web terbaru
 

HTML <input> type Attribute

<HTML <input> tag

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)
email 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

contoh

Jenis Input: button

OperaSafariChromeFirefoxInternet Explorer / Edge

Contoh

Sebuah tombol diklik, yang mengaktifkan JavaScript ketika diklik:

<input type="button" value="Click me" onclick="msg()">
Cobalah sendiri "

Jenis Input: checkbox

OperaSafariChromeFirefoxInternet Explorer / Edge

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

OperaSafariChromeFirefoxInternet Explorer / Edge

Contoh

Pilih warna dari color picker:

Select your favorite color: <input type="color" name="favcolor">
Cobalah sendiri "

Jenis Input: date

OperaSafariChromeFirefoxInternet Explorer / Edge

Contoh

Mendefinisikan kontrol tanggal:

Birthday: <input type="date" name="bday">
Cobalah sendiri "

Jenis Input: datetime

OperaSafariChromeFirefoxInternet Explorer / Edge

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

OperaSafariChromeFirefoxInternet Explorer / Edge

Contoh

Tentukan tanggal dan waktu kontrol (tanpa zona waktu):

Birthday (date and time): <input type="datetime-local" name="bdaytime">
Cobalah sendiri "

Jenis Input: email

OperaSafariChromeFirefoxInternet Explorer / Edge

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

OperaSafariChromeFirefoxInternet Explorer / Edge

Contoh

Tentukan bidang berkas-pilih dan "Browse ..." tombol (untuk upload file):

Select a file: <input type="file" name="img">
Cobalah sendiri "

Jenis Input: hidden

OperaSafariChromeFirefoxInternet Explorer / Edge

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

OperaSafariChromeFirefoxInternet Explorer / Edge

Contoh

Tentukan gambar sebagai tombol kirim:

<input type="image" src="img_submit.gif" alt="Submit">
Cobalah sendiri "

Jenis Input: month

OperaSafariChromeFirefoxInternet Explorer / Edge

Contoh

Tentukan bulan dan tahun kontrol (tanpa zona waktu):

Birthday (month and year): <input type="month" name="bdaymonth">
Cobalah sendiri "

Jenis Input: number

OperaSafariChromeFirefoxInternet Explorer / Edge

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

OperaSafariChromeFirefoxInternet Explorer / Edge

Contoh

Tentukan bidang sandi (karakter yang bertopeng)

<input type="password" name="pwd">
Cobalah sendiri "

Input type: radio

OperaSafariChromeFirefoxInternet Explorer / Edge

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

OperaSafariChromeFirefoxInternet Explorer / Edge

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

OperaSafariChromeFirefoxInternet Explorer / Edge

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

OperaSafariChromeFirefoxInternet Explorer / Edge

Contoh

Tentukan kolom pencarian (seperti pencarian situs, atau pencarian Google):

Search Google: <input type="search" name="googlesearch">
Cobalah sendiri "

Input type: submit

OperaSafariChromeFirefoxInternet Explorer / Edge

Contoh

Mendefinisikan tombol kirim:

<input type="submit">
Cobalah sendiri "

Jenis Input: tel

OperaSafariChromeFirefoxInternet Explorer / Edge

Contoh

Mendefinisikan lapangan untuk memasukkan nomor telepon:

Telephone: <input type="tel" name="usrtel">
Cobalah sendiri "

Input type: text

OperaSafariChromeFirefoxInternet Explorer / Edge

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

OperaSafariChromeFirefoxInternet Explorer / Edge

Contoh

Mendefinisikan kontrol untuk memasuki waktu (tidak ada zona waktu):

Select a time: <input type="time" name="usr_time">
Cobalah sendiri "

Jenis Input: url

OperaSafariChromeFirefoxInternet Explorer / Edge

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

OperaSafariChromeFirefoxInternet Explorer / Edge

Contoh

Mendefinisikan seminggu dan tahun kontrol (tanpa zona waktu):

Select a week: <input type="week" name="week_year">
Cobalah sendiri "

<HTML <input> tag