Jenis Input baharu HTML5
HTML5 mempunyai beberapa jenis input borang baharu. Ciri baharu ini menyediakan kawalan dan pengesahan input yang lebih baik.
Bab ini menyediakan pengenalan menyeluruh kepada jenis input baharu ini:
warna
tarikh
-
datetime
datetime-local
e-mel
bulan
nombor
julat
cari
tel
masa
url
minggu
Nota:Bukan semua penyemak imbas utama menyokong jenis input baharu, tetapi anda sudah boleh menggunakannya dalam semua penyemak imbas utama. Walaupun ia tidak disokong, ia masih boleh dipaparkan sebagai medan teks biasa.
Jenis input: warna
Jenis warna digunakan dalam medan input dan digunakan terutamanya untuk memilih warna, seperti ditunjukkan di bawah:
Contoh
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <form action="demo-form.php"> 选择你喜欢的颜色: <input type="color" name="favcolor"><br> <input type="submit"> </form> </body> </html>
Jalankan contoh»
Klik butang "Jalankan contoh" untuk melihat contoh dalam talian
Jenis input: tarikh
Jenis tarikh membolehkan anda memilih tarikh daripada pemilih tarikh.
Instance
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <form action="demo-form.php"> 生日: <input type="date" name="bday"> <input type="submit"> </form> </body> </html>
Run Instance»
Klik butang "Run Instance" untuk melihat contoh dalam talian
Jenis input: datetime
Jenis datetime membolehkan anda memilih tarikh (waktu UTC).
Instance
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <form action="demo-form.php"> 生日: <input type="date" name="bday"> <input type="submit"> </form> </body> </html>
Run Instance»
Klik butang "Run Instance" untuk melihat contoh dalam talian
Jenis input: datetime-local
datetime-local type membolehkan anda memilih tarikh dan masa (tanpa zon waktu).
Instance
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <form action="demo-form.php"> 生日 (日期和时间): <input type="datetime-local" name="bdaytime"> <input type="submit"> </form> </body> </html>
Run instance»
Klik butang "Run instance" untuk melihat instance dalam talian
Jenis input: e-mel
Jenis e-mel digunakan untuk medan input yang sepatutnya mengandungi alamat e-mel.
Instance
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <form action="demo-form.php"> E-mail: <input type="email" name="usremail"> <input type="submit"> </form> <p><b>注意:</b> Internet Explorer 9 及更早IE版本不支持type="email" 。</p> </body> </html>
Run Instance»
Klik butang "Run Instance" untuk melihat contoh dalam talian
Petua: Safari pada iPhone menyokong jenis input e-mel dan menukar papan kekunci skrin sentuh untuk menampungnya (menambah pilihan @ dan .com).
Jenis input: bulan
jenis bulan membolehkan anda memilih bulan.
Instance
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <form action="demo-form.php"> 生日 ( 月和年 ): <input type="month" name="bdaymonth"> <input type="submit"> </form> </body> </html>
Run instance »
Klik butang "Run Instance" untuk melihat instance dalam talian
Jenis input: nombor
Jenis nombor digunakan untuk medan input yang sepatutnya mengandungi nilai berangka.
Anda juga boleh menetapkan had pada nombor yang diterima:
Instance
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <form action="demo-form.php"> 数量 ( 1 到 5 之间): <input type="number" name="quantity" min="1" max="5"> <input type="submit"> </form> <p><b>注意:</b>Internet Explorer 9 及更早IE版本不支持 type="number" 。</p> </body> </html>
Run Instance»
Klik butang "Jalankan Instance" untuk melihat contoh dalam talian
Gunakan atribut berikut untuk menentukan had pada jenis angka:
maks- tentukan dibenarkan nilai maksimum
min - menentukan nilai minimum yang dibenarkan
langkah - menentukan selang nombor undang-undang (jika langkah="3", kemudian Nombor undang-undang ialah -3,0,3,6, dsb.)
nilai - menentukan nilai lalai
Cuba dengan semua yang layak atribut Cuba contoh
Jenis input: julat
jenis julat digunakan untuk medan input yang sepatutnya mengandungi nilai angka dalam julat tertentu.
Jenis julat dipaparkan sebagai peluncur.
Instance
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <form action="demo-form.php" method="get"> Points: <input type="range" name="points" min="1" max="10"> <input type="submit"> </form> <p><b>注意:</b> Internet Explorer 9 及更早IE版本不支持 type="range"。</p> </body> </html>
Run Instance»
Klik butang "Run Instance" untuk melihat contoh dalam talian
Sila gunakan atribut berikut untuk menentukan had pada jenis angka:
maks - tentukan nilai maksimum yang dibenarkan
min - menentukan Nilai minimum yang dibenarkan
langkah - menentukan selang nombor sah
nilai - menentukan nilai lalai
Jenis input: carian
jenis carian digunakan untuk medan carian, seperti carian tapak atau carian Google.
Instance
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <form action="demo-form.php" method="get"> Points: <input type="range" name="points" min="1" max="10"> <input type="submit"> </form> <p><b>注意:</b> Internet Explorer 9 及更早IE版本不支持 type="range"。</p> </body> </html>
Run Instance»
Klik butang "Run Instance" untuk melihat contoh dalam talian
Jenis input: tel
Instance
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <form action="demo-form.php"> 电话号码: <input type="tel" name="usrtel"><br> <input type="submit"> </form> </body> </html>
Jalankan instance»
Klik butang "Jalankan Contoh" untuk melihat tika dalam talian
Jenis input: masa
Jenis masa membolehkan anda memilih masa.
Instance
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <form action="demo-form.php"> 选择时间: <input type="time" name="usr_time"> <input type="submit"> </form> </body> </html>
Run Instance»
Klik butang "Run Instance" untuk melihat contoh dalam talian
Jenis input: url
jenis url digunakan untuk medan input yang sepatutnya mengandungi alamat URL.
Apabila menyerahkan borang, nilai medan url akan disahkan secara automatik.
Instance
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <form action="demo-form.php"> 添加你的主页: <input type="url" name="homepage"><br> <input type="submit"> </form> <p><b>注意:</b> Internet Explorer 9及更早IE版本不支持 type="url" 。</p> </body> </html>
Run instance »
Klik butang "Run Instance" untuk melihat instance dalam talian
Petua: Safari pada iPhone menyokong jenis input url dan menukar papan kekunci skrin sentuh untuk berfungsi dengannya (menambah pilihan .com).
Jenis input: minggu
Jenis minggu membolehkan anda memilih minggu dan tahun.
Instance
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <form action="demo-form.php"> 选择周: <input type="week" name="year_week"> <input type="submit"> </form> </body> </html>
Run Instance»
Klik butang "Run Instance" untuk melihat contoh dalam talian
HTML5 <input> tag
| 标签 | 描述 |
|---|---|
| <input> | 描述input输入器 |
