HTML5的表單新屬性(擴展)


新的 form 屬性: autocomplete、 novalidate

 autocomplete控件是指用戶在文本框輸入前幾個字母或是漢字的時候, autocomplete控件就能從存放數據的文本或是數據庫里將所有以這些字母開頭的數據提示給用戶,供用戶選擇,提供方便。

autocomplete 適用於 <form> 標簽,以及以下類型的 <input> 標簽:text, search, url, telephone, email, password, datepickers, range 以及 color。

<form action="" method="post" enctype="" autocomplete="on">
<label for="user">用戶名:</label>
<input type="text" name="user" id="user" >
<input type="submit" name="" value="提交">

</form>

 

 novalidate 屬性的一個boolean 屬性.

novalidate 屬性規定在提交表單時不應該驗證 form 或 input 域。

表單01 type類型email用了novalidate屬性,提交表單時不需要驗證則提交成功

表單02 type類型email沒用了novalidate屬性,提交表單時需要驗證。

<!--表單01 用了novalidate屬性-->
<form name="form01" action="" method="post" enctype="" novalidate>
E-mail01: <input type="email" name="email">
<input type="submit" name="" value="提交">
</form>

<!--表單02 沒用-->
<form name="form02" action="" method="post" enctype="">
E-mail02: <input type="email" name="email">
<input type="submit" name="" value="提交">
</form> 

 

 

 

新的 input 屬性:placeholder、autofocus、required等

placeholder屬性提供一種提示(hint),描述輸入域所期待的值。

簡短的提示在用戶輸入值前會顯示在輸入域上。如圖,灰色字體的請輸入用戶名...

placeholder 屬性適用於以下類型的 <input> 標簽:text, search, url, telephone, email 以及 password。

autofocus屬性光標自動聚焦,當打開網頁時光標就會自動聚焦到事先設定好autofocus屬性的輸入框哪里,如圖,用戶名的那個 |

<form action="" method="post" enctype="" >
<label for="user">用戶名:</label>
<input type="text" name="user" id="user" placeholder="請輸入用戶名..." autofocus ><br>
<label for="password">密 碼:</label>
<input type="password" name="password" id="password" > <input type="submit" name="" value="提交">
</form> 

 

required 屬性是一個 boolean 屬性.

required 屬性規定必須在提交之前填寫輸入域(不能為空)。

required 屬性適用於以下類型的 <input> 標簽:text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。

<form action="" method="post" enctype="" >
<label for="user">用戶名:</label>
<input type="text" name="user" id="user" required><br>
<label for="password">密 碼:</label>
<input type="password" name="password" id="password" > <input type="submit" name="" value="提交">
</form> 

html5新的 input 屬性還有

autocomplete、

form、

form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)、

height 和 width、

list 、

min, max 和 step、

multiple、

pattern (regexp) 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM