H5表單新特性 新的頁面元素

1、表單新屬性

1.form：在form表單下面的子元素裏面使用，在以前的版本里面子元素必須包括在<form></form>裏面，如今能夠寫在任何位置。但必須保證form的值和主form的id值同樣。以下

<from id="testform"   stye="display:none">
			<label id="label" for="text-name">姓名：</label>
			<input id="text-name">
			<input type="button" id="btnValidate" value="驗證" onclick="Validate()">
			
		</from>
		
		<input type="text" form="testform"/>性別

2.autocomplete：autocomplete 適用於 <form> 標籤，以及如下類型的 <input> 標籤：text, search, url, telephone, email, password, datepickers, range 以及 color。當你往輸入框輸入內容的時候，瀏覽器會從你之前的同名輸入框的歷史記錄中查找出相似的內容並列在輸入框下面。on和off兩個值。

<form action="www.baidu.com" autocomplete="off">
  First name:<input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  E-mail: <input type="email" name="email" autocomplete="off"><br>
  <input type="submit">
</form>

3.formaction：表單提交方式，H5把提交方式設置的更加簡單，能夠實現分塊提交，咱們在form裏面submit能夠提交到不一樣的地方。用法好比在登陸和註冊的時候。不一樣的按鈕指定不一樣的地址。

4.formmethod：之前是get和post屬性，如今是可使單個按鈕提交均可以實現提交方式。之前是一個表單一種提交方式。

5. formentype：提交的時候編碼，
            1.text/plain表單中的空格變成加號。可是不對錶單中的特殊字符進行編碼
            2.multipart/form-data不對錶單進行字符編碼，在進行文件上傳的時候使用
            3.application/x-www-form-urlencoded

6.autofous：聚焦屬性，咱們在頁面輸入的時候，該被輸入的地方會有藍光出現。好比在登陸時的效果。

           

7. require：<input>輸入框在提交的時候，若是內容爲空，會提示你輸入信息。屬性require="require"。

8.placeholder：輸入框的提示詞，如上圖淺灰色的框內字，起到提示做用。

9.pattern：這個就厲害了，設置提交格式，，若是輸入的東西不符合咱們定義的格式，自動提交失敗。

<form action="www.baidu.com">
	<input type="text" pattern="[A-Z]{3}" />
	<input type="submit"/>
</form>

效果圖：                 

10.height 和 width 屬性規定用於 image 類型的 <input> 標籤的圖像高度和寬度。就是帶圖片的按鈕的大小選擇。

11.list：list屬性與 datalist元素配合使用，能夠實現qq登陸帳號的效果。

<from>
	<input type="text " name="greeting"  list="greeting"/>
	<datalist	id="greeting" style="display: none;">
		<option value="H5學習">H5學習</option>
		<option value="Android學習">Android學習</option>
		<option value="Ios學習">Ios學習</option>
	</datalist>
</from>

效果圖 ：                           

2、表單新類型

類型以下：url，emil，date，time，datetime，datetime-local，month，week，number，range，search，tel，color，output。他們對用戶輸入的東西進行本身檢查，不符合格式的不容許提交。

3、H5加強的頁面元素

H5加強的頁面元素：figure和figcaption，details和summary，mark

figure和figcaption：figcaption是對於figure的說明，包含在figure裏面。figcaption會本身進行換行。

<figure>
			<img src="img/img1.jpeg"/>
			<img src="img/img2.jpeg"/>
			<img src="img/img3.jpeg"/>
			<figcaption>小頭像系列</figcaption>
		</figure>

             

details和summary：details被隱藏。

<details>
				<summary>這個一個詳細的說明</summary>
				我叫夏天，我是個帥哥
			</details>

mark：須要被標註的東西，想起到提醒做用的文章可使用。

progress：工做進度描述，就是一個進度條，可是主要的效果是靠js來實現。

meter：value，min,max等等，就是一個表示佔用量的條。

例如：<p>你說你有點<mark>自戀</mark></p>

ol和li：ol是對li進行排序呀什麼的，li只是導航點，可是ol能夠進行數字排序。

<ol start="4" reversed="reversed">
				<li>列表1</li>
				<li>列表2</li>
				<li>列表3</li>
				<li>列表4</li>
			</ol>

dl、dd、dt、cite：

<dl>
				<dt>我是</dt>
				<dd><cite>夏天</cite></dd>
				<dt>電話</dt>
				<dd>1234567</dd>
			</dl>

small：和big標籤相對應，字體縮小，若是字體已是最小的了，那麼就沒有做用了。small標籤也能夠嵌套使用，使字體連續縮小。