html5——表单
type类型
email //输入email格式
tel //手机号码
url //只能输入url格式
number //只能输入数字
search //搜索框
range //范围 滑动条
color //拾色器
time //时间
date //日期不是绝对的
datetime //时间日期
month //月份
week //星期
//部分类型是针对移动设备生效的，且具有一定的兼容性，在实际应用当中可选择性的使用。
表单元素
1、<datalist>数据列表与input标签使用
2、<keygen>生成加密字符串，谷歌没有效果
3、<output>元素用于不同类型的输出，比如计算或脚本输出
4、<meter>表示度量器，不建议用作进度条
5、<progress>进度条
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
form {
width: 100%;
max-width: 400px;
min-width: 200px;
margin: 100px auto;
} input {
width: 100%;
margin-top: 10px;
} meter, progress {
width: 100%;
}
</style>
</head>
<body>
<form action="">
<fieldset>
<legend>表头</legend>
<label for="sport">爱好：</label>
<input type="text" list="hobby" name="hobby" id="sport">
<datalist id="hobby">
<option value="篮球"></option>
<option value="足球"></option>
<option value="羽毛球"></option>
<option value="排球"></option>
</datalist>
<br><br>
<label for="me">度量器：</label>
<meter min="0" max="100" low="20" high="80" value="60" id="me"></meter>
<br><br>
<label for="pro">进度条：</label>
<progress min="0" max="100" low="20" high="80" value="60" id="pro"></progress>
</fieldset>
</form>
</body>
</html>
表单属性
placeholder //占位符
autofocus //获取焦点
multiple //文件上传多选或多个邮箱地址
autocomplete //自动完成，用于表单元素，也可用于表单自身(on/off)
form //指定表单项属于哪个form，处理复杂表单时会需要
novalidate //关闭验证，可用于<form>标签，谷歌没有效果
required //必填项
pattern //正则表达式 验证表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
form {
width: 100%;
max-width: 400px;
min-width: 200px;
margin: 100px auto;
} input {
width: 100%;
margin-top: 10px;
} meter, progress {
width: 100%;
}
</style>
</head>
<body>
<form action="" id="form">
<fieldset>
<legend>表头</legend>
<label for="sport">placeholder：</label>
<input type="text" name="hobby" id="sport" placeholder="请输入您的兴趣爱好">
<br><br>
<label for="com">autocomplete：</label>
<input type="text" name="com" id="com" autocomplete="on">
<br><br>
<label for="firstName">autofocus：</label>
<input type="email" name="firstName" id="firstName" autofocus>
<br><br>
<label for="file">multiple ：</label>
<input type="file" name="file" id="file" multiple>
<br><br>
<label for="nova">novalidate ：</label>
<input type="email" name="novalidate " id="nova" novalidate>
<br><br>
<label for="re">required ：</label>
<input type="text" name="re" id="re" required>
<br><br>
<label for="pa">pattern ：</label>
<input type="tel" name="pa" id="pa" pattern="1\d{3}">
<br><br>
<input type="submit" value="提交">
</fieldset>
</form>
<label for="other">表单外的一个input标签</label><input type="text" name="other" id="other" form="form">
</body>
</html>
autocomplete：是带有name属性的input标签提交后，再次提交会触发事件，off会关闭自动显示历史输入的值 ，on会显示
form：表单外的input标签会随着表单提交
表单事件
oninput：用户输入内容时触发，可用于移动端输入字数统计
oninvalid：当验证不通过时触发
setCustomValidity：可获取验证错误信息并且自定义值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
form {
width: 100%;
max-width: 400px;
min-width: 200px;
margin: 100px auto;
} input {
width: 100%;
margin-top: 10px;
} meter, progress {
width: 100%;
}
</style>
</head>
<body>
<form action="" id="form">
<fieldset>
<legend>表头</legend>
<label for="acount">账号：</label>
<input type="text" name="acount" id="acount">
<br><br>
<label for="em">email：</label>
<input type="email" name="em" id="em">
<br><br>
<input type="submit" value="提交">
</fieldset>
</form>
<script>
var inpArr = document.getElementsByTagName("input");
inpArr[0].oninput = function () {
console.log(this.value.length);
}
inpArr[1].oninvalid = function () {
this.setCustomValidity("邮箱都能写错啊！天才");
}
</script>
</body>
</html>
html5——表单的更多相关文章
- 实现跨浏览器html5表单验证
div:nth-of-type(odd){ float: left; clear: left; } .origin-effect > div:nth-of-type(even){ float: ...
- html5表单验证
表单验证为终端用户检测无效的数据并标记这些错误,是一种用户体验的优化. 下面展现浏览器自带的验证功能也可在移动端中查看: HTML部分: <!DOCTYPE html> <html ...
- Ideal Forms – 帮助你建立响应式 HTML5 表单
Ideal Forms 是建立和验证响应式 HTML5 表单的终极框架.它刚刚发布 V3 版本,更小,更快,更具可扩展性.它支持实时验证,完全自适应(适应容器,没有 CSS 媒体查询需要),键盘支持, ...
- HTML5学习总结-05 HTML5表单
一 HTML5 新的类型 HTML5 拥有多个新的表单输入类型.这些新特性提供了更好的输入控制和验证. email url number range Date pickers (date, month ...
- html5 表单样式 表单验证1 2 3
html5 表单样式 ie9以下不支持 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...
- HTML5跨浏览器表单及HTML5表单的渐进增强
HTML5跨浏览器表单 http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-cross-browser-html5-f ...
- HTML5表单提交和PHP环境搭建
HTML5表单提交相关内容和PHP环境搭建需要的软件(只备注) (2)举例介绍 (3)PHP环境搭建
- HTML5表单及其验证
随笔- 15 文章- 1 评论- 115 HTML5表单及其验证 HTML表单一直都是Web的核心技术之一,有了它我们才能在Web上进行各种各样的应用.HTML5 Forms新增了许多新控件及其A ...
- HTML5表单新属性
HTML5表单新属性 autofocus 自动聚焦 <input type="text" autofocus> placeholder占位文本 tel ...
- HTML5 表单元素和属性
HTML5 表单元素和属性学习 版权声明:未经博主授权,内容严禁转载 ! 表单元素简介 无论实现提交功能还是展示页面功能,表单在HTML中的作用都十分重要. 在其他版本的HTML中,表单能够包含的元素 ...
随机推荐
- T1097 校门外的树 codevs
http://codevs.cn/problem/1097/ 题目描述 Description 某校大门外长度为L的马路上有一排树,每两棵相邻的树之间的间隔都是1米.我们可以把马路看成一个数轴,马路的 ...
- SiteMesh2-示例工程
了解SiteMesh的最佳方法是使用它.假设SiteMesh设置在您的Web应用程序中,本教程将展示如何掌握SiteMesh最强大的方面,如下所示装饰页面: 效果发生在第2步,其中Menu.jsp页面 ...
- apache2 ubuntu18.04 配置虚拟端口
修改3个文件/etc/apache2/apache2.conf/etc/apache2/ports.conf/etc/apache2/sites-available/000-default.conf ...
- 2 instances of postgresql but I really need one [closed]
I happen to have 2 installed instances of postgresql at my machine: 9.1 and 9.2: sudo service postgr ...
- 1.4 - OSPF的运行模式⑦
帧中继的子接口选用原则: 1.在一个封装FR的物理接口上,可以同时承载多条PVC. 为了网络的可扩展性,建议不论在考试环境还是在工程环境中,都应该优先考虑使用子接口 2.应该创建几个子接口:在一个物理 ...
- C# DateTime.Now和DateTime.UtcNow的区别
DateTime.UtcNow.ToString()输出的是0时区的事件(通俗点就是格林威治时间的当前时间),DateTime.Now.ToString()输出的是当前时区的时间,我们中国使用的是东八 ...
- Chrome 消息机制
Chrome浏览器扩展开发系列之十四:本地消息机制Native messaging 时间:2015-10-08 16:17:59 阅读:1560 评论:0 收藏:0 ...
- 设计模式之五：工厂方法模式（Factory Method）
工厂方法模式:定义了一个创建对象的接口,由子类来决定详细实例化那个对象.工厂方法模式让类的实例化转移到子类中来推断. Define an interface for creating an objec ...
- CentOS yum时出现“Could not retrieve mirrorlist ”的解决的方法——resolv.conf的配置
原因:没有配置resolv.conf 解决方法: 到/etc文件夹下配置resolv.conf增加nameserver IP,如: nameserver 8.8.8.8 nameserver 8.8. ...
- 用C++实现一个Quaternion类
提要 四元素是游戏开发中经常使用的用于处理旋转的数学工具,以下就用C++来实现一个四元素类.參考Unity中四元素的接口. 假设没有看之前的 彻底搞懂四元数. 建议先看一下. 代码清单 Quatern ...