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

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:

<form action="demo_form.asp" id="form1">
< label untuk="nama">Klik Saya&lt ;/label><input id="name" type="text"></input>
<input type="submit" value="Submit" />
</form> ;

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:

<form action="demo_form.asp">
Pilih warna kegemaran anda: <input type="color" name="favcolor" />
Hari Lahir: &lt ;input type="date" name="bday" />
Birthday (tarikh dan masa): <input type="datetime" name="bdaytime" />
Birthday ( tarikh dan masa) : <input type="datetime-local" name="bdaytime" />
Hari Lahir (bulan dan tahun): <input type="month" name="bdaymonth" />
Pilih masa: <input type="time" name="usr_time" />
Pilih minggu: <input type="week" name="week_year" />
Kuantiti ( antara 1 dan 5 ): <input type="number" name="quantity" min="1" max="5" />
Kuantiti(antara 1 dan 10): <input type="julat " name=" points" min="1" max="10" />
Cari di Google: <input type="search" name="googlesearch" />
Telefon: <input type ="tel" name="usrtel" />
Tambahkan halaman utama anda: <input type="url" name="homepage" />
E-mel: <input type="email" name="usremail " />
<input src="submitbutton.png" type="submit" />
</form>
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:

<fieldset>
<legend> Kegemaran </legend>
<p>
<label>
<input type="text" name="favorites" list= "options">
<datalist id="options">
<option value="A">
<option value="B">
<option value="C" >
</datalist>
</label>
</p>
</fieldset>

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:

<form action="demo_form.asp">
E-mel: <input type="email" name="email" autocomplete="on" />
Imej : <input type="image" src="img_submit.gif" alt="Submit" width="48" height="48"/>
Masukkan tarikh sebelum 1980-01-01:<input type="date" name="bday" max="1979-12-31">
Masukkan tarikh selepas 2000-01-01: <input type="date" name="bday" min="2000-01-02">
Kuantiti (antara 1 dan 5):<input type="number" name="quantity" min= "1" max="5" />
Pilih imej: <input type="file" name="img" multiple="multiple" />
Kod negara: <input type=" text" name="country_code" pattern="[A-Za-z]{3}" title="Tiga huruf kod negara" />
Nama Pertama: <input type="text" name="fname " placeholder="Nama pertama" />
Nama pengguna: <input type="text" name="usname" required="required" />
Nombor: <input type="number" name="points" step="3" />

<input type="submit" />
<input type ="submit" formaction="demo_admin.asp" value="Serah sebagai pentadbir" />
<input type="submit" formenctype="multipart/form-data" value="Serahkan sebagai Multipart/form- data" />
<input type="submit" formmethod="post" formaction="demo_post.asp" value="Serahkan menggunakan POST" />
<input type="submit" formnovalidate ="formnovalidate" value="Serahkan tanpa pengesahan" />
<input type="submit" formtarget="_blank" value="Serah ke tetingkap baharu" />
</form>
<form action="demo_form.asp" id="form1">
Nama pertama: <input type="text" name="fname" />
<input type= "submit" value="Submit" />
</form>
Nama keluarga: <input type="text" name="lname" form="form1" />

建议：虽然并不是所有的浏览器都支持全部的类型，但是还是体还是体类型，因为即使浏览器不支持，只不过是会退化成简单的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