疯狂的表单-html5新增表单元素和属性
2015-11-27 17:51
916 查看
疯狂的表单
2015/11/27 16:44:07从三方面来介绍html5表单的新特性
表单结构更灵活
要提交数据的控件可以布局在form标签之外,看下面的代码,表单元素可以写到form元素之外,只需在元素中加入form="form1"属性,也可提交到form元素指定的服务器地址<body> <form action="upload.php" method="post" accept-charset="utf-8" id="form1"> </form> <input type="text" name="username" value="" form="form1"> <input type="submit" name="sub" value="提交" form="form1"> </body>
新增表单元素
我们以前学过的表单元素包括“text”、“button”、“file”、"radio"等,html5中新增加了一些表单元素,下面列出这些元素及其作用email 类型用于验证email的格式,当提交表单时会自动验证email域的值
url 类型用于验证 URL 地址的格式,当提交表单时会自动验证url域的值
number 类型会根据你的设置提供选择数字的功能,min属性设置最小值、max属性设置最大值,value属性设置当前值,step属性设定每次增长的值,某些浏览器还不支持
range 类型用于应该包含一定范围内数字值的输入域,其会以一个滑块的形式展现,min属性设置最小值、max属性设置最大值,value属性设置当前值,如果没有设置,则其默认值的范围是1-100
日期和时间类型:HTML5 拥有多个可供选取日期和时间的新输入类型:
date - 选取日、月、年
month - 选取月、年
week - 选取周和年
time - 选取时间(小时和分钟)
datetime - 选取时间、日、月、年(UTC 时间)
datetime-local - 选取时间、日、月、年(本地时间)
search 类型用于搜索域,比如站点搜索或 Google 搜索,为其加上results="s"属性,则会在搜索框前面加上一个搜索图标
tel类型用于验证输入的是否是电话格式的内容,此元素现在还没有浏览器支持
color类型会提供一个颜色拾取器,供用户选择颜色,并将用户选择的颜色填充到此元素中
案例如下,大家可以将代码拷贝或者自己编写之后,在浏览器中查看效果
<form action="upload.php" method="post" accept-charset="utf-8" id="form1"> <br> 主页: <input type="url" name="url" value="" placeholder="个人主页" required> <br> 邮箱: <input type="email" name="email" value="" placeholder="邮箱" required> <br> 生日: <input type="date" name="date" value="" required> <br> 时间: <input type="time" name="time" value="" required> <br> 星期: <input type="week" name="week" value="" required> <br> 年龄: <input type="number" name="age" value=""> <br> 薪水: <input type="range" name="range" value=""> <br> 电话: <input type="tel" name="tell" value="" placeholder="都不支持"> <br> 颜色: <input type="color" name="mycolor"> <br> <input type="search" name="key" value="" results="s"><br> <input type="submit" name="sub" value="提交" form="form1"> </form>
浏览器的支持情况
chrome:firefox:
Opera:
Microsoft Edge:
好,我们对微软的进步进行表扬!
新增表单属性
除了新增的表单元素之外,html5中还新增了一些表单属性新的 form 属性:
autocompletenovalidate
新的 input 属性:
autocompleteautofocus
form
form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)
height 和 width
list
min, max 和 step
multiple
pattern (regexp)
placeholder
required
在下面的案例中,我们对一些常用的属性做了解释,大家直接看代码和代码旁边的注释,然后对照浏览器的运行结果就理解其意义了
<body> <!-- placeholder:用于在文本框未输入时提示作用 autofocus:用于控件自动获取焦点 --> <input type="search" name="key" value="" results="s" placeholder="君乐宝" autofocus="true"> <input type="button" name="" value="搜索"> <br> <!-- novalidate:在控件中加入了required、emial、url等验证后,如果想让这些验证失效,可以在表单中将novalidate设置为tyue --> <form action="upload.php" method="post" accept-charset="utf-8" id="form1" novalidate="true"> <!-- required:必填 autocomplete:在网页的文本框中输入部分内容或者双节时,经常会看到在下面显示输入过的内容, 这就是html5的新特性:自动完成,如果不想使用此功能,将其设置为off即可 --> <input type="text" name="UserName" value="" required autocomplete="off"> <br> <!-- multiple:在选择文件时,默认只能单选,加上这个属性后,则可以使用鼠标选中多个文件进行上传 --> 选择文件 <input type="file" name="upload" value="" multiple="multiple"> <br> <!-- list:这个属性要和datalist元素一起使用,指定此文本框的可选择项,另外其相较于select的优点在于还可以输入 --> 区号: <input type="text" name="age" value="" list="list1"> <br> <datalist id="list1"> <option value="0312">保定</option> <option value="0311">石家庄</option> <option value="010">北京</option> <option value="0313">唐山</option> </datalist> <!-- formaction:可以更改点击此按钮式提交到服务器的处理程序 formmethod:可以更改向服务器提交数据的方式 --> <input type="submit" name="subsave" value="提交"> <input type="submit" name="subresset" value="更改" formaction="1.php" formmethod="get"> </form> </body>
相关文章推荐
- HTML5新特性总结
- 深入浅析HTML5中的SVG
- 基于HTML5代码实现折叠菜单附源码下载
- HTML5标签使用方法详解
- HTML5实战应用:如何让表单验证更友好
- Html5选择图片并及时预览图片
- IE6,7,8,9中H5属性placeholder不兼容问题
- html5摇一摇
- HTML5笔记T0000002:HTML5全局属性
- HTML5标签及使用方法描述
- Delphi HTML5 Canvas组件
- ajax与HTML5 history pushState/replaceState实例
- 常用的XHTML5元素
- 关于HTML5 的history API介绍与使用
- CDH5.2挂载fuse-dfs问题解决
- H5技术的潮流----阿冬专栏
- Video对象的playbackRate属性和duration、ended属性介绍
- HTML5 meta最全使用手册
- 【转】html5响应触控
- HTML5 实现橡皮擦的擦除效果