HTML input type atribut

HTML <input> tag

Dukungan Browser

Semua browser utama mendukung jenis atribut. Namun, tidak semua browser utama mendukung semua jenis input yang berbeda dapat bekerja di semua browser utama.

Lihat di bawah untuk setiap jenis masukan dari dukungan browser.

Definisi dan Penggunaan

<Input> Atribut type menentukan jenis elemen yang ingin ditampilkan.

Jenis default adalah: text.

Catatan: Atribut ini tidak diperlukan, tapi kami pikir Anda harus selalu menggunakannya.

Perbedaan antara HTML 4.01 dan HTML5

Jenis masukan berikut baru dalam jenis HTML5: warna, tanggal, datetime, datetime-lokal, bulan, minggu, waktu, email, nomor, jangkauan, pencarian, tel dan url.

tatabahasa

Nilai properti

contoh

Input Type: tombol

contoh

Definisi tombol diklik, ketika pengguna mengklik tombol untuk memulai periode JavaScript:

<input type="button" value="点我" onclick="msg()">

Coba »

Input Type: checkbox

contoh

Kotak memungkinkan pengguna untuk memilih satu atau lebih pilihan di sejumlah pilihan:

<input type="checkbox" name="vehicle[]" value="Bike"> 我有一辆自行车<br>
<input type="checkbox" name="vehicle[]" value="Car"> 我有一辆小轿车<br>
<input type="checkbox" name="vehicle[]" value="Boat"> 我有一艘船<br>

Coba »

Input Type: warna

contoh

Pilih warna dari pemilih warna:

选择你喜欢的颜色: <input type="color" name="favcolor"><br>

Coba »

Jenis Input: tanggal

contoh

Ditetapkan tanggal kontrol:

生日: <input type="date" name="bday">

Coba »

Input Type: datetime

contoh

Tentukan tanggal dan waktu kontrol (dengan zona waktu):

生日 (日期和时间): <input type="datetime" name="bdaytime">

Coba »

Input Type: datetime-lokal

contoh

Tentukan tanggal dan waktu kontrol (tanpa zona waktu):

生日 (日期和时间):<input type="datetime-local" name="bdaytime">

Coba »

Input Type: email

contoh

Bidang Definisi untuk alamat e-mail (bila formulir dikirimkan secara otomatis ke nilai bidang email untuk memverifikasi):

E-mail: <input type="email" name="usremail">

Coba »

Tip: Browser iPhoneSafari akan mengenali jenis masukan email, kemudian mengubah keyboard layar sentuh untuk beradaptasi dengan itu (menambah @ dan .com pilihan).

Jenis Input: File

contoh

Untuk menentukan bidang pemilihan file dan tombol "Browse ...", untuk file upload:

选择一个文件: <input type="file" name="img">

Coba »

Input Type: tersembunyi

contoh

Definisi field tersembunyi, field tersembunyi yang tidak terlihat oleh pengguna. field tersembunyi sering menyimpan nilai default, atau mengubah nilai-nilai mereka dengan JavaScript:

<input type="hidden" name="country" value="Norway">

Coba »

Input Type: image

contoh

gambar khusus sebagai tombol submit:

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

Coba »

Input Type: bulan

contoh

Tentukan bulan dan tahun kontrol (tanpa zona waktu):

生日 ( 月和年 ): <input type="month" name="bdaymonth">

Coba »

Input Type: Nomor

contoh

Masukkan nomor untuk menentukan kolom untuk (Anda dapat mengatur nomor batas yang dapat diterima):

数量 ( 1 到 5 之间): <input type="number" name="quantity" min="1" max="5">

Coba »

Silakan gunakan atribut berikut untuk menentukan batasan:

• MAX - maksimum yang diizinkan oleh peraturan.
• min - minimum diperbolehkan oleh peraturan.
• LANGKAH - persyaratan untuk interval digital legal.
• nilai The - default yang ditentukan.

Masukan Type: password

contoh

Mendefinisikan field kata sandi (password field karakter bertopeng):

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

Coba »

Input Type: radio

contoh

Hal ini memungkinkan pengguna untuk memilih opsi di sejumlah pilihan:

<input type="radio" name="gender" value="male"> Male<br>
<input type="radio" name="gender" value="女"> 女

Coba »

Input Type: kisaran

contoh

Ini mendefinisikan nilai yang tepat tidak penting masukan kontrol digital (seperti kontrol slider). Anda juga dapat menetapkan batas angka diterima:

<input type="range" name="points" min="1" max="10">

Coba »

Silakan gunakan atribut berikut untuk menentukan batasan:

• MAX - maksimum yang diizinkan oleh peraturan.
• min - minimum diperbolehkan oleh peraturan.
• LANGKAH - persyaratan untuk interval digital legal.
• nilai The - default yang ditentukan.

Jenis Input: ulang

contoh

Tentukan tombol reset (reset semua bentuk adalah default):

<input type="reset">

Coba »

Tip: Hati-hati menggunakan tombol reset!Untuk pengguna, sengaja mengklik tombol Reset adalah hal yang sangat menjengkelkan.

Input Type: cari

contoh

Ditetapkan kolom pencarian (misalnya, pencarian situs atau pencarian Google, dll):

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

Coba »

Input Type: submit

contoh

Tentukan tombol submit:

<input type="submit">

Coba »

Input Type: tel

contoh

bidang yang ditetapkan untuk memasukkan nomor telepon:

电话号码: <input type="tel" name="usrtel">

Coba »

Input Type: text

contoh

Pengguna dapat menentukan dua untuk memasukkan satu baris teks dalam kolom teks:

First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>

Coba »

Input Type: waktu

contoh

Masukkan waktu definisi kontrol digunakan (tanpa zona waktu):

选择时间: <input type="time" name="usr_time">

Coba »

Input Type: url

contoh

Mendefinisikan input field dari URL:

添加你的主页: <input type="url" name="homepage">

Coba »

Tip: Browser iPhoneSafari akan mengenali jenis masukan url, kemudian mengubah keyboard layar sentuh untuk beradaptasi dengan itu (menambahkan opsi .com).

Jenis Input: minggu

contoh

Definisi minggu dan kontrol tahun (tanpa zona waktu):

选择周: <input type="week" name="week_year">

Coba »