Rumah > hujung hadapan web > Soal Jawab bahagian hadapan > Apakah jenis elemen bentuk baharu dalam html5

Apakah jenis elemen bentuk baharu dalam html5

青灯夜游
Lepaskan: 2021-12-17 16:18:00
asal
9613 orang telah melayarinya

Jenis elemen borang baharu dalam HTML5 ialah: 1. jenis e-mel; 3. jenis nombor; ); 6. jenis carian; 7. jenis warna;

Apakah jenis elemen bentuk baharu dalam html5

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi HTML5, komputer Dell G3.

Borang HTML digunakan untuk mengumpul pelbagai jenis input pengguna Dalam borang HTML, elemen adalah elemen bentuk yang paling penting. Elemen mempunyai banyak bentuk Menurut jenis atribut yang berbeza, jenis jenis dalam bentuk HTML asal termasuk teks, kata laluan, radio, serah, dll. Dalam HTML5 baharu, terdapat berbilang jenis input borang baharu . Ciri baharu ini menyediakan kawalan dan pengesahan input yang lebih baik.

Artikel ini akan memperkenalkan jenis input elemen bentuk baharu berikut:

  • e-mel
  • url
  • nombor
  • julat
  • Pemilih tarikh (tarikh, bulan, minggu, masa, tarikh, tarikh-tempatan)
  • cari
  • warna
  • tel

jenis e-mel

Apabila atribut jenis ditetapkan kepada e-mel, apabila menyerahkan borang, ia akan mengesahkan secara automatik sama ada nilai medan e-mel mematuhi format standard e-mel dan anda tidak lagi perlu menggunakan ungkapan biasa sendiri saya pergi untuk mengesahkan format e-mel.

Contoh

Email:<input type="email" name="useremail" />
Salin selepas log masuk

jenis url

Apabila atribut jenis ditetapkan kepada url, apabila borang diserahkan, ia akan mengesahkan secara automatik sama ada nilai medan url mematuhi format standard url .

Contoh

Linkpage:<input type="url" name="link_url" />
Salin selepas log masuk

Jenis nombor

Apabila atribut jenis ditetapkan kepada nombor, ia akan menyemak secara automatik sama ada kandungan input ialah jenis angka input Had nombor kotak.

Contoh

Number:<input type="number" name="user_num" min="1" max="10" />
Salin selepas log masuk

Digunakan untuk atribut terhad secara berangka:

属性描述
max规定允许的最大值
min规定允许的最小值
step规定合法的数字间隔(如果 step=“3”,则合法的数是 -3,0,3,6 等)
value规定默认值
disabled规定输入字段是禁用的
maxlength规定输入字段的最大字符长度
pattern规定用于验证输入字段的模式
readonly规定输入字段的值无法修改
required规定输入字段的值是必须的
size规定输入字段的可见字符

jenis julat

jenis julat digunakan untuk nombor yang sepatutnya mengandungi nombor tertentu julat Medan input untuk nilai. Jenis julat dipaparkan sebagai peluncur. Anda juga boleh menetapkan had pada nombor yang diterima.

Contoh

<input type="range" name="user_range" min="1" max="10" />
Salin selepas log masuk

Atribut yang digunakan untuk kelayakan nombor adalah sama dengan empat jenis nombor pertama.

Pemilih Tarikh Jenis pemilih tarikh

digunakan untuk memilih tarikh dan masa.

Contoh

Date:<input type="date" name="user_date" />
Salin selepas log masuk

Jenis input untuk memilih tarikh dan masa:

  • tarikh pilih hari, bulan, tahun
  • bulan pilih Bulan, tahun
  • minggu Pilih minggu dan tahun
  • masa Pilih masa (jam dan minit)
  • masa tarikh Pilih masa, hari, bulan, tahun (waktu UTC, zon waktu)
  • datetime-local memilih masa, hari, bulan, tahun (waktu tempatan)

jenis carian

digunakan untuk medan carian, seperti carian tapak atau carian Google ( Medan carian berkelakuan seperti medan teks biasa).

Contoh

Search Google:<input type="search" name="googlesearch">
Salin selepas log masuk

jenis warna

Apabila atribut jenis ditetapkan kepada warna, ia akan menyemak secara automatik sama ada kandungan input dalam format warna.

Contoh

Select your favorite color:<input type="color" name="favcolor">
Salin selepas log masuk

jenis tel

Apabila atribut jenis ditetapkan kepada tel, ia akan menyemak secara automatik sama ada kandungan input berada dalam format nombor telefon.

Contoh

Telephone:<input type="tel" name="usrtel">
Salin selepas log masuk

Pengesyoran berkaitan: "tutorial video html"

Atas ialah kandungan terperinci Apakah jenis elemen bentuk baharu dalam html5. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan