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中,表单能够包含的元素 ...
随机推荐
- NYOJ35 表达式求值
表达式求值 时间限制:3000 ms | 内存限制:65535 KB 难度:4 描述 ACM队的mdd想做一个计算器,但是,他要做的不仅仅是一计算一个A+B的计算器,他想实现随便输入一个表达式 ...
- 四则运算结对编程（GUI）
四则运算GUI coding地址:https://git.dev.tencent.com/qyj814/GUI.git 结对伙伴:李梦宇 一.题目要求 定制出题要求.每次出题时用户都可以在界面上定制如 ...
- Vue插槽的另外一些特性
之前有个项目,想判断一下,某一个模板内的插槽是否被使用. 不知道是不是问题过于简单,网上没有这方面的说明.我就抽时间验证一下vue插槽相关的一些功能. 然后写下这篇随笔,希望对后来人能有一些帮助. 简 ...
- nodejs 运行
运行 Node.js 程序的基本方法就是执行 node script.js,其中 script.js①是脚本的文件名. 除了直接运行脚本文件外,node --help 显示的使用方法中说明了另一种输出 ...
- linux下让irb实现代码自己主动补全的功能
我不知道其它系统上irb是否有此功能,可是在ubuntu上ruby2.1.2自带的irb默认是没有代码自己主动补全功能的,这多少让人认为有所不便.事实上加上也非常easy,就是在irb里载入一个模块: ...
- Cocos2d-x 3.x 图形学渲染系列十五
笔者介绍:姜雪伟,IT公司技术合伙人,IT高级讲师,CSDN社区专家.特邀编辑,畅销书作者,国家专利发明人;已出版书籍:<手把手教你架构3D游戏引擎>电子工业出版社和<Unity3D ...
- MyEclipse中加入web项目到tomcat
假设导入不是在MyEclipse下建立的web项目,想加入到tomcat中时,会显示"No projects are available for deployment to this ser ...
- 【Ubuntu】莫名其妙硬盘空间满了
一个个翻找,发现是 ~/.cache 占用了很多空间,遂删去其中内容 没有什么负面影响,删掉之后节省了许多空间
- abstract (C# Reference)
https://msdn.microsoft.com/en-us/library/sf985hc5.aspx The abstract modifier indicates that the thin ...
- 把TXT GB2312文件转换成TXT UTF8文件
/// <summary> /// 把TXT GB2312文件转换成TXT UTF8文件 /// </summary> /// < ...