HTML5新增屬性學習筆記

一、form屬性

表單內的從屬元素，能夠寫在表單外部。能夠經過指定元素的form屬性來聲明元素所屬表單。form的屬性值爲表單的id。

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

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

 

二、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 屬性。

 

三、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>

 

四、placeholder屬性

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

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

 

五、autofocus屬性

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

1 <input type="text" autoforcus>

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

 

六、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 十、Firefox、Opera 和 Chrome 支持 list 屬性。

 

七、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屬性、表單自動完成

 

八、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 屬性