013---HTML5新增元素

一、新增標籤

header、nav、footer、article、section、aside

講解：

1. datalist要與input連用，分別通過id和list屬性進行連線，達到一個提示作用，如淘寶的搜尋框，在搜尋框內輸入一個漢字，下面就會有好多提示。datalist是不顯示出來的。

<input type="text" value="請輸入內容" list="xiao" >

<datalist id="xiao">
	<option>小明</option>
	<option>小紅</option>
	<option>小胖</option>
	<option>大雄</option>
	<option>大雄的體重</option>
	<option>大雄的好朋友哆啦A夢</option>
</datalist>

效果如圖：

但是如果option內新增屬性value，並新增value的屬性值，那麼提醒的內容會主要顯示value的屬性值，option的內容則會次要顯示，如：在最後一個option新增value=“value值”，則效果為

但是如果value的屬性值為空，則不會顯示該項的任何內容。

2. fieldset

主要的功能數劃分一個區域。和legend搭配使用

<fieldset>
	<legend>使用者登入</legend>
	Uername: <input type="text"><br/>
	Password: <input type="password"><br/>
</fieldset>

它的長度是會隨著電腦頁面的改變而改變。

二、type新增的屬性

講解：

url是輸入網址格式。

search與普通的輸入框的區別：可以進行整個內容的刪除。

三、新增屬性

講解：

1. autocomplete 是自動儲存，當在輸入框輸入內容的時候，會自動記錄，當下次再輸入此內容的前幾個字的時候，會顯示。當你點選輸入框兩次，會顯示所有記錄的內容。

如：

<form action="">
	姓名：<input type="text" autocomplete="on" name="Username"/><br/>
	<input type="submit" value="提交" />

</form>

輸入一個內容並提交，結果是：

當點選輸入框兩次的時候，會顯示：

如果為了安全問題，屬性值可以是off，例如在公共場合。

2. accesskey是設定一個快捷鍵能夠使輸入框自動獲取焦點。如ctrl+s，當按下兩個鍵時，輸入框會自動獲取焦點，此時不需要人為點選輸入框輸入內容。