html5新增属性（六）

html5新增属性

1、form属性

表单内的从属元素，可以写在表单外部。可以通过指定元素的form属性来声明元素所属表单。form的属性值为表单的id。

 <form id="testForm">
     <input type="text">
 </form>
 <textarea form="testForm"></textarea>

2、formaction属性

给所有的提交按钮增加formaction属性，可以通过不同的按钮将表单提交到不同的页面。

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

**浏览器支持：**Internet Explorer 10, Firefox, Opera, Chrome, 和 Safari 支持 formaction 属性。

3、fommethod属性

formmethod 属性定义发送表单数据到 action URL 的 HTTP 方法。

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

4、plceholder属性

用于未输入文本框显示输入提示。

 <input type="text" placeholder="请输入用户名">

5、autofocus属性

给文本框、选择框或者按钮添加autofocus属性，可在页面打开时自动获得光标焦点。一个页面上只能有一个具有autofocus属性的控件。

 <input type="text" autoforcus>

**浏览器支持：**Internet Explorer 10、Firefox、Opera、Chrome 和 Safari 支持 autofocus 属性。

6、list属性

为单行文本框特有属性，配合datalist标签使用。属性值为datalist标签的id。

 text：<input type="text" list="testList">
 <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>

**浏览器支持：**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>

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	定义拾色器。

动画

动画( animation )

• 动画和过渡类似，都是可以实现一些动态效果
• 不同的是过渡需要再某个属性发生变化时才会触发，但动画可以自动触发动态效果
• 设置动画效果，必须先要设置一个关键帧（关键帧设置了动画执行每一个步骤）

@keyframes test{
	/*from表示动画的开始设置，也可以使用0%*/
	from{
		margin-left: 0;
	}
	/*to表示动画的结束设置，也可以使用100%*/
	to{
		margin-left: 100%;
	}
}

---

动画的用法：

1. animation-name：要对当前元素生效的关键帧的名字

animation-name: test;	/*test是上面关键帧的名字*/

1. animation-duration：动画的执行时间

animation-duration: 4s;

1. animation-delay：动画的延时

animation-delay: 2s;

1. animation-iteration-count：动画的执行次数（infinite无线执行）

animation-iteration-count: infinite;

1. animation-direction：指定动画运行的方向

• 可选值：normal 默认值，从 from 向 to 运行，每次都是这样
• reverse 从 to 向 from 运行，每次都是这样
• alternate 从 from 向 to 运行，重复执行动画时反向执行
• alternate-reverse 从 to 向 from 运行，重复执行动画时反向执行

animation-direction: alternate-reverse;
- animation-delay：//动画的延时
```css
animation-delay: 2s;

1. animation-play-state：设置动画的执行状态

• 可选值：runnin 默认值，动画执行
• paused 动画暂停

animation-play-state: paused;

1. animation-fill-mode：动画的填充模式

• 可选值：none 默认值，动画执行完毕元素回到原来的位置
• forwards 动画执行完毕元素会停止在动画结束的位置
• backwards 动画延时等待时，元素就会处于开始位置
• both 结合来 forwards 和 backwards

animation-fill-mode: both;

animation直接使用：

animation: 关键帧名 执行时间 延时时间 执行次数;