Rumah hujung hadapan web Tutorial H5 Sambungan elemen HTML5 HTML (Bahagian 2) - elemen Borang yang dipertingkatkan patut diberi perhatian_html5 kemahiran tutorial

Sambungan elemen HTML5 HTML (Bahagian 2) - elemen Borang yang dipertingkatkan patut diberi perhatian_html5 kemahiran tutorial

May 16, 2016 pm 03:49 PM
form bentuk

Antara elemen dipertingkatkan HTML5, yang paling patut diberi perhatian ialah elemen bentuk. Dalam HTML5, borang telah dirombak dengan ketara dan beberapa fungsi yang sebelum ini memerlukan pengekodan JavaScript kini boleh dilaksanakan dengan mudah tanpa pengekodan. Sebelum kita memulakan perbincangan, sesuatu yang perlu diberi perhatian:

Dalam HTML5, kawalan borang boleh berada di luar satu atau lebih borang yang dimilikinya. Oleh itu, kawalan borang seperti set medan, label dan input telah menambah atribut borang untuk mengenal pasti borang yang menjadi milik kawalan borang.

dalam HTML5 :

1. Elemen borang itu sendiri menambah dua atribut baharu: autolengkap dan novalidate. Atribut autolengkap digunakan untuk mendayakan fungsi "senarai cadangan lungsur turun", dan atribut novalidate digunakan untuk mematikan fungsi pengesahan borang, yang boleh berguna semasa ujian.

2. Elemen set medan menambah tiga atribut baharu: lumpuhkan, nama dan borang. Atribut disable digunakan untuk melumpuhkan set medan, atribut nama digunakan untuk menetapkan nama set medan, dan nilai atribut borang ialah ID bagi satu atau lebih borang yang dimiliki oleh set medan tersebut set medan diletakkan di luar borang, anda mesti Tetapkan atribut borang teg set medan supaya set medan boleh dikaitkan dengan betul dengan satu atau lebih borang.

3 Selain atribut for, elemen label hanya menambah atribut form. Apa yang patut disebut di sini ialah atribut for, yang saya tidak perasan sebelum ini. Atribut for digunakan untuk menentukan kawalan borang yang dilampirkan pada label, supaya apabila label diklik, kawalan borang yang dilampirkan akan mendapat fokus, contohnya:

Salin kod
Kod adalah seperti berikut:


< label untuk="nama">Klik Saya< ;/label>


Klik "Klik Saya", dan kotak input berikut akan mendapat tumpuan.

4. Elemen input memperkenalkan beberapa jenis dan atribut baharu untuk meningkatkan kebolehgunaan borang. Jenis input baharu ini sangat berguna untuk menyusun dan mengkategorikan data, tetapi malangnya tiada penyemak imbas menyokong kesemuanya dengan baik.
Selain butang asal, teks, hantar, kotak semak, radio, pilih, jenis kata laluan, HTML5 telah menambah jenis input baharu berikut:

Warna: warna
Pelbagai tarikh: tarikh, tarikh masa, tarikh-tempatan, bulan, minggu, masa
E-mel: e-mel
Nombor: nombor
Julat: julat
Cari: carian
Telefon : tel
Jenis URL: url

Anda boleh menjalankan contoh berikut untuk menyemak sokongan penyemak imbas yang berbeza:

Salin kod
Kod tersebut ialah seperti berikut:


Pilih warna kegemaran anda:
Hari Lahir: < ;input type="date" name="bday" />
Birthday (tarikh dan masa):
Birthday ( tarikh dan masa) :
Hari Lahir (bulan dan tahun):
Pilih masa:
Pilih minggu:
Kuantiti ( antara 1 dan 5 ):
Kuantiti(antara 1 dan 10):
Cari di Google:
Telefon:
Tambahkan halaman utama anda:
E-mel:


Berikut ialah atribut input yang baru ditambah:
autolengkap: Paparkan maklumat yang dimasukkan sebelum ini secara automatik, mengambil nilai "hidup" atau "mati". Berkenaan dengan teks, carian, url, telefon, e-mel, kata laluan, pemilih tarikh, julat dan jenis warna.

autofokus: Mendapat fokus secara automatik selepas halaman dimuatkan.
borang: Tentukan borang yang menjadi milik input, yang boleh berbilang.
formaction: Tentukan halaman (URL) atau fail untuk memproses input ini selepas borang diserahkan. ​
formenctype: Tentukan cara mengekod data selepas borang diserahkan.
kaedah borang: Menentukan kaedah HTTP untuk menghantar data borang, yang akan mengatasi kaedah HTTP bagi borang yang sepadan.
formnovalidate: Tidak menyemak kesahihan data sebelum penyerahan.
formtarget: Tentukan tempat untuk memaparkan kandungan respons selepas borang diserahkan.
tinggi, lebar: panjang dan lebar kotak input, hanya terpakai untuk jenis imej. ​
maks, min: Nilai maksimum dan minimum nilai input. Sesuai untuk jenis nombor, julat dan tarikh yang bermakna. ​
berbilang: Sama ada membenarkan berbilang nilai dimasukkan, terpakai pada e-mel dan jenis fail.
corak: Menentukan ungkapan biasa untuk mengesahkan nilai input, sesuai untuk teks, carian, url, tel, e-mel, kata laluan.
pemegang tempat: Maklumat segera sebelum input, berkenaan dengan teks, carian, url, tel, e-mel, kata laluan.
diperlukan: Sama ada ia adalah item yang diperlukan Jika item yang diperlukan tidak diisi, borang tidak boleh diserahkan kepada teks, carian, url, tel, e-mel, kata laluan, pemilih tarikh. nombor, kotak semak, radio dan jenis fail.
langkah: Masukkan nilai langkah untuk pertumbuhan automatik, terpakai pada jenis nombor, julat, tarikh, tarikh, tarikh-tempatan, bulan, masa dan minggu.
senarai: Senarai calon item input, yang perlu digunakan bersama dengan elemen senarai data Atribut senarai boleh digunakan pada jenis ini: teks, carian, url, tel, e-mel, tarikh, nombor, julat dan warna berfungsi pada FireFox. Lihat contoh kecil:

Salin kod
Kodnya adalah seperti berikut:


Kegemaran






Yang berikut contoh percubaan untuk menggunakan setiap Properties, anda boleh menjalankannya dalam penyemak imbas yang berbeza untuk melihat kesan sebenar:

Salin kod
Kodnya adalah seperti berikut:


E-mel:
Imej :
Masukkan tarikh sebelum 1980-01-01:
Masukkan tarikh selepas 2000-01-01:
Kuantiti (antara 1 dan 5):
Pilih imej:
Kod negara:
Nama Pertama:
Nama pengguna:
Nombor:









Nama pertama:


Nama keluarga:

建议:虽然并不是所有的浏览器都支持全部的类型,但是还是体还是体类型,因为即使浏览器不支持,只不过是会退化成简单的text输入框而已。

实用参考:
W3C的教程:http://www.w3schools.com/html5/default.asp
HTML5官方指导:http://dev.w3.org/html5/html-author/
相当不错的一个指导网站:http://html5doctor.com/ 🎜>HTML5中文教程:http://www.html5china.com/
一个不错的前端博客:http://www.pjhome.net/default=.asp? 1
JS操作表单的相关知识:http://www.cnblogs.com/xugang/archive/2010/08/12/1798005.html

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

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Bagaimana untuk melaksanakan lompat halaman selepas penyerahan borang PHP Bagaimana untuk melaksanakan lompat halaman selepas penyerahan borang PHP Aug 12, 2023 am 11:30 AM

Cara melaksanakan lompat halaman selepas penyerahan borang PHP [Pengenalan] Dalam pembangunan web, penyerahan borang adalah keperluan fungsian biasa. Selepas pengguna mengisi borang dan mengklik butang hantar, data borang biasanya perlu dihantar ke pelayan untuk diproses, dan pengguna dialihkan ke halaman lain selepas diproses. Artikel ini akan memperkenalkan cara menggunakan PHP untuk melaksanakan lompatan halaman selepas penyerahan borang. [Langkah 1: Borang HTML] Pertama, kita perlu menulis halaman yang mengandungi borang dalam halaman HTML supaya pengguna boleh mengisi data yang perlu dihantar.

Bagaimana untuk menggunakan JavaScript untuk merealisasikan fungsi gesaan automatik kandungan kotak input borang? Bagaimana untuk menggunakan JavaScript untuk merealisasikan fungsi gesaan automatik kandungan kotak input borang? Oct 20, 2023 pm 04:01 PM

Bagaimana untuk menggunakan JavaScript untuk merealisasikan fungsi gesaan automatik kandungan kotak input borang? Pengenalan: Fungsi gesaan automatik kandungan kotak input borang adalah sangat biasa dalam aplikasi web Ia boleh membantu pengguna memasukkan kandungan yang betul dengan cepat. Artikel ini akan memperkenalkan cara menggunakan JavaScript untuk mencapai fungsi ini dan menyediakan contoh kod khusus. Cipta struktur HTML Mula-mula, kita perlu mencipta struktur HTML yang mengandungi kotak input dan senarai cadangan automatik. Anda boleh menggunakan kod berikut: &lt;!DOCTYP

Cara mengendalikan pengurusan hak pengguna dalam borang PHP Cara mengendalikan pengurusan hak pengguna dalam borang PHP Aug 10, 2023 pm 01:06 PM

Cara mengendalikan pengurusan hak pengguna dalam bentuk PHP Dengan pembangunan berterusan aplikasi web, pengurusan hak pengguna adalah salah satu fungsi penting. Pengurusan hak pengguna boleh mengawal hak operasi pengguna dalam aplikasi dan memastikan keselamatan dan kesahihan data. Dalam bentuk PHP, pengurusan hak pengguna boleh dilaksanakan melalui beberapa kod mudah. Artikel ini akan memperkenalkan cara mengendalikan pengurusan hak pengguna dalam borang PHP dan memberikan contoh kod yang sepadan. 1. Definisi dan pengurusan peranan pengguna Pertama sekali, mentakrif dan mengurus peranan pengguna adalah soal hak pengguna.

Bagaimana untuk menggunakan JavaScript untuk melaksanakan pengesahan masa nyata kandungan kotak input borang? Bagaimana untuk menggunakan JavaScript untuk melaksanakan pengesahan masa nyata kandungan kotak input borang? Oct 18, 2023 am 08:47 AM

Bagaimana untuk menggunakan JavaScript untuk melaksanakan pengesahan masa nyata kandungan kotak input borang? Dalam kebanyakan aplikasi web, borang ialah cara interaksi yang paling biasa antara pengguna dan sistem. Walau bagaimanapun, kandungan yang dimasukkan oleh pengguna selalunya perlu disahkan untuk memastikan ketepatan dan kesempurnaan data. Dalam artikel ini, kami akan mempelajari cara menggunakan JavaScript untuk melaksanakan pengesahan masa nyata kandungan kotak input borang dan memberikan contoh kod khusus. Mencipta borang Mula-mula kita perlu mencipta jadual ringkas dalam HTML

Cara menggunakan HTML, CSS dan jQuery untuk merealisasikan fungsi lanjutan untuk menyimpan borang secara automatik Cara menggunakan HTML, CSS dan jQuery untuk merealisasikan fungsi lanjutan untuk menyimpan borang secara automatik Oct 28, 2023 am 08:20 AM

Cara menggunakan HTML, CSS dan jQuery untuk melaksanakan fungsi lanjutan untuk menyimpan borang secara automatik adalah salah satu elemen yang paling biasa dalam aplikasi web moden. Apabila pengguna memasukkan data borang, bagaimana untuk melaksanakan fungsi penjimatan automatik bukan sahaja dapat meningkatkan pengalaman pengguna, tetapi juga memastikan keselamatan data. Artikel ini akan memperkenalkan cara menggunakan HTML, CSS dan jQuery untuk melaksanakan fungsi penjimatan automatik borang, dan melampirkan contoh kod tertentu. 1. Struktur bentuk HTML Mari kita buat satu bentuk HTML yang mudah.

Pemprosesan borang PHP: pertanyaan dan penapisan data borang Pemprosesan borang PHP: pertanyaan dan penapisan data borang Aug 07, 2023 pm 06:17 PM

Pemprosesan borang PHP: pertanyaan dan penapisan data borang Pengenalan Dalam pembangunan Web, borang adalah cara interaksi yang penting Pengguna boleh menghantar data kepada pelayan melalui borang untuk pemprosesan selanjutnya. Artikel ini akan memperkenalkan cara menggunakan PHP untuk memproses pertanyaan dan fungsi penapis data borang. Reka bentuk dan penyerahan borang Pertama, kita perlu mereka bentuk borang yang merangkumi fungsi pertanyaan dan penapis. Elemen bentuk biasa termasuk kotak input, senarai juntai bawah, butang radio, kotak semak, dsb., yang boleh direka bentuk mengikut keperluan khusus. Apabila pengguna menyerahkan borang, data akan dihantar ke POS

Petua untuk menggunakan kelas borang Laravel: cara untuk meningkatkan kecekapan Petua untuk menggunakan kelas borang Laravel: cara untuk meningkatkan kecekapan Mar 11, 2024 pm 12:51 PM

Borang adalah bahagian penting dalam menulis laman web atau aplikasi. Laravel, sebagai rangka kerja PHP yang popular, menyediakan kelas bentuk yang kaya dan berkuasa, menjadikan pemprosesan borang lebih mudah dan lebih cekap. Artikel ini akan memperkenalkan beberapa petua tentang menggunakan kelas borang Laravel untuk membantu anda meningkatkan kecekapan pembangunan. Yang berikut menerangkan secara terperinci melalui contoh kod tertentu. Mencipta borang Untuk mencipta borang dalam Laravel, anda perlu menulis borang HTML yang sepadan dalam paparan terlebih dahulu. Apabila bekerja dengan borang, anda boleh menggunakan Laravel

Cara membuat borang dengan gesaan terapung menggunakan HTML, CSS dan jQuery Cara membuat borang dengan gesaan terapung menggunakan HTML, CSS dan jQuery Oct 25, 2023 am 10:48 AM

Cara mencipta borang dengan gesaan terapung menggunakan HTML, CSS dan jQuery Dalam reka bentuk web moden, borang merupakan salah satu komponen yang amat diperlukan. Untuk meningkatkan pengalaman pengguna, kami selalunya perlu menambahkan beberapa gesaan terapung pada borang untuk membimbing pengguna mengisi borang dengan betul. Artikel ini akan memperkenalkan cara menggunakan HTML, CSS dan jQuery untuk mencipta borang dengan gesaan terapung dan memberikan contoh kod khusus. Pertama, kita perlu membuat borang HTML. Dalam borang kita perlu menambah beberapa medan input, dan

See all articles