cari

Rumah  >  Artikel  >  hujung hadapan web  >  Susun atribut biasa dan atribut baharu borang dalam kemahiran tutorial HTML5_html5

Susun atribut biasa dan atribut baharu borang dalam kemahiran tutorial HTML5_html5

WBOY
WBOYasal
2016-05-16 15:46:001667semak imbas

Atribut borang baharu HTML5
teg

HTML5 telah menambah beberapa atribut baharu.
Atribut baharu:
autolengkap
novalidate
Atribut baharu:
autolengkap
autofokus
borang
formaction
formenctype
formmethod
formnovalidate
th
sasaran
lebar
🎜>senarai
min dan maks
berbilang
corak (regexp)
pemegang tempat
diperlukan
langkah


/ atribut autolengkap
Atribut autolengkap menentukan bahawa medan borang atau input harus mempunyai fungsi autolengkap.
Apabila pengguna mula menaip dalam medan autolengkap, penyemak imbas harus memaparkan pilihan untuk mengisi medan tersebut.
Petua: Atribut autolengkap mungkin dihidupkan dalam elemen borang tetapi dimatikan dalam elemen input.
Nota: autolengkap berfungsi dengan teg, serta jenis teg : teks, carian, url, telefon, e-mel, kata laluan, pemilih tarikh, julat dan warna.
Contoh
Hidupkan autolengkap dalam bentuk HTML (matikan autolengkap untuk medan input):

Kod XML/HTMLSalin kandungan ke papan keratan
  1. <borang tindakan="demo-form.php " autolengkap="hidup">
  2. Nama pertama:<input taip= "teks" nama="fname"><br>
  3. Nama keluarga: <input taip= "teks" nama="lname"><br>
  4. E-mel: <input taip="e-mel" nama="e-mel" autolengkap="mati"><br>
  5. <masukan taip="serahkan" >
  6. borang>


atribut novalidate
Atribut boolean bagi atribut novalidate. .
Contoh
Tidak perlu mengesahkan data borang yang diserahkan

Kod XML/HTMLSalin kandungan ke papan keratan
  1. <borang tindakan="demo-form.php " novalidate>
  2. E-mel: <input taip="e-mel" nama="e-mel_pengguna">
  3. <masukan taip="serahkan" >
  4. borang>


atribut autofokus
Atribut autofokus ialah atribut boolean
Atribut autofokus menentukan bahawa medan secara automatik mendapat fokus apabila halaman dimuatkan.
Contoh
Biarkan medan input "Nama pertama" memfokus secara automatik apabila halaman dimuatkan:

Kod XML/HTMLSalin kandungan ke papan keratan
  1. Nama pertama:<input taip= "teks" nama="fname" autofokus>


atribut form
Atribut borang menentukan satu atau lebih borang yang menjadi milik medan input.
Petua: Jika anda perlu merujuk lebih daripada satu borang, gunakan senarai yang diasingkan ruang.
Instance
Medan input yang terletak di luar borang merujuk kepada borang HTML (borang input masih sebahagian daripada borang):

atribut formasi
Atribut formasi digunakan untuk menerangkan alamat URL penyerahan borang.
Atribut formasi akan mengatasi atribut tindakan dalam elemen .
Nota: Atribut formasi digunakan untuk type="submit " and type=" image".
Contoh
Borang HTML berikut mengandungi dua butang hantar dengan alamat yang berbeza:

Kod XML/HTMLSalin kandungan ke papan keratan
  1. <borang tindakan="demo-form.php ">  
  2.   Nama pertama: <input taip= "teks" nama="fname"><br>  
  3.   Nama keluarga: <input taip= "teks" nama="lname"><br>  
  4.   <masukan taip="serahkan"  nilai="Serah"><br>  
  5.   <masukan taip="serahkan"  formasi="demo-admin.php"  
  6.   nilai="Serahkan sebagai pentadbir">  
  7. borang>  


jenis formenctype性覆盖 bentuk 元素的 enctype 属性。
主要: 该属性与 type="submit" 和 type="image" 配合使用。实例
第一个提交按钮已默认编码发默认编码发默认编码发发逕，一个交按钮以 "berbilang bahagian/data-bentuk" 编码格式发送表单数据:



Kod XML/HTML
复制内容到剪贴板
  1. <borang tindakan="demo-post_enctype.php " kaedah="siaran">  
  2.   Nama pertama: <input taip= "teks" nama="fname"><br>  
  3.   <masukan taip="serahkan"  nilai="Serah">  
  4.   <masukan taip="serahkan"  formenctype="multipart/form-data"  
  5.   nilai="Serahkan sebagai Multipart/form-data">  
  6. borang>  


formmethod 属性
formmethod 属性定义了表单提交的方式。
formmethod 属性覆盖了 元素的的method 属性。
注意: 该属性可以与 type="submit" 和 type="image" 配合使用。
实例
实例
实例式实例:

Kod XML/HTML复制内容到剪贴板
  1. <borang tindakan="demo-form.php " kaedah="dapat">  
  2.   Nama pertama: <input taip= "teks" nama="fname"><br>  
  3.   Nama keluarga: <input taip= "teks" nama="lname"><br>  
  4.   <masukan taip="serahkan"  nilai="Serah">  
  5.   <masukan taip="serahkan"  kaedah bentuk="siaran" formasi="demo-post.php"  
  6.   nilai="Serahkan menggunakan POST">  
  7. borang>  


formnovalidate 属性
novalidate 属性是一个 boolean 属性.
novalidate属性描述了 元素在表单提交时无需被验证。
formnovalidate 属性会覆盖 元素的novalidate属性.
注意: formnovalidate 属性与type="submit一起使用
实例
两个提交挡用交验证 ):

Kod XML/HTML复制内容到剪贴板
  1. <borang tindakan="demo-form.php ">  
  2.   E-mel: <input taip="e-mel" nama="userid"><br>  
  3.   <masukan taip="serahkan"  nilai="Serah"><br>  
  4.   <masukan taip="serahkan"  formnovalidate nilai="Serahkan tanpa pengesahan"> >
  5. borang>  
formtarget 属性

formtarget 属性指定一个名称或一个关键字来指明表单提交数据接收后的展示。
formtarget 属性覆盖 & lt; form & gt; 元素的 sasaran 属性. 注意: formtarget 属性与type="submit" 和 type="image"配合使用.
实例
两个提交按钮的表单, 在不同窗口中:>

Kod XML/HTML

复制内容到剪贴板
  1. <borang tindakan="demo-form.php ">  
  2.   Nama pertama: <input taip= "teks" nama="fname"><br>  
  3.   Nama keluarga: <input taip= "teks" nama="lname"><br>  
  4.   <masukan taip="serahkan"  nilai="Serahkan seperti biasa">  
  5.   <masukan taip="serahkan"  formtarget="_blank"  
  6.   nilai="Serah ke tetingkap baharu">> 
  7. borang>  


tinggi 和 lebar 属性
tinggi 和 lebar 属性规定用于 imej 类型的 标签的图像高度和宽度。注意: tinggi 和 lebar 属性只适用于 imej 类型的 标签。
提示:图像通常会同时指定高度和宽度属性。如果图像设置高度度和宽度属性。如果图像设置高度度和，在加载页时会被保留。如果没有这些属性， 浏览器不知道图像的大小，并不能预留 适当的空间。图片在加载过程中会使页面布局效果改变 （尾变变 （尾变管例
定义了一个图像提交按钮, 使用了 tinggi 和 lebar 属性:


Kod XML/HTML
复制内容到剪贴板
  1. <input taip="imej"  src="img_submit.gif" alt="Serah" lebar="48" tinggi="48">  
senaraikan 属性

senarai 属性规定输入域的 datalist。datalist 是输入域的选项列表。
OperaSafariChromeFirefile



Kod XML/HTML

复制内容到剪贴板
  1. <input senarai="pelayar" >  
  2.   
  3. <datalist id="pelayar" >  
  4.   <pilihan nilai="Internet Explorer ">  
  5.   <pilihan nilai="Firefox" >  
  6.   <pilihan nilai="Chrome" >  
  7.   <pilihan nilai="Opera" >  
  8.   <pilihan nilai="Safari" >  
  9. datalist>  

min 和 max 属性
min、max 和 step 属性用于为包含数字或日期的 input 类型规定限定 min:和 langkah 属性适用于以下类型的 < input> 标签：pemilih tarikh、nombor 以及 julat。
实例

Kod XML/HTML复制内容到剪贴板
  1. <input> Tetapan nilai minimum dan maksimum elemen:
  2. Masukkan tarikh sebelum 1980-01-01:
  3. <input taip="tarikh" nama="hari jadi" maks="1979-12-31">
  5. Masukkan tarikh selepas 2000-01-01:
  6. <input taip="tarikh" nama="hari jadi" min="2000-01-02">
  8. Kuantiti (antara 1 dan 5):
  9. <masukan taip="nombor" nama="kuantiti" min="1" maks="5">


atribut berbilang
Atribut berbilang ialah atribut boolean
atribut berbilang menentukan bahawa berbilang nilai boleh dipilih dalam unsur.
Nota: Atribut berbilang digunakan pada jenis teg : e-mel dan fail.
Contoh
Muat naik berbilang fail:

Kod XML/HTMLSalin kandungan ke papan keratan
  1. Pilih imej: <input taip= "fail" nama="img" berbilang>


atribut corak
Atribut corak menerangkan ungkapan biasa yang digunakan untuk mengesahkan nilai elemen
Nota: Atribut corak digunakan pada jenis teg berikut: teks, carian, url, tel, e-mel dan kata laluan.
Petua: Ia digunakan dengan atribut tajuk global untuk menerangkan corak .
Contoh
Contoh berikut menunjukkan medan teks yang hanya boleh mengandungi tiga huruf (tidak termasuk nombor dan aksara khas):

Kod XML/HTMLSalin kandungan ke papan keratan
  1. Kod negara: <input taip= "teks" nama="kod_negara" corak="[A-Za-z]{3}" tajuk=" Tiga huruf kod negara">


atribut pemegang tempat
Atribut pemegang tempat memberikan pembayang yang menerangkan nilai jangkaan medan input.
Gesaan ringkas dipaparkan pada medan input sebelum pengguna memasukkan nilai.
Nota: Atribut pemegang tempat digunakan pada jenis teg : teks, carian, url, telefon, e-mel dan kata laluan.
Contoh
teks gesaan medan input t:

Kod XML/HTMLSalin kandungan ke papan keratan
  1. <input taip="teks" nama="fname" pemegang tempat="Nama pertama"> 


atribut yang diperlukan
atribut yang diperlukan ialah atribut boolean
atribut yang diperlukan menyatakan bahawa medan input mesti diisi sebelum penyerahan (tidak boleh kosong).
Nota: Atribut yang diperlukan digunakan pada jenis teg berikut: teks, carian, url, telefon, e-mel, kata laluan, pemilih tarikh, nombor, kotak pilihan, radio dan fail.
Instance
Medan input yang tidak boleh kosong:

Kod XML/HTMLSalin kandungan ke papan keratan
  1. Nama pengguna: <input taip=<🎜 🎜>"teks" nama="usname" diperlukan>


atribut step
Atribut step menentukan selang nombor undang-undang untuk medan input. Jika step="3", nombor undang-undang ialah -3, 0, 3, 6, dsb.
Petua: Atribut langkah boleh digunakan dengan atribut maks dan min untuk mencipta nilai julat.
Nota: Atribut langkah adalah sama seperti Jenis berikut digunakan bersama: nombor, julat, tarikh, tarikh, tarikh-tempatan, bulan, masa dan minggu.
Instance
menentukan bahawa langkah input ialah 3:

Kod XML/HTMLSalin kandungan ke papan keratan
  1. <input taip="nombor" nama="mata" langkah="3"> 


elemen
HTML5 juga memperkenalkan elemen baharu

Anda juga boleh menggunakan atribut for untuk menentukan hubungan antara elemen output dan elemen lain dalam dokumen yang mempengaruhi pengiraan (contohnya, sebagai sumber input atau parameter). Nilai atribut for ialah senarai ID elemen lain yang dipisahkan ruang.

atribut pemegang tempat
HTML5 memperkenalkan atribut baharu yang dipanggil pemegang tempat. Atribut pada elemen dan