Atribut bentuk baharu HTML5

Teg <form> HTML5 dan <input> telah menambahkan beberapa atribut baharu.

<form>Atribut baharu: autolengkapkan novalidate

>< 🎜 <input> Atribut baharu: autolengkap
autofokus
bentuk
bentuk
formenctype
formmethod
formnovalidate
th <🎜sasaran
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 untuk mengisi medan tersebut.
Petua: Atribut autolengkap mungkin dihidupkan dalam elemen borang tetapi dimatikan dalam elemen input.
Nota: autolengkap berfungsi dengan <form> teg, serta jenis teg <input>: teks, carian, url, telefon, e-mel, kata laluan, pemilih tarikh, julat dan warna.
Contoh
Hidupkan autolengkap dalam bentuk HTML (satu medan input mematikan autolengkap):

<form action="demo-form.php" autolengkap =" on">

Nama keluarga: <input type="text" name="lname"><br>

E-mel: <input type="email " name ="email" autocomplete="off"><br>

<input type="submit"> ;/form> Borang atau medan input tidak sepatutnya disahkan semasa menghantar borang. ContohTidak perlu mengesahkan data borang yang diserahkan

E-mel: <input type="email" name="user_email"> 🎜 >

</form>

<input> atribut autofokus
Atribut autofokus ialah atribut boolean
Atribut autofokus menentukan bahawa medan mendapat fokus secara automatik halaman dimuatkan.
Contoh
Biar medan input "Nama pertama" difokuskan secara automatik apabila halaman dimuatkan:

Nama pertama:<input type="text" name ="fname" autofocus>

<input> atribut form
atribut borang menentukan yang mana kepunyaan medan input atau berbilang bentuk.
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):

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

< form action=" demo-form.php">

Nama pertama: <input type="text" name="fname"><br> 🎜>

atribut formenctype mengatasi atribut enctype elemen borang. Terutamanya: Atribut ini digunakan dengan type="submit" dan type="image". Contoh

<form action="demo-post_enctype.php" method="post">

Nama pertama: <input type="text" name="fname"><br>

<input type="submit" value= "Serah">

<input type="submit" formenctype="multipart/form-data"

value="Submit sebagai Multipart/form-data">

</form>

<input> atribut kaedah bentuk
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".
Contoh
Takrifkan semula contoh kaedah penyerahan borang:

<form action="demo-form.php" method="get">

Nama pertama: <input type="text" name="fname"><br>

Nama keluarga: < ;input type="text" name="lname"><br>

<input type="submit" value="Submit"> > <input type="submit" formmethod="post" formaction="demo-post.php"

value="Hantar menggunakan POST"> ;

</form>

<input> atribut novalidate

Atribut formnovalidate akan mengatasi atribut novalidate bagi elemen <form>
Nota: Atribut formnovalidate digunakan bersama dengan type="submit
Contoh
Borang dengan dua butang hantar (dengan dan tanpa pengesahan) :




<form action="demo-form.php">

E -mel: < ;input type="email" name="userid"><br>

<input type="submit" value="Submit">< ;br>

<input type="submit" formnovalidate value="Serahkan tanpa pengesahan">

</form>

<input> atribut formtarget Atribut formtarget menentukan nama atau kata kunci untuk menunjukkan paparan selepas data penyerahan borang diterima.
Atribut formtarget mengatasi atribut sasaran elemen <form>.
Nota: Atribut formtarget digunakan dengan type="submit" dan type="image".
Contoh
Dua serah butang Borang, dipaparkan dalam tetingkap berbeza:

<form action="demo-form.php">

Nama pertama: <input type="text" name="fname"><br>

Nama akhir: <input type="text" name=" lname"><br>

<input type="submit" value="Serah seperti biasa">

< ;input type="submit" formtarget="_blank"

value="Submit to a new window"> form>

<input> atribut tinggi dan lebar

atribut ketinggian dan lebar tentukan <input> untuk jenis imej ; Tinggi 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). Contoh mentakrifkan butang hantar imej, menggunakan atribut ketinggian dan lebar:




<input type="image" src="img_submit.gif " alt="Hantar" lebar="48" height="48">

< <input> atribut senarai

Atribut senarai menentukan senarai data medan input. datalist ialah senarai pilihan untuk medan input. OperaSafariChromeFirefoxInternet ExplorerInstance Nilai <input> dipratakrif dalam <datalist>:



<<.input list=" browsers 🎜>

<datalist id="browsers"> > <nilai pilihan="Firefox">

<nilai pilihan="Chrome"> > <nilai pilihan="Opera">

<nilai pilihan="Safari"> >

<input> atribut min dan maks

atribut min, max dan step digunakan untuk menentukan had (kekangan) untuk jenis input yang mengandungi nombor atau tarikh. Nota: Atribut min, maks dan langkah digunakan pada jenis teg <input>: pemilih tarikh, nombor dan julat.

<!doctype html>
<html>
    <head> 
    <meta charset="utf-8"> 
    <title>php.cn</title> 
</head>
    
<body>
  <form action="demo-form.php" id="form1">
      First name: <input type="text" name="fname"><br>
      <input type="submit" value="提交">
  </form>
   <p> "Last name" 字段没有在form表单之内，但它也是form表单的一部分。</p>
    Last name: <input type="text" name="lname" form="form1">
   <p><b>注意:</b> IE不支持form属性</p>
</body>
</html>

<!doctype html>
<html>
    <head> 
    <meta charset="utf-8"> 
    <title>php.cn</title> 
</head>
    
<body>
  <form action="" method="get">
        <input list="browsers" name="browser">
        <datalist id="browsers">
         <option value="Internet Explorer">
         <option value="Firefox">
         <option value="Chrome">
         <option value="Opera">
         <option value="Safari">
        </datalist>
        <input type="submit">
    </form>
    <p><strong>注意:</strong> Internet Explorer 9（更早IE版本），Safari不支持 datalist 标签。</p>
</body>
</html>