Jenis input 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: Tidak 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 yang ditunjukkan di bawah:

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
</head>
<body>
<form action=" " method="post">
    选择你喜欢的颜色: <input type="color" name="favcolor"><br>
    <input type="submit">
</form>
<?php
echo $_POST['favcolor'];
?>
</body>
</html>

Jalankan program dan cuba

Jenis input: tarikh

Jenis tarikh membolehkan anda memilih tarikh daripada tarikh pemilih tarikh.

<!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>

Jalankan program dan cuba

Jenis input: datetime

Jenis datetime membenarkan anda untuk memilih tarikh (waktu UTC).

Instance

Tentukan pengawal tarikh dan masa (masa tempatan):

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
</head>
<body>
<form action="demo-form.php">
    生日 (日期和时间): <input type="datetime" name="bdaytime">
    <input type="submit">
</form>
</body>
</html>

Jalankan atur cara untuk mencubanya

Jenis input : datetime-local

Jenis datetime-local membolehkan anda memilih tarikh dan masa (tanpa zon waktu).

Instance

Tentukan tarikh dan masa (tanpa zon masa):

<!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>

Jalankan program dan cuba

Jenis input: e-mel

Jenis e-mel digunakan untuk medan input yang sepatutnya mengandungi alamat e-mel.

Instance

Apabila menyerahkan borang, ia akan mengesahkan secara automatik sama ada nilai medan e-mel adalah sah dan sah:

<!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>
</body>
</html>

Jalankan program dan masukkan nilai undang-undang Cubalah dengan e-mel haram

Nota: Internet Explorer 9 dan versi IE terdahulu tidak menyokong type="email"

Jenis input: bulan

Jenis bulan membolehkan anda memilih bulan.

Contoh

Tentukan bulan dan tahun (tiada zon waktu):

<!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>

Jalankan program dan cuba

Jenis input: nombor

Jenis nombor digunakan untuk medan input yang sepatutnya mengandungi nilai berangka.

Anda juga boleh menetapkan had pada nombor yang diterima:

Contoh

Tentukan medan input angka (had):

<!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>
</body>
</html>

Jalankan program dan cuba

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 undang-undang (jika langkah="3", The nombor undang-undang ialah -3, 0, 3, 6, dsb.)
nilai - menentukan nilai lalai

Contoh

Contoh dengan semua atribut yang layak

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
</head>
<body>
<form action="demo_form.php" method="get">
    <input type="number" name="points" min="0" max="10" step="3" value="6">
    <input type="submit">
</form>
</body>
</html>

Jalankan program dan cuba

Jenis input: julat

jenis julat digunakan untuk medan input yang sepatutnya mengandungi nilai angka dalam julat tertentu.

Jenis julat dipaparkan sebagai peluncur.

Contoh

Tentukan nilai yang tidak perlu sangat tepat (serupa dengan kawalan gelangsar):

<!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>
</body>
</html>

Jalankan program dan cuba

Sila gunakan atribut berikut untuk menentukan had pada jenis angka:

maks - tentukan nilai maksimum yang dibenarkan

min - tentukan nilai minimum yang dibenarkan

langkah - tentukan selang nombor sah

nilai - tentukan nilai lalai

Jenis input: carian

jenis carian digunakan untuk carian medan, seperti carian tapak Atau carian Google.

Contoh

Tentukan medan carian (serupa dengan carian tapak atau carian Google):

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
</head>
<body>
<form action="demo-form.php">
    Search Google: <input type="search" name="googlesearch"><br>
    <input type="submit">
</form>
</body>
</html>

Jalankan program dan berikannya cuba

Jenis input: tel

Instance

Tentukan telefon input Medan nombor:

<!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 program dan cuba

Jenis input: masa

Jenis masa membolehkan anda memilih masa.

Contoh

Tentukan pengawal masa input (tanpa zon waktu):

<!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>

Jalankan atur cara dan cuba

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

Tentukan medan URL input:

<!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>
</body>
</html>

Jalankan program dan cuba

Jenis input: minggu

Jenis minggu membolehkan anda memilih minggu dan tahun.

Contoh

Tentukan minggu dan tahun (tiada zon waktu):

<form action="demo-form.php">
  选择周: <input type="week" name="year_week">
  <input type="submit">
</form>

Jalankan program dan cuba

HTML5 <input> tag

标签	描述
<input>	描述input输入器

Teg

Penerangan

< ;input>

Terangkan peranti input input

Nota

: Tidak semua penyemak imbas utama menyokong jenis input baharu, tetapi anda sudah boleh menggunakannya dalam semua penyemak imbas utama. digunakan dalam pelayar. Walaupun ia tidak disokong, ia masih boleh dipaparkan sebagai medan teks biasa. <🎜><🎜><🎜><🎜><🎜><🎜><🎜>

Meneruskan pembelajaran

fail baharu

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>php中文网(php.cn)</title> </head> <body> <form action="" method="post"> 选择你喜欢的颜色: <input type="color" name="favcolor"><br> <input type="submit"> </form> <?php echo $_POST['favcolor']; ?> </body> </html>

serahkan Tetapkan Semula Kod

Operasi automatik

Jenis input HTML5

peringkat rendahTutorial tapak web tiruan perusahaan Imperial CMS

peringkat rendahPemula dengan asas sifar dalam WordPress membina blog peribadi dan laman web korporat

peringkat rendahVideo arahan pembinaan tapak web berasaskan sifar CMS muktamad

peringkat rendahProjek hadapan-Shangyou [amalan komprehensif teknologi HTML/CSS/JS]

PertengahanVue3.0 daripada 0 untuk membina amalan projek sistem pengurusan belakang universal

peringkat rendahKursus front-end berasaskan sifar [pembelajaran lanjutan Vue dan aplikasi praktikal]

peringkat rendahTutorial bahagian hadapan WEB [HTML5+CSS3+JS]

peringkat rendahBermula dengan cepat dengan apipost

PertengahanTutorial praktikal Vue3+TypeScript amalan projek peringkat perusahaan

peringkat rendahMari kita bercakap secara ringkas tentang memulakan perniagaan dalam PHP

PertengahanProjek e-dagang VUE (pertempuran sebenar projek dua bahagian hadapan & belakang)

peringkat rendahAplikasi praktikal Apipost [api, antara muka, ujian automatik, olok-olok]