Atribut bentuk baharu HTML

Atribut borang baharu HTML

teg <form> HTML5 telah menambah beberapa atribut baharu.

<form>Atribut baharu:

autolengkap

ubahsuai

<input> Atribut baharu:

autolengkap

autofokus

bentuk

formasi

>

formenctype

formmethod

formnovalidate

formtarget

tinggi dan lebar

senarai

min dan maks

berbilang

corak (regexp)

pemegang tempat

diperlukan

langkah

<form> / <input> 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 yang diisi dalam medan itu.

Petua: Atribut autolengkap mungkin dihidupkan dalam elemen borang tetapi dimatikan dalam elemen input.

Nota: autolengkap digunakan pada teg <borang> serta jenis teg <input> teks, carian, url, telefon, e-mel, kata laluan, pemilih tarikh, julat dan warna.

<form> atribut novalidate

Atribut boolean bagi atribut novalidate.

Atribut novalidate menentukan apabila menyerahkan borang Borang atau medan input tidak boleh disahkan.

<input> atribut autofokus

Atribut autofokus ialah atribut boolean

Atribut autofokus menentukan apabila halaman dimuatkan, domain mendapat fokus secara automatik.

<input> atribut borang

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.

<input> atribut formasi

Atribut formasi digunakan untuk menerangkan alamat URL penyerahan borang.

Pembentukan Atribut akan mengatasi atribut tindakan dalam elemen <form>

Nota: Atribut formasi digunakan untuk type="submit" dan type="image".

<input> atribut formenctype

atribut formenctype menerangkan pengekodan data yang diserahkan oleh borang kepada pelayan (hanya untuk borang method="post" dalam borang borang)

atribut formenctype Gantikan atribut enctype bagi elemen form.

Terutama: Atribut ini digunakan dengan type="submit" dan type="image".

<input> atribut formmethod

Atribut formmethod mentakrifkan cara borang diserahkan. Atribut

formmethod mengatasi atribut kaedah bagi elemen <form>

Nota: Atribut ini boleh digunakan dengan type="submit" dan type="image".

<input> atribut formnovalidate

Atribut novalidate ialah atribut boolean

atribut novalidate menerangkan <input> ; Elemen tidak perlu disahkan pada penyerahan borang.

Atribut formnovalidate akan mengatasi atribut novalidate bagi <form>

<input> atribut formtarget

Atribut formtarget menentukan nama atau kata kunci untuk menunjukkan paparan selepas menerima data penyerahan borang.

Atribut formtarget mengatasi atribut sasaran bagi elemen <form>

Nota: Atribut formtarget digunakan dengan type="submit" dan type="image".

<input> atribut ketinggian dan lebar

Atribut ketinggian dan lebar menentukan ketinggian dan lebar imej yang digunakan untuk jenis teg <input> imej.

Nota: Atribut ketinggian dan lebar hanya digunakan pada teg <input>

Petua: Imej biasanya menentukan kedua-dua atribut ketinggian dan lebar. Jika imej mempunyai ketinggian dan lebar yang ditetapkan, ruang yang diperlukan oleh imej akan dikekalkan apabila halaman dimuatkan. Tanpa atribut ini, penyemak imbas tidak mengetahui saiz imej dan tidak boleh menempah ruang yang sesuai. Imej akan menyebabkan kesan susun atur halaman berubah semasa proses pemuatan (walaupun imej telah dimuatkan).

<input> atribut senarai

atribut senarai menentukan senarai data medan input. datalist ialah senarai pilihan untuk medan input.

<input> atribut min dan maks

Atribut min, maks dan langkah digunakan untuk menentukan had untuk jenis input yang mengandungi nombor atau tarikh (kekangan).

Nota: Atribut min, maks dan langkah digunakan pada jenis teg <input>: pemilih tarikh, nombor dan julat.

<input> berbilang atribut

Atribut berbilang ialah atribut boolean

atribut berbilang menetapkan bahawa <input>. ; elemen boleh Pilih berbilang nilai.

Nota: Atribut berbilang digunakan pada jenis teg <input> : e-mel dan fail.

<input> atribut corak

atribut corak menerangkan ungkapan biasa yang digunakan untuk mengesahkan <input> ; nilai unsur.

Nota: Atribut corak digunakan pada jenis teg <input> berikut: teks, carian, url, tel, e-mel dan kata laluan.

Petua: Ia digunakan untuk menerangkan Mod atribut tajuk global.

<input> atribut pemegang tempat

Atribut pemegang tempat memberikan pembayang yang menerangkan nilai yang dijangkakan oleh medan input .

Gesaan ringkas dipaparkan pada medan input sebelum pengguna memasukkan nilai.

Nota: Atribut pemegang tempat digunakan pada jenis teg <input> teks, carian, url, telefon, e-mel dan kata laluan.

<input> atribut yang diperlukan

atribut yang diperlukan ialah atribut boolean

atribut yang diperlukan mesti dinyatakan sebelum penyerahan Isikan medan input (tidak boleh kosong).

Nota: Atribut yang diperlukan digunakan pada jenis teg <input> berikut: teks, carian, url, telefon, e-mel, kata laluan, pemilih tarikh, nombor, kotak pilihan, radio dan fail.

<input> 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 digunakan dengan jenis berikut: nombor, julat, tarikh, masa tarikh, tarikh-tempatan, bulan, masa dan minggu.


< . 🎜>

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> </head>

<body>
<!--
placeholder:用于在文本框未输入时提示作用
autofocus:用于控件自动获取焦点
-->
<input type="search" name="key" value="" results="s" placeholder="君乐宝" autofocus="true">
<input type="button" name="" value="搜索">
<!--
novalidate:在控件中加入了required、emial、url等验证后,如果想让这些验证失效,可以在表单中将novalidate设置为tyue
-->
<form action="upload.php" method="post" accept-charset="utf-8" id="form1" novalidate="true">
<br/><br/>
    <!--
required:必填
autocomplete:在网页的文本框中输入部分内容或者双节时,经常会看到在下面显示输入过的内容,
这就是html5的新特性:自动完成,如果不想使用此功能,将其设置为off即可
-->
    <input type="text" name="UserName" value="" required autocomplete="off">
   <br/><br/>
    <!--
multiple:在选择文件时,默认只能单选,加上这个属性后,则可以使用鼠标选中多个文件进行上传
   -->
    选择文件
    <input type="file" name="upload" value="" multiple="multiple">
    <br/><br/>
    <!--
list:这个属性要和datalist元素一起使用,指定此文本框的可选择项,另外其相较于select的优点在于还可以输入
   -->
    区号:
    <input type="text" name="age" value="" list="list1">
    <br/><br/>
    <datalist id="list1">
        <option value="0312">保定</option>
        <option value="0311">石家庄</option>
        <option value="010">北京</option>
        <option value="0313">唐山</option>
    </datalist>
<br/><br/>
    <!--
formaction:可以更改点击此按钮式提交到服务器的处理程序
formmethod:可以更改向服务器提交数据的方式
   -->
    <input type="submit" name="subsave" value="提交"><br/><br/>
    <input type="submit" name="subresset" value="更改" formaction="1.php" formmethod="get">
</form>
</body>
</html>


Meneruskan pembelajaran
||
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> </head> <body> <!-- placeholder:用于在文本框未输入时提示作用 autofocus:用于控件自动获取焦点 --> <input type="search" name="key" value="" results="s" placeholder="君乐宝" autofocus="true"> <input type="button" name="" value="搜索"> <!-- novalidate:在控件中加入了required、emial、url等验证后,如果想让这些验证失效,可以在表单中将novalidate设置为tyue --> <form action="upload.php" method="post" accept-charset="utf-8" id="form1" novalidate="true"> <br/><br/> <!-- required:必填 autocomplete:在网页的文本框中输入部分内容或者双节时,经常会看到在下面显示输入过的内容, 这就是html5的新特性:自动完成,如果不想使用此功能,将其设置为off即可 --> <input type="text" name="UserName" value="" required autocomplete="off"> <br/><br/> <!-- multiple:在选择文件时,默认只能单选,加上这个属性后,则可以使用鼠标选中多个文件进行上传 --> 选择文件 <input type="file" name="upload" value="" multiple="multiple"> <br/><br/> <!-- list:这个属性要和datalist元素一起使用,指定此文本框的可选择项,另外其相较于select的优点在于还可以输入 --> 区号: <input type="text" name="age" value="" list="list1"> <br/><br/> <datalist id="list1"> <option value="0312">保定</option> <option value="0311">石家庄</option> <option value="010">北京</option> <option value="0313">唐山</option> </datalist> <br/><br/> <!-- formaction:可以更改点击此按钮式提交到服务器的处理程序 formmethod:可以更改向服务器提交数据的方式 --> <input type="submit" name="subsave" value="提交"><br/><br/> <input type="submit" name="subresset" value="更改" formaction="1.php" formmethod="get"> </form> </body> </html>
  • Cadangan kursus
  • Muat turun perisian kursus