下载安卓APP箭头
箭头给我发消息

客服QQ:3315713922

web前端:H5表单新特性

作者:lucien_jun     来源: https://www.cnblogs.com/webenjoy/p/11755920.html点击数:1809发布时间: 2020-03-10 10:11:51

标签: 正则表达式网页表单

Web开发

  表单按钮:包括提交按钮、复位按钮和一般按钮;用于将数据传送到服务器上的CGI脚本或者取消输入,还可以用表单按钮来控制其他定义了处理脚本的处理工作。

  1.html5表单新特性之——新的inputtype

  <inputtype="">

  HTML5之前已有的inputtype:

  text、password、radio、checkbox、file、submit、reset、button、image、hidden

  HTML5新增的inputtype:

  1.Email:邮件输入域,在表单提交时提供简单的邮箱格式验证,并弹出一个提示矿口(可定制内容不能定制样式)

  <inputtype="email">

  2.url:URL地址输入域。在表单提交时提供简单的URL地址格式验证,并弹出一个提示窗口

  <inputtype="url">

  3.number:数字输入域,在表单提交时提供简单的数字格式验证,并弹出一个提示窗口

  <inputtype="number"min=""max=""step="">

  4.tel:电话号码输入域,在手机浏览器中弹出数字键盘

  <inputtype="tel">

  5.search:搜索输入域,在手机浏览器中右下角呈现搜索按键

  <inputtype="search">

  6.range:范围选择控件,帮助用户在一定范围内选择一个数字

  <inputtype="range"min=""max=""step="">

  (7)color:颜色选择控件,浏览器并未自己实现颜色选择框,而是使用操作系统自带的颜色选择控件

  <inputtype="color">

  (8)date:日期选择控件,FF没有实现,推荐使用第三方插件代替,如jQueryUI-datepicker、laydate等

  <inputtype="date">

  (9)month:月份选择控件,FF没有实现

  <inputtype="month">

  (10)week:星期选择控件,FF没有实现

  <inputtype="week">

  HTML5新特性之表单新特性——新的表单元素

  HTML5之前FORM可以有的标签——用于数据提交:

  INPUT、TEXTAREA、SELECT/OPTION、BUTTON

  HTML5新增表单元素——用于信息提示,不能用于数据提交:

  (1)datalist:数据列表,配合option使用,本身为不可见元素,为普通的input提供输入建议列表

  <datalistid="l"><option>XXX</option></datalist>

  <inputtype="text"list="l">

  (2)progress:进度条,未指定value属性则显示为“进行中”样式;若指定了value(默认在0~1之间)就可以控制其显示的进度

  <progressvalue="0.5"></progress>

  (3)meter:刻度尺/度量衡,用红黄绿三色表示出一个数值所处的范围:不可接受/可以接受/最优范围

  <metermin="最小可能值"max="最大的可能值"low="合理的下限"high="合理的上限"optimum="最优值"value="实际值"></meter>

  (4)output:输出,用于描述表单中的计算结果,语义标签,样式与SPAN无异。

  <output>xxx</output>

  HTML5新特性表单新特性——表单元素新的属性——重点

  HTML5之前表单元素可用的属性:

  id、class、title、style、type、name、value、checked、selected、disabled、readonly

  HTML5之前表单元素新增的属性:

  (1)autocomplete:on/off,自动补全,是否自动记录之前提交的数据,以用于下一次输入建议

  <inputautocomplete="off">

  (2)placeholder:站位符,用于在输入框中显示提示性文字,与value不同,不能被提交

  <inputplaceholder="提示性文字">

  (3)autofocus:false/true,自动获得输入焦点

  <inputautofocus>

  (4)multiple:false/true,是否允许多个输入值,若声明了该属性,输入框中(如email)就允许输入用逗号分隔的多个值

  <inputtype="email"multiple>

  (5)form:为一个元素指定form属性,值为某个表单的ID,则此输入域可以放到表单的外部

  <formid="f"></form>

  <inputform="f">

  ========上述五个属性是新的通用属性===========

  =======上述六个属性是输入验证相关属性========

  (6)required:false/true,必需的/必填项,在表单提交时会验证是否有输入,没有输入则弹出提示消息

  <inputrequired>

  (7)maxlength:最大长度,在有输入的情况下,限定输入域中字符的个数

  <inputmaxlength="9">

  (8)minlength:最小长度,在有输入的情况下,限定输入域中字符的个数,不是HTML5标准属性,仅部分浏览器支持(如Chrome)

  <inputminlength="6">

  (9)min:限定输入的数字的最小值

  <inputmin="">

  (10)max:限定输入的数字的最大值

  <inputmax="">

  (11)step:限定输入的数字的步长,与min属性连用

  <inputstep="">

  (12)pattern:指定一个正则表达式,对输入进行验证

  <inputpattern="1[3578]\\d{9}">

  注意:上述正则表达式可以省略^和$

  表单在网页中主要负责数据采集功能。一个表单有三个基本组成部分:表单标签:这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。表单域:包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。

赞(14)
踩(0)
分享到:
华为认证网络工程师 HCIE直播课视频教程