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标签也能够嵌套使用，使字体连续缩小。