扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
color:颜色
天元网站建设公司创新互联,天元网站设计制作,有大型网站制作公司丰富经验。已为天元近1000家提供企业网站建设服务。企业网站搭建\成都外贸网站建设要多少钱,请找那个售后服务好的天元做网站的公司定做!
date:日期
datetime:UTC日期和时间 datetime-local: 日期时间(本地)month:月份 time:时间 week:周
email:邮件,注:输入的电子邮件可自动验证
number:数字,可以设置数字范围
range:数字滚动条 ,滚动条可以改变范围内的数值
search:搜索 搜索关键字
tel:电话号码
url:url地址输入(输入url格式可自动验证)
HTML5 还有这3种新的表单元素:(可以参考w3cschool手册:)
datalist
keygen
output
H5edu教育html5实训为您解答:表单是用来获取用户输入的一些数据,最常见的就是注册,登录之类。常见的表单标签:表单form, 输入域input,文本域textarea,按钮button,域的标题legend,控制标签label等。
HTML5中表单验证有如下好处:
1、可判断用户是否已填写表单中的必填项目。
2、可判断用户输入的邮件地址是否合法。
3、可判断用户是否已输入合法的日期。
4、可判断用户是否在数据域(numeric field)中输入了文本。
表单验证通常采用策略模式的思想,把一个个验证规则封装成一个函数,比如非空规则、最大长度规则等,不同的输入框选择某一个或者某几个规则进行验证。
扩展资料:
HTML表单一直都是Web的核心技术之一,有了它才能在Web上进行各种各样的应用。HTML5 Forms新增了许多新控件及其API,方便做更复杂的应用,而不用借助其它Javascript框架。
表单有以下几个基本知识点:
1、表单仍是以form元素作为容器,可在其中设置基本的提交特性。
2、当用户提交页面时,表单仍然向服务器发送表单控件的值。
3、之前老版本中的表单控件,如text radio checkbox等等,都可以按原有方式使用,尽管增加了新的功能。
4、仍然可以使用javascript操作表单控件。
HTML5中,新标准把文本框提示信息、表单校验、日期选择控件、颜色选择控件、范围控件、进度条、标签跨表单等功能直接加入新的表单标签中。 但在众多现代浏览器中,最新版本的Opera浏览器对新型表单的支持才最为完美。
name: 标识表单提交时的key值 min: 标识当前输入框输入的最小值 max: 标识当前输入框输入的最大值 step: 标识点击增大/减小的时候,增加/减小的步长
当表单在提交前,此文本框会自动校验是否符合邮箱的正则表达式。
此类型标签的加入,输入范围内的数据变得非常简单容易,而且非常标准,用户输入可感知体验非常好。另外此标签可以跟表单新增加的output标签一块使用,达到一个联动的效果。
相关的日期属性还包括:month、time、week、datetime-local、datetime。
novalidate :属性规定在提交表单时不应该验证form或input域。
autocomplete :属性规定form或input域应该拥有自动完成功能。
表单中新增的控件(type属性)
email: 提交表单时检测值是否是一个电子邮件格式
url: 提交表单时检测值是否是一个url格式
date: 年-月-日格式的控件
time: 时:分格式的控件
datetime: 年-月-日 时:分 格式的控件(UTC时间)
datetime-local: 年-月-日 时:分 格式的控件(本地时间)
month: 年-月格式的控件
week: 年-周数格式的控件
number: 数字输入框
input type="number" name="" id="" value="60" max="100" min="0" /
range: 选择区域
input type="range" name="" id="" value="60" max="100" min="0" /
tel: 电话输入框
search: 用于搜索
color: 调用系统选色器
新增控件属性:
placeholder: 占位符,输入框提示信息
input type="text" autofocus placeholder=''/
required: 该input为必填项
autofocus: 在页面加载时,域自动地获得焦点
autocomplete="off/on":可以记录输入信息
必须有name属性 必须提交过
off==关闭 on==打开
input type="tel" name="user" id="" value="" autocomplete="on"/
pattern: 正则验证
input type="tel" pattern="[0-9]{7,12}"/
min/max: input能输入的最小/最大字节的长度
step: 针对number和range类型,每次递增step的值
list: 指定一个datalist,作为下拉提示单
新增表单元素:
用于表单的密钥对生成器字段
不同类型的输出,比如脚本的输出。
新增表单属性:
autocomplete 自动完成
novalidate不验证数据
formaction 用于描述表单提交的URL地址,会覆盖
元素中的action属性.
formenctype 表单提交到服务器的数据编码 (只对form表单中 method="post" 表单)
formmethod 表单提交方式,会覆盖 的method 属性。
formnovalidate 表单提交无需被验证,会覆盖 元素的novalidate属性.
formtarget 表单提交数据接收后,怎么的展示。
list 表示input输入域的 datalist(datalist 是输入域的选项列表)
min max step ** 用来给input 类型为数字或日期的添加限定约束的
multiple 多种多样表示 元素中可选择多个值。
pattern 正则表达式用于验证 元素的值。
placeholder 占位提供一种提示(hint),描述输入域所期待的值。
required 被要求的,必须的, 规定必须在提交之前填写输入域(不能为空)。
step 步伐、一步、步长,规定输入域合法的数字间隔
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流