1、form屬性

表單內的從屬元素，可以寫在表單外部。可以通過指定元素的form屬性來聲明元素所屬表單。form的屬性值為表單的id。

1 <form id="testForm"> 2 <input type="text"> 3 </form> 4 <textarea form="testForm"></textarea>

?詳細學習內容可參看：HTML5新增的form屬性簡介

?

2、formaction屬性

給所有的提交按鈕增加formaction屬性，可以通過不同的按鈕將表單提交到不同的頁面。

1 <form id="testForm" action="serve.jsp"> 2 <input type="submit" name="s1" value="v1" formaciton="s1.jsp">提交到s1 3 <input type="submit" name="s2" value="v2" formaciton="s2.jsp">提交到s2 4 <input type="submit"> 5 </form>

瀏覽器支持：Internet Explorer 10, Firefox, Opera, Chrome, 和 Safari 支持 formaction 屬性。

?

3、formmethod屬性

formmethod 屬性定義發送表單數據到 action URL 的 HTTP 方法。

<form id="testForm" action="serve.jsp"><input type="submit" name="s1" value="v1" formaciton="s1.jsp" formmethod="post">提交到s1<input type="submit" name="s2" value="v2" formaciton="s2.jsp" formmethod="get">提交到s2 </form>

?

4、placeholder屬性

用于未輸入文本框顯示輸入提示。

1 <input type="text" placeholder="請輸入用戶名">

?

5、autofocus屬性

給文本框、選擇框或者按鈕添加autofocus屬性，可在頁面打開時自動獲得光標焦點。一個頁面上只能有一個具有autofocus屬性的控件。

1 <input type="text" autoforcus>

瀏覽器支持：Internet Explorer 10、Firefox、Opera、Chrome 和 Safari 支持 autofocus 屬性。

?

6、list屬性

為單行文本框特有屬性，配合datalist標簽使用。屬性值為datalist標簽的id。

1 text：<input type="text" list="testList"> 2 <datalist id="testList" style="display:none;"> 3 <option value="Good Morning">Good Morning</option> 4 <option value="Hello">Hello</option> 5 <option value="Good Afternoon">Good Afternoon</option> 6 </datalist>

瀏覽器支持：Internet Explorer 10、Firefox、Opera 和 Chrome 支持 list 屬性。

?

7、autocomplete屬性

規定輸入字段是否應該啟用自動完成功能。自動完成允許瀏覽器預測對字段的輸入。當用戶在字段開始鍵入時，瀏覽器基于之前鍵入過的值，應該顯示出在字段中填寫的選項。

text：<input type="text" name="textInput" list="testList" placeholder="輸入一句英文問候語" autocomplete="on"> <datalist id="testList" style="display:none;"><option value="Good Morning">Good Morning</option><option value="Hello">Hello</option><option value="Good Afternoon">Good Afternoon</option> </datalist>

詳細學習內容可參看：HTML5 autocomplete屬性、表單自動完成

?

8、input的新增type屬性種類

值	描述
url	定義用于輸入 URL 的字段。
time	定義用于輸入時間的控件（不帶時區）。
search	定義用于輸入搜索字符串的文本字段。
number	定義用于輸入數字的字段。
email	定義用于 e-mail 地址的字段。
date	定義 date 控件（包括年、月、日，不包括時間）。
datetime	定義 date 和 time 控件（包括年、月、日、時、分、秒、幾分之一秒，基于 UTC 時區）。
datetime-local	定義 date 和 time 控件（包括年、月、日、時、分、秒、幾分之一秒，不帶時區）。
month	定義 month 和 year 控件（不帶時區）。
week	定義 week 和 year 控件（不帶時區）。
range	定義用于精確值不重要的輸入數字的控件（比如 slider 控件）。
tel	定義用于輸入電話號碼的字段。
color	定義拾色器。

?

?

?

?

?

?

?

?

?

?

?

?

?

詳細學習內容可參看：HTML <input> type 屬性

更多專業前端知識，請上 【猿2048】www.mk2048.com 創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的HTML5新增属性学习笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。