HTML5资料之表单

最新推荐文章于 2024-07-09 17:01:34 发布

原创最新推荐文章于 2024-07-09 17:01:34 发布 · 178 阅读

0 ·

CC 4.0 BY-SA版权

HTML5 专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了HTML5中的新表单类型，包括email、tel、url等，以及表单元素如datalist、output、keygen、meter和progress的用法。此外，还提及了表单属性如placeholder、autofocus、multiple等，以及如何关闭表单验证和设置必填项。同时，探讨了表单事件oninput和oninvalid的应用。

◆ 表单类型：

部分类型是针对移动设备生效的，且具有一定的兼容性，在实际应用当中可选择性的使用。

email：输入email格式，会校验是否有@
tel：手机号码
url：只能输入url格式，会校验是否有http:
number：只能输入数字
search：搜索框，带有x号
range：范围，滑动条
color：拾色器
time：时间
date：日期不是绝对的

–datetime：时间日期

month：月份
week：星期

◆ 表单元素：

1.<datalist>：数据列表，与input 配合使用

智能下拉菜单，可以模糊匹配，与select标签明显不同

<!--datalist-->
<input type="text" list="car" />
<datalist id="car">
    <option>宝马</option>
    <option>宝骏</option>
    <option>宝强</option>
    <option>宝宝</option>
    <option>奥迪</option>
    <option>奥迪奥</option>
    <option>迪奥</option>
</datalist>

<!--select-->
<select >
    <option>选项1</option>
    <option>选项1</option>
    <option>选项1</option>
    <option>选项1</option>
</select>

2.<output>：输出信息

3.<keygen>：生成密钥的用于表单安全传输

4.<meter>：度量器

max：最大值
min：最小值
value：当前值
low：低阈值（低于阈值度量器变色）
high：高阈值（高于阈值度量器变色）

在这里插入图片描述

5.<progress>：进度条

max：最大值
min：最小值
value：当前值

◆ 表单属性：

1.placeholder：提示文字（占位符）

在表单输入框中显示提示文字

2.autofocus：自动获取焦点

3.multiple：多选，上传多个文件

4.autocomplete 自动完成（填充的），在表单下方显示之前填写过的数据供选择，默认on开启，off为取消自动提示

5.novalidate：关闭自带的表单标签验证功能，可用于form标签

<form action="" novalidate>

6.required：必填项

7.pattern：自定义正则验证

 手机号:<input type="tel" name="tel" required="required" pattern="^(\+86)?1[3,5,8](\d{9})$">

注：1-4示例：

用户名：<input type="text" placeholder="例如：李狗蛋" autofocus name="userName" autocomplete="off" required/>

◆ 表单事件：

1.oninput：当用户输入时触发

2.oninvalid：当验证不通过是触发

可以用来设置验证不通过时的提示文字

obj.oninvalid=function(){
	his.setCustomValidity('亲，请输入正确的信息！');
}