Atribut bentuk baharu HTML5

Atribut borang baharu HTML5

<form> autolengkap

<input> Atribut baharu:

autolengkap

autofokus
< . >
< ;form> / <input> atribut autolengkap
atribut 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.
Instance
Buka dalam bentuk HTML autolengkap (medan input mematikan autolengkap):
```
<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
</head>
<body>
<form action="" autocomplete="on">
    姓名:<input type="text" name="fname"><br/>
    留言<input type="text" name="content"><br/>
    E-mail: <input type="email" name="email" autocomplete="off"><br>
    <input type="submit">
</form>
<p>填写并提交表单，然后重新刷新页面查看如何自动填充内容。</p>
<p>注意 form的 autocomplete属性为  "on"（开），但是e-mail自动为“off”（关）。</p>
</body>
</html>
```
Jalankan program dan cuba
Petua: Dalam sesetengah penyemak imbas, anda mungkin perlu mendayakan autolengkap untuk atribut ini berkuat kuasa.
<form> atribut novalidate
Atribut boolean bagi atribut novalidate.
novalidate Property menyatakan bahawa borang atau medan input tidak boleh disahkan semasa menyerahkan borang.
Instance
Tidak perlu mengesahkan data borang yang diserahkan
```
<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
</head>
<body>
<form action="" novalidate>
    E-mail: <input type="email" name="user_email">
    <input type="submit">
</form>
<p><strong>注意</strong>在 Safari 和 Internet Explorer 9 及之前的版本中不支持 novalidate 属性。</p>
</body>
</html>
```
Jalankan program untuk mencubanya
<input> atribut autofokus
Atribut autofokus ialah atribut boolean.
Atribut autofokus menentukan bahawa domain diperoleh secara automatik apabila halaman dimuatkan fokus.
Contoh
Biar medan input "Mesej" difokuskan secara automatik apabila halaman dimuatkan:
```
<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
</head>
<body>
<form action="">
    姓名: <input type="text" name="fname" ><br>
    留言: <input type="text" name="content" autofocus><br>
    <input type="submit">
</form>
<p><strong>注意：</strong> Internet Explorer 9及更早IE版本不支持input标签的 autofocus 属性。</p>
</body>
</html>
```
Jalankan program untuk mencuba
Anda boleh menukar autofokus kepada medan input nama dan bandingkan hasil kedua-dua larian untuk melihat perbezaan
<input> ; atribut form
Atribut borang menentukan satu atau lebih borang yang dimiliki oleh 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):
```
<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
</head>
<body>
<form action="" id="form1">
    姓名: <input type="text" name="fname"><br>
    <input type="submit" value="Submit">
</form>
<p> "留言" 字段没有在form表单之内，但它也是form表单的一部分。</p>
留言: <input type="text" name="lname" form="form1">
</body>
</html>
```
Jalankan program dan cuba
Nota: IE tidak menyokong atribut borang
<input> atribut formasi
Atribut formasi digunakan untuk menerangkan alamat URL penyerahan borang.
Atribut formasi akan mengatasi atribut tindakan dalam <form> elemen.
Nota: Atribut formasi digunakan untuk type="submit" dan type="image".
Instance
Borang HTML berikut mengandungi butang Hantar dengan dua alamat berbeza:
```
<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
</head>
<body>
<form action="demo.php">
    姓名: <input type="text" name="fname"><br>
    密码: <input type="text" name="lname"><br>
    <input type="submit" value="提交"><br>
    <input type="submit" formaction="admin.php" value="提交">
</form>
</body>
</html>
```
Salah satu program di atas akan diserahkan ke halaman demo.php, dan satu lagi akan diserahkan kepada pentadbir .php page
< ;input> atribut formenctype
formenctype atribut menerangkan pengekodan data yang diserahkan oleh borang kepada pelayan (hanya untuk borang method="post" dalam borang borang)
Atribut formenctype mengatasi atribut enctype elemen borang.
Utama: Atribut ini digunakan dengan type="submit" dan type="image".
Instance
Butang hantar pertama mempunyai pengekodan lalai untuk menghantar data borang, dan butang hantar kedua menghantar data borang dalam "berbilang/borang -data" Hantar data borang dalam format pengekodan:
```
<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
</head>
<body>
<form action="" method="post">
    name: <input type="text" name="fname"><br>
    <input type="submit" value="提交">
    <input type="submit" formenctype="multipart/form-data" value="以 Multipart/form-data 提交">
</form>
</body>
</html>
```
Jalankan atur cara untuk mencubanya
<input> atribut formmethod
formmethod atribut mentakrifkan cara borang diserahkan. Atribut
formmethod mengatasi atribut kaedah bagi elemen <form>
Nota: Atribut ini boleh digunakan dengan type="submit" dan type="image".
Instance
Tentukan semula kaedah penyerahan borang Contoh:
```
<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
</head>
<body>


<form action="" method="get">
     姓名: <input type="text" name="fname"><br>
    密码: <input type="text" name="lname"><br>
    <input type="submit" value="提交">
    <input type="submit" formmethod="post" formaction="demo-post.php" value="使用 POST 提交">
</form>

</body>
</html>
```
Kod di atas dihantar ke halaman dalam mod dapatkan. Salah satunya ialah mentakrifkan semula kaedah penyerahan menggunakan kaedah borang dan menyerahkannya ke halaman emo-post.php dalam mod siaran
<input> atribut formnovalidate < Atribut 🎜>
novalidate ialah atribut boolean
Atribut novalidate menerangkan bahawa elemen <input>
Atribut formnovalidate akan mengatasi atribut novalidate bagi <form> 🎜>
Contoh
Borang dengan dua butang hantar (dengan dan tanpa pengesahan):
```
<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
</head>
<body>
<form action="">
    E-mail: <input type="email" name="userid"><br>
    <input type="submit" value="提交"><br>
    <input type="submit" formnovalidate="formnovalidate" value="不验证提交">
</form>
</body>
</html>
```
Jalankan program untuk mencuba
<input> atribut formtarget
Atribut formtarget menentukan nama atau kata kunci untuk menunjukkan borang data penyerahan selepas menerimanya dipaparkan
Atribut formtarget mengatasi atribut sasaran bagi elemen <form> serahkan" dan taip="imej" Gunakan .
Instance
Borang dengan dua butang hantar, dipaparkan dalam tetingkap berbeza:
```
<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
</head>
<body>
<form action=" ">
     作者姓名: <input type="text" name="fname"><br>
     书本名: <input type="text" name="lname"><br>
    <input type="submit" value="正常提交">
    <input type="submit" formtarget="_blank" value="提交到一个新的页面上">
</form>
</body>
</html>
```
Jalankan program dan cuba
<input> atribut ketinggian dan lebar
atribut ketinggian dan lebar ditentukan untuk imej taip <input> Ketinggian imej dan lebar label.
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).
Instance
mentakrifkan butang hantar imej, menggunakan atribut ketinggian dan lebar:
```
<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
</head>
<body>
<form action="">
    First name: <input type="text" name="fname"><br>
    Last name: <input type="text" name="lname"><br>
    <input type="image" src="http://img3.imgtn.bdimg.com/it/u=4163745010,2599120287&fm=21&gp=0.jpg"  alt="Submit" width="100" height="80">
</form>
</body>
</html>
```
Jalankan program untuk mencuba ia keluar
<input> atribut senarai
atribut senarai menentukan senarai data medan input. datalist ialah senarai pilihan untuk medan input.
Instance
Nilai<input> dipratentukan dalam <datalist>:
```
<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
</head>
<body>
<form action="" method="post">
    <input list="browsers" name="">
    <datalist id="browsers">
        <option value="Internet Explorer">
        <option value="Firefox">
        <option value="Chrome">
        <option value="Opera">
        <option value="Safari">
    </datalist>
    <input type="submit">
</form>
</body>
</html>
```
Jalankan program untuk mencubanya
<input> atribut min dan maks
atribut min, max dan step digunakan untuk input yang mengandungi nombor atau tarikh Jenis nyatakan had (kekangan).
Nota: Atribut min, maks dan langkah digunakan pada jenis teg <input>: pemilih tarikh, nombor dan julat.
Contoh
<input> tetapan nilai minimum dan maksimum elemen:
```
<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
</head>
<body>
<form action="">
    输入 1980-01-01 之前的日期:
    <input type="date" name="bday" max="1979-12-31"><br>
    输入 2000-01-01 之后的日期:
    <input type="date" name="bday" min="2000-01-02"><br>
    数量 (在1和5之间):
    <input type="number" name="quantity" min="1" max="5"><br>
    <input type="submit">
</form>
</body>
</html>
```
Jalankan program dan cuba
Nota: Internet Explorer 9 dan versi IE terdahulu serta Firefox tidak menyokong atribut maks dan min bagi teg input.
Nota: Atribut maks dan min tidak menyokong input tarikh dan masa dalam Internet Explorer 10 dan IE 10 tidak menyokong jenis input ini.
<input> atribut berbilang
atribut berbilang ialah atribut boolean.
spesifikasi atribut berbilang< Berbilang nilai boleh dipilih dalam elemen ;input>
Nota: Atribut berbilang digunakan pada jenis teg <input> : e-mel dan fail.
Instance
Muat naik berbilang fail:
```
<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
</head>
<body>
<form action="">
    选择图片: <input type="file" name="img" multiple>
    <input type="submit">
</form>
<p>尝试选取一张或者多种图片。</p>
</body>
</html>
```
Jalankan atur cara dan cuba

<input> atribut corak
Atribut corak menerangkan ungkapan biasa yang digunakan untuk mengesahkan nilai elemen <input> .
Nota: Atribut corak digunakan pada jenis teg <input> berikut: teks, carian, url, tel, e-mel dan kata laluan.
Petua: digunakan untuk Hartanah tajuk global menerangkan corak.
Petua: Anda boleh belajar tentang ungkapan biasa dalam tutorial JavaScript kami
Contoh
Contoh berikut menunjukkan medan teks yang hanya boleh mengandungi tiga huruf (tidak termasuk nombor dan aksara khas):
<!DOCTYPE html> <html> <head>     <meta charset="UTF-8">     <title>php中文网(php.cn)</title> </head> <body> <form action="">     请输入3位字母: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">     <input type="submit"> </form> </body> </html>
Jalankan program untuk mencubanya
<input> 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 <input>: teks, carian, url, telefon, e-mel dan kata laluan.
Instance
Input teks gesaan medan:
<!DOCTYPE html> <html> <head>     <meta charset="UTF-8">     <title>php中文网(php.cn)</title> </head> <body> <form action="">     姓名：<input type="text" name="fname" placeholder="请输入你的姓名"><br>     密码：<input type="text" name="lname" placeholder="请输入你的密码"><br>     <input type="submit" value="提交"> </form> </body> </html>
Jalankan program untuk mencubanya
<input> atribut yang diperlukan
atribut yang diperlukan ialah atribut boolean
atribut yang diperlukan menentukan bahawa medan input mesti diisi sebelum penyerahan (tidak boleh batal).
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.
Instance
Medan input yang tidak boleh kosong:
<!DOCTYPE html> <html> <head>     <meta charset="UTF-8">     <title>php中文网(php.cn)</title> </head> <body> <form action="">     姓名: <input type="text" name="usrname" required>     <input type="submit"> </form> </body> </html>
Jalankan program dan serahkan tanpa mengisinya untuk melihat

<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 dibuat dengan atribut maks dan min Nilai julat.
Nota: Atribut langkah digunakan dengan jenis jenis berikut: nombor, julat, tarikh, tarikh, tarikh-tempatan, bulan, masa dan minggu .
Contoh
Langkah input ditentukan sebagai 3:
<!DOCTYPE html> <html> <head>     <meta charset="UTF-8">     <title>php中文网(php.cn)</title> </head> <body> <form action="">     <input type="number" name="points" step="3">     <input type="submit"> </form> </body> </html>
Jalankan program dan cuba

Nota: Internet Explorer 9 dan versi IE yang lebih awal, atau Firefox tidak menyokong atribut langkah teg input.
HTML5 <input> tag
标签
标签描述
  <form> 定义一个form表单
  <input> 定义一个 input 域
描述
  <form>   <input> 定义一个; input 域

<🎜>

Meneruskan pembelajaran

||

fail baharu

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>php中文网(php.cn)</title> </head> <body> <form action="" autocomplete="on"> 姓名:<input type="text" name="fname"><br/> 留言<input type="text" name="content"><br/> E-mail: <input type="email" name="email" autocomplete="off"><br> <input type="submit"> </form> <p>填写并提交表单，然后重新刷新页面查看如何自动填充内容。</p> <p>注意 form的 autocomplete属性为 "on"（开），但是e-mail自动为“off”（关）。</p> </body> </html>

serahkan Tetapkan Semula Kod
Operasi automatik

Atribut bentuk baharu HTML5

peringkat rendahTutorial tapak web tiruan perusahaan Imperial CMS

peringkat rendahPemula dengan asas sifar dalam WordPress membina blog peribadi dan laman web korporat

peringkat rendahVideo arahan pembinaan tapak web berasaskan sifar CMS muktamad

peringkat rendahProjek hadapan-Shangyou [amalan komprehensif teknologi HTML/CSS/JS]

PertengahanVue3.0 daripada 0 untuk membina amalan projek sistem pengurusan belakang universal

peringkat rendahKursus front-end berasaskan sifar [pembelajaran lanjutan Vue dan aplikasi praktikal]

peringkat rendahTutorial bahagian hadapan WEB [HTML5+CSS3+JS]

peringkat rendahBermula dengan cepat dengan apipost

PertengahanTutorial praktikal Vue3+TypeScript amalan projek peringkat perusahaan

peringkat rendahMari kita bercakap secara ringkas tentang memulakan perniagaan dalam PHP

PertengahanProjek e-dagang VUE (pertempuran sebenar projek dua bahagian hadapan & belakang)

peringkat rendahAplikasi praktikal Apipost [api, antara muka, ujian automatik, olok-olok]