Skip to content
This repository was archived by the owner on May 8, 2019. It is now read-only.

Latest commit

 

History

History
149 lines (111 loc) · 5.51 KB

2.增强型表单标签.md

File metadata and controls

149 lines (111 loc) · 5.51 KB

增强型表单标签

注意

实验中如需使用jQuery,可以直接引入:

http://labfile.oss.aliyuncs.com/jquery/1.11.1/jquery.min.js

一、增型表单标签

HTML5中,新标准把文本框提示信息、表单校验、日期选择控件、颜色选择控件、范围控件、进度条、标签跨表单等功能直接加入新的表单标签中。 但在众多现代浏览器中,最新版本的Opera浏览器对新型表单的支持才最为完美。

1. Number类型input标签

<input type="number" name="demoNumber" min="1" max="100" step="1"/>

可以使用GVim按照上述代码编写,并用Firefox浏览器打开编写的html文件查看效果。

name: 标识表单提交时的key值 min: 标识当前输入框输入的最小值 max: 标识当前输入框输入的最大值 step: 标识点击增大/减小的时候,增加/减小的步长

2. Email类型input标签

<input type="email" name="email" placeholder="请输入注册邮箱"/>

可以使用GVim按照上述代码编写,并用Firefox浏览器打开编写的html文件查看效果。

当表单在提交前,此文本框会自动校验是否符合邮箱的正则表达式。

3. URL类型的input标签

<input type="url" placeholder="请输入网址" name="url"/>

可以使用GVim按照上述代码编写,并用Firefox浏览器打开编写的html文件查看效果。

4. Tel类型的input标签

<input type="tel" placeholder="输入电话" name="phone"/>

可以使用GVim按照上述代码编写,并用Firefox浏览器打开编写的html文件查看效果。

5. range类型的input标签

<input type="range" min="0" max="50" step="5" name="rangedemo" value="0"/>

此类型标签的加入,输入范围内的数据变得非常简单容易,而且非常标准,用户输入可感知体验非常好。另外此标签可以跟表单新增加的output标签一块使用,达到一个联动的效果。

<form oninput="output.value=parseInt(range.value)"/>
    <input type="range" min="0" max="100" step="5" name="range" value="0"/>
    <output name="output">0<output/>
</form>

可以使用GVim按照上述代码编写,并用Firefox浏览器打开编写的html文件查看效果。

6. 新的日期、时间、月份、星期input标签

Web项目开发,一定会遇到相关的js日期控件,在HTML5中新加入的表单属性将会使Web开发变得更加简洁。

<input type="date" name="datedemo"/>

可以使用GVim按照上述代码编写,并用Firefox浏览器打开编写的html文件查看效果。

相关的日期属性还包括:monthtimeweekdatetime-localdatetime

7. 颜色选择input标签

<input type="color" name="colordemo"/>

8. input标签自动完成功能

有的项目会要求实现自动完成或者输入提示功能,在HTML5的支持下将变得简单。

<input type="text" autocomplete="on" name="demoAutoComplete" list="autoNames" />
<datalist id="autoNames">
       <option  value="实验楼" ></option>
       <option  value="HTML5" ></option>
       <option  value="input标签" ></option>
</datalist>

二、HTML5表单新属性

1. input表单新增加的特有属性

  • autofocus属性,demo:<input type="text" autofocus="autofocus"/>此属性可以设置当前页面中input标签加载完毕后获得焦点。

  • maxminstep:这些上面介绍过,都是跟数字相关。

  • placeholder:提示信息属性。

  • multiple:用于文件上传控件,设置此属性后,允许多个文件。

  • 校验属性:设置了required属性后预示着当前文本框在提交前必须有数据输入,而这一切都是由浏览器自动完成。还添加了pattern正则表达式校验:

<input type="text" autofocus="autofocus" required pattern="\d+"/>
  • 另外一个较大的改进就是增加了form属性,也就是说,任何一个标签都可以指定它所属于一个表单,而不是必须在中进行包裹了。
<input type="text" form="demoform" name="demo"/>

2. form表单新增加的属性

  • novalidate属性规定在提交表单时不应该验证 forminput
<form action="" method="POST" novalidate="true"></form>
  • autocomplete属性规定forminput域应该拥有自动完成功能

三、综合实例

<fieldset>
    <legend>表单演示:最新Opera浏览器支持效果良好</legend>
    <form action="" method="POST" id="form1" oninput="output.value=parseInt(range.value)">
        <input type="text" autofocus="autofocus" required pattern="\d+" name="auto" placeholder="必填项测试" />
        <input type="number" name="demoNumber" min="1" max="100" step="2" />
        <input type="email" placeholder="请输入邮箱" name="mail" />
        <input type="url" name="url" placeholder="输入正确的网址" />
        <br />
            日期:<input type="datetime" name="time" />
            颜色:<input type="color" name="color" /><br />
        <br />
        <input type="range" min="0" max="50" step="5" name="range" value="0" />
        <output name="output">0</output>
        <br />
        <input type="submit" value="提交表单" />
    </form>
    表单外的input标签:
    <input type="text" form="form1" name="demo" />
</fieldset>

四、总结

在HMTL5的新版本表单中的确添加了很多常用的功能,然后浏览器帮我们实现了很多我们原先需要自己用js实现的一些功能。对开发者来说,这的确是很不错的一件事情。