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中,表单能够包含的元素 ...
随机推荐
- java 远程调用
1.webservice (soap+http) -aixs -axis2 -xfire—>cxf 2.webservice问题 -基于xml,xml效率,(数据传输效率,xml序列化效率) - ...
- Calculate S(n)
Problem Description Calculate S(n). S(n)=13+23 +33 +......+n3 . Input Each line will contain one i ...
- kfk: async disk IO深度解析
http://www.itpub.net/thread-1724044-1-1.html
- linux 创建 bootable iso 文件
windows制作iso文件通过ultraiso可以实现. linux下用mkisofs这个命令就可以 最简单的用法 mkisofs -o target.iso source 要制作可以启动的iso文 ...
- ISO和焦距
要说什么是ISO还要从传统胶片相机说起,ISO称作为感光度,它是衡量传统相机所使用胶片感光速度的国际统一指标,其反映了胶片感光时的速度(其实是银元素与光线的光化学反应速率).而对于现在并不使用胶片的数 ...
- [React Native] Prevent the On-screen Keyboard from Covering up Text Inputs
When you bring up the on screen keyboard in a mobile app, it will cover any text input or buttons on ...
- SharpDevelop 如何切换设计视图和代码视图
仅在MainForm.cs跟MainForm.Designer.cs文件页面上,底部有可以切换源代码跟设计的按钮(别的地方都木有) 点击就切换过来了
- iOS截取视频某一帧图片（关键帧，AVAssetImageGenerator）
获取第一帧图片 导入 AVFoundation.Framework.CoreMedia.Framework 实现代码例如以下: + (UIImage*) thumbnailImageForVideo: ...
- Android Studio VS Eclipse （还在用Eclipse？你OUT了！）
转载请注明本文出自大苞米的博客(http://blog.csdn.net/a396901990).谢谢支持! 公司派来一个去美国參加完AnDevCon大会的来给我们分享大会上学习的内容. AnDevC ...
- cocos2D（七）---- CCScene
CCScene普通情况是游戏里面的根节点.称之为"场景",执行游戏时须要通过CCDirector启动第一个场景. 当然,游戏略微复杂一点的话.可能会包括非常多个场景,这就涉及到场景 ...