Jenis Masukan HTML5

Jenis Masukan HTML5 New

HTML5 memiliki beberapa jenis formulir masukan baru. Fitur-fitur baru memberikan kontrol masukan yang lebih baik dan validasi.

Bab ini menjelaskan tipe-tipe masukan baru yang komprehensif:

• warna
• tanggal
• datetime
• datetime-lokal
• email
• bulan
• jumlah
• jarak
• pencarian
• tel
• waktu
• url
• minggu

Catatan: Tidak semua browser utama mendukung jenis masukan baru, tetapi Anda sudah dapat menggunakannya di semua browser utama.Jika tidak didukung, masih bisa muncul sebagai bidang teks biasa.

Input Type: warna

warna yang digunakan dalam tipe field input terutama digunakan untuk memilih warna, sebagai berikut:

contoh

Pilih warna dari pemilih warna:

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

Coba »

Input Type: tanggal

Jenis tanggal memungkinkan Anda untuk memilih tanggal dari pemilih tanggal.

contoh

Tentukan waktu controller:

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

Coba »

Input Type: datetime

Jenis datetime memungkinkan Anda untuk memilih tanggal (waktu UTC).

contoh

Menentukan tanggal dan waktu controller (waktu setempat):

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

Coba »

Input Type: datetime-lokal

Jenis datetime-lokal memungkinkan Anda untuk memilih tanggal dan waktu (tidak ada zona waktu).

contoh

Menentukan tanggal dan waktu (tidak ada zona waktu):

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

Coba »

Input Type: email

Jenis email digunakan untuk field input harus berisi alamat e-mail.

contoh

Ketika formulir dikirimkan, maka secara otomatis akan memverifikasi apakah nilai domain email yang valid:

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

Coba »

Tip: iPhone di browser Safari mendukung jenis input email, dan dengan mengubah keyboard layar sentuh untuk mencocokkan (tambahkan @ dan .com pilihan).

Input Type: bulan

Jenis bulan memungkinkan Anda untuk memilih satu bulan.

contoh

bulan didefinisikan dan tahun (tidak ada zona waktu):

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

Coba »

Input Type: Nomor

jenis nomor yang digunakan untuk field input harus berisi nilai.

Anda juga dapat mengatur untuk menerima jumlah terbatas:

contoh

Mendefinisikan field input numerik (Terbatas):

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

Coba »

Menggunakan properti berikut untuk menentukan jenis digital Terbatas:

• Maksimum yang diizinkan oleh peraturan max-
• min - minimum diperbolehkan oleh peraturan
• Langkah - menentukan interval nomor hukum (jika langkah = "3", nomor hukum bisa -3,0,3,6, dll)
• nilai - nilai default yang ditentukan

Coba contoh dengan semua atribut yang didefinisikan mencoba

Input Type: kisaran

Jenis kisaran digunakan untuk field input harus berisi berbagai nilai-nilai numerik.

Jenis kisaran ditampilkan sebagai slider.

contoh

Anda tidak perlu mendefinisikan nilai sangat tepat (seperti kontrol slider):

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

Coba »

Silakan gunakan atribut berikut untuk menentukan jenis digital Terbatas:

• max - maksimum yang diizinkan oleh peraturan
• min - minimum diperbolehkan oleh peraturan
• Langkah - menentukan interval nomor hukum untuk
• nilai - nilai default yang ditentukan

Input Type: cari

Jenis pencarian untuk kolom pencarian, seperti pencarian situs atau pencarian Google.

contoh

Tentukan kolom pencarian (mirip dengan pencarian situs atau pencarian Google):

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

Coba »

Input Type: tel

contoh

Masukkan telepon field nomor didefinisikan:

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

Coba »

Input Type: waktu

Jenis waktu memungkinkan Anda untuk memilih waktu.

contoh

Mendefinisikan waktu masukan controller (tidak ada zona waktu):

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

Coba »

Input Type: url

Jenis url digunakan untuk field input harus berisi alamat URL.

Ketika formulir dikirimkan, maka secara otomatis akan memverifikasi nilai bidang url.

contoh

Tentukan URL field input:

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

Coba »

Tip: iPhone di browser Safari mendukung url jenis input, dan dengan mengubah keyboard layar sentuh untuk mencocokkan (menambahkan opsi .com).

Input Type: minggu

seminggu memungkinkan Anda untuk memilih jenis minggu dan tahun.

contoh

Definisi minggu dan tahun (tidak ada zona waktu):

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

Coba »

HTML5 <input> tag