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 ...
随机推荐
- github提交用户权限被拒
场景介绍: 之前登陆了朋友的github账号,保存了朋友的GitHub信息在本地.今天想重新提交一个项目到自己的GitHub账号时,一直用朋友的账号提交且提示权限被拒. 解决: 方法一,GitHub配 ...
- Docker环境下的前后端分离项目部署与运维
本教程将从零开始部署一个前后端分离的开源项目,利用docker虚拟机的容器技术,采用分布式集群部署,将项目转换成为高性能.高负载.高可用的部署方案.包括了MySQL集群.Redis集群.负载均衡.双机 ...
- motd - 当日消息
描述 (DESCRIPTION) 在 登录 系统 后, 执行 登录 shell 前, login(1) 显示 /etc/motd 中的 内容. "motd" 意思是 "m ...
- Sql 统计一个表有多少列
SELECT COUNT(syscolumns.name) FROM syscolumns , sysobjects WHERE syscolumns.id = sysobjects.id AND s ...
- 树——binary-tree-postorder-traversal（树的后序遍历）
问题: Given a binary tree, return the postorder traversal of its nodes' values. For example: Given bin ...
- neo4j传参
py2neo_graph= py2neo.Graph("http://****", user="****", password="*****" ...
- AOP技术介绍－－（AOP技术基础）
2.1 AOP技术起源 AOP技术的诞生并不算晚,早在1990年开始,来自Xerox Palo Alto Research Lab(即PARC)的研究人员就对面向对象思想的局限性进行了分 ...
- [HYSBZ - 3252] 攻略
问题描述 题目简述:树版[k取方格数] 众所周知,桂木桂马是攻略之神,开启攻略之神模式后,他可以同时攻略k部游戏.今天他得到了一款新游戏<XX 半岛>,这款游戏有n个场景(scene),某 ...
- 【leetcode】1035. Uncrossed Lines
题目如下: We write the integers of A and B (in the order they are given) on two separate horizontal line ...
- re正则常用示例积累
2019-12-7 import re ''' 示例1: 提取网站的网址 ''' urls = ['https://blog.csdn.net/xxcupid/article/details/5199 ...