HTML5-新增type属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="">
用户名:<input type="text" name="userName"> <br>
密码:<input type="password" name="userPwd"> <br>
<!--email提供了默认的电子邮箱的完整验证:要求必须包含@符号,同时必须包含服务器名称,如果不能满足验证,则会阻止当前的数据提交-->
邮箱:<input type="email"> <br>
<!--tel它并不是来实现验证。它的本质目的是为了能够在移动端打开数字键盘。意味着数字键盘限制了用户只能输入数字。 如何查看效果:qq发送文件>>手机端使用qq来接收>>使用手机浏览器查看-->
电话:<input type="tel"> <br>
<!--验证只能输入合法的网址:必须包含http://-->
网址:<input type="url"> <br>
<!--number:只能输入数字(包含小数点),不能输入其它的字符
max:最大值
min:最小值
value:默认值-->
数量:<input type="number" value="60" max="100" min="0"> <br>
<!--search:可以提供更人性化的输入体验-->
请输入商品名称:<input type="search"> <br>
<!--range:范围-->
范围:<input type="range" max="100" min="0" value="50"> <br>
颜色:<input type="color"> <br>
<!--日期时间相关-->
<!--time:时间:时分秒-->
时间:<input type="time"> <br>
<!--date:日期:年月日-->
日期:<input type="date"> <br>
<!--datetime:大多数浏览器不能支持datetime.用于屏幕阅读器-->
日期时间:<input type="datetime"><br>
<!--datetime-local:日期和时间-->
日期时间:<input type="datetime-local"> <br>
月份:<input type="month"> <br>
星期:<input type="week">
<!--提交-->
<input type="submit">
</form>
</body>
</html>
其他属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="" id="myForm">
<!--placeholder:提示文本,提示占位-->
<!--autofocus:自动获取焦点-->
<!--autocomplete:自动完成:on:打开 off:关闭
1.必须成功提交过:提交过才会记录
2.当前添加autocomplete的元素必须有name属性-->
用户名:<input type="text" name="userName" placeholder="请输入用户名" autofocus autocomplete="on"> <br>
<!--tel并不会实现验证,仅仅是在移动端能够弹出数字键盘-->
<!--required:必须输入,如果没有输入则会阻止当前数据提交-->
<!--pattern:正则表达式验证
*:代表任意个
?:代表0个或1个
+:代表1个或多个-->
手机号:<input type="tel" name="userPhone" required pattern="^(\+86)?1\d{10}$"> <br>
<!--multiple:可以选择多个文件-->
文件:<input type="file" name="photo" multiple> <br>
<!--email:有默认验证 在email中,multiple允许输入多个邮箱地址,以逗号分隔-->
邮箱:<input type="email" name="email" multiple><br> <!--提交:-->
<input type="submit"> <br>
</form>
<!--下面这个表单元素并没有包含在form中:默认情况下面表单元素的数据不会进行提交-->
<!--form:指定表单id,那么在将来指定id号的表单进行数据提交的时候,也会将当前表单元素的数据一起提交-->
地址:<input type="text" name="address" form="myForm">
</body>
</html>
HTML5-新增type属性的更多相关文章
- HTML5新增的属性
关于html5新增的属性: HTML5现在已经不是SGML的子集,主要是增加了关于图像,位置,存储,多任务等功能. 绘画CANVAS; 用于播放媒体的video和audio元素: 本地离线存储loca ...
- HTML5新增的属性和废除的属性
HTML5中,在新增加和废除很多元素的同时,也增加和废除了很多属性. 新增的属性 1.表单相关的属性 对input(type=text).select.textarea与button指定autofoc ...
- HTML5 新增通用属性
一:HTML5保留的常用元素 7. 表格相关元素.表格在html里还算重要的了. <table> :用于表格定义. cellpadding: 单元格内容和单元格边框距离 ...
- HTML5新增标签属性
----- 新类型表单 - email 自动校验输入的是不否是email 邮箱:<input type="email" name="user_email" ...
- 全栈JavaScript之路(十七)HTML5 新增字符集属性
HTML5 添加�了几个文档字符集属性. document.charset : 表示文档的实际使用的字符集. document.defaultCharset: 表示默认的字符集,跟浏览器以及操作系统设 ...
- HTML5新增常用属性
一. 代码名称语义化的好处 1.能让搜索引擎更好的收录 2.对于特殊设备如盲人设备好解析 二.article和section的区别 article(文章):独立且能被外部引用 section(章节.段 ...
- html5新增全局属性
data-* 如:data-type,data-role等 hidden <div hidden></div> 隐藏该div spellcheck <textarea ...
- HTML5新增属性学习笔记
1.form属性 表单内的从属元素,可以写在表单外部.可以通过指定元素的form属性来声明元素所属表单.form的属性值为表单的id. <form id="testForm" ...
- HTML5 学习总结(二)——HTML5新增属性与表单元素
一.HTML5新增属性 1.1.contextmenu contextmenu的作用是指定右键菜单. <!DOCTYPE html> <html> <head> & ...
- HTML5 学习笔记(二)——HTML5新增属性与表单元素
目录 一.HTML5新增属性 1.1.contextmenu 1.2.contentEditable 1.3.hidden 1.4.draggable 1.5.data-* 1.6.placehold ...
随机推荐
- js如何获取到select的option值???
1.获得选项option的值 var obj = document.getElementByIdx_x(”testSelect”); //定位id var index = obj.selectedIn ...
- Python3之Django Web框架中间件???
主要用来处理页面的登录验验.跨站请求伪造防御.日志记录.session设置,权限管理等
- 开发chrome插件(扩展)
官方文档 https://developer.chrome.com/extensions/getstarted.html [干货]Chrome插件(扩展)开发全攻略 http://blog.haoji ...
- NIO的缓冲区、通道、选择器关系理解
Buffer的数据存取 一个用于特定基本数据类行的容器.有java.nio包定义的,所有缓冲区都是抽象类Buffer的子类. Java NIO中的Buffer主要用于与NIO通道进行交互,数 ...
- Vue实现点击li变色
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- C# 获得系统环境
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
- 关于conda-新手必读
一.管理conda 通过anaconda来安装python及python包,让你不必关心系统是否安装了一些依赖,如zlib等等,anaconda已经集成了这些依赖,可以方便的安装python 下载请点 ...
- 朴素贝叶斯算法——实现新闻分类(Sklearn实现)
1.朴素贝叶斯实现新闻分类的步骤 (1)提供文本文件,即数据集下载 (2)准备数据 将数据集划分为训练集和测试集:使用jieba模块进行分词,词频统计,停用词过滤,文本特征提取,将文本数据向量化 停用 ...
- Fiddler过滤css、js、图片等静态文件
REGEX:(?insx)/[^\?/]*\.(css|ico|jpg|png|gif|bmp|wav)(\?.*)?$ REGEX:(?insx)/[^\?/]*\.(action|do)(\?.* ...
- Linux shell中自动完成登录
在写shell脚本时,需要登录到不同的服务器上执行相关命令,在未建立信任之前如何批量操作. 1.ssh 首次登录服务器时会提示RSA key fingerprint输入yes/no,可以通过下面的方法 ...