HTML5新增表单元素及属性(1).docx

HTML5新增表单元素和属性
Form属性：
在Html4中，表单内的元素必须写在表单内部，而Html5则不一定写在内部，他可以写在页面上的任何地方，只要给该元素指定一个form属性，属性为form表单的id,这样就可以声明该元素从属哪个指定的表单了
代码示例：
<form id="test">
<input type="text" />
</form>
<textarea form="test"></textarea>
Input元素在form元素内部，所以它不需要使用form指定id,而textarea却是在 form表单的外面，所以它必须要指定专门的form的ID，
Formaction属性：
在HTML4中，一个表单内的所有元素都只能通过action属性统一提交到另外一个页面，然而在HTML5中，却是可以分别提交到不同页面，使用formaction即可，使得点不同的按钮，可以将表单提交到不同的页面。
代码示例：
<form id="test" action="first.jsp">
<input type="submit" name="南三条玩具“ value="南三条玩具“ formaction="a.jsp" >提交到1 <br />
<input type="submit" name="南三条日化“ value="南三条日化“ formaction="b.jsp" >提交到2<br />
<input type="submit" name="南三条饰品“ value="南三条饰品“ formaction="a.jsp" >提交到1</form>
</form>
Formmethod属性
在Html4 中，一个表单只有一个action元素对表单内所有的元素统一指定提交页面，所有这个表单内也只会有有一个提交方式method，但是在html5就就可以添加formmethod添加提交方式。这样上面的例子就可以修改如下
代码如下
<form id="test" action="first.jsp">
<input type="submit" name="南三条玩具“ value="南三条玩具“ formaction="a.jsp" formmethod="get">提交到1</form> <br />
<input type="submit" name="南三条日化“ value="南三条日化“ formaction="b.jsp" formmethod="post">提交到2</form><br />
<input type="submit" name="南三条饰品“ value="南三条饰品“ formaction="a.jsp" formmethod="put">提交到1</form>

</form>
Placeholder属性：
Placeholder 是指的是<input type=”text”><textarea>处于未输入状态时文本框中显示的输入提示，实现方法只要加上placeholder属性，然后指定提示文字即可。
代码如下
<input type="text" placeholder="点击我" />
Autofocus属性
给文本框，选择框或按钮控件加上该属性，当画面打开时，该控件自动获得光标焦点，目前为止做到这一点的是javascript
代码如下：
<input type=”text” autofocus>
HTML5大幅度改良了input元素的种类
1.url类型：
url类型的input时一种专门来输入URL地址的文本框，输入的必须网站地址。
代码示例：
<input name=”url1” type=”url” value=>
2.email类型
Email类型的input元素一种专门提交输入 email地址的文本框，如果提交的不是 email则不允许提交。但是它不检查该email 是否存在，提交的文本框可以为空，除非加上 热气 3.required属性。
Email类型的属性具有 multiple属性，它允许该文本框中输入一串都好分割emal地址。
代码示例
<input name=”email” type=>就是提示失败，而将改成santiaogou@就可以了。
4.date类型
Date类型的input元素是深受开发者喜爱的一种元素，我们经常看到网页中要求我们的 输入的各种各样的日期，丽日生日，购买日期等，date类型的input元素以日历的形式方便用户输入，
代码示例：
<input name=”date1” type=”date” value=”2015-10-10”>
5.time类型
Time类型的input元素是一种专门用来输入时间的文本框，并且在提交时会对输入时间的有效性进行检查，它的外表取决于它的浏览器，可以是简单的文本框，
代码如下：
<input name=”time1” type=”time” value=”10:00”>
6.datetime类型
Datetime类型的input元素是一种专门检查 UTC日期和时间的文本框，并且在提交时会对输入的日期和时间进行有效性检查，
代码如下：
<input name= type=”datetime”>
7. month类型
Month 类型的input 元素是一种专门输入月份文本框，并且在提交是对输入的月份进行有效性的检查，
代码如下：
<input name=”month”1 type=”month” value=”2010-15-02”>
8.week类型
Week类型是一种专门输入周号的 文本框，并且在提交市对输入的的周号进行有效的检查。它可以是简单的 文本输入框，允许用户输入一个数字，也可以更加准确，
代码如下
<input name=”week1” type=”week” value=”2010-w40”>
9.number 类型
Number类型的input 元素是一种专门输入数字的 文本框，并且在提交时检查里面的是否为数字，它具有max,min和step属性。
其中max表示不能超过的最大值，而min表示不能超过的最小值，而 setp表示按阶梯性递增递减。
代码如下
<input name=”number1” type=”25” min=”10” max=”100” step=”5”>
11.range 属性
Range 属性的 input元素表示的是只允许一段范围内的文本框，它具有min,max,的属性同样它也具有step属性
代码如下：
<input name=” range1” type=”range1” value=”25” min=”0” max=”100” step=:5”>
12.search 类型
Serach类型的input 元素是一种专门输入搜索关键词文本框，serach类型与text类型仅仅在外观上有区别、
13.tel类型
Tel类型的input 元素涉及为专门输入电话号码的专用文本框,它没有专门的校验规则，不强制输入数字
14.color
Color类型额input元素，提供一个颜色选择器。

，