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 ...
随机推荐
- Elasticsearch7.X 入门学习第八课笔记-----索引模板和动态模板
原文:Elasticsearch7.X 入门学习第八课笔记-----索引模板和动态模板 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接: ...
- 7、前端知识点--关于Array.from详解
1.Array.from()方法就是将一个类数组对象 或 可遍历对象 或 可迭代对象 转换成一个真正的数组.浅拷贝的数组实例. 2.那么,什么是类数组对象呢?所谓类数组对象,最基本的要求就是具有len ...
- Javascript 原型链之原型对象、实例和构造函数三者之间的关系
前言:用了这么久js,对于它的原型链一直有种模糊的不确切感,很不爽,隧解析之. 本文主要解决的问题有以下三个: (1)constructor 和 prototype 以及实例之间啥关系? (2)pro ...
- 2018-8-10-WPF-控件继承树
title author date CreateTime categories WPF 控件继承树 lindexi 2018-08-10 19:16:53 +0800 2018-2-13 17:23: ...
- Linux 性能测试工具 sysbench 的安装与简单使用
文章目录 Linux 性能测试工具 sysbench 的安装与简单使用 一 背景 二 实验环境 2.1 操作系统 2.2 其他配 ...
- Integer类的缓存机制
一.Integer类的缓存机制 我们查看Integer的源码,就会发现里面有个静态内部类. public static Integer valueOf(int i) { assert IntegerC ...
- Vue 组件间的传值(通讯)
组件之间的通讯分为三种 父给子传 子给父传 兄弟组件之间的通讯 1 父组件给子组件传值 子组件嵌套在父组件内部,父组件给子组件传递一个标识,在子组件内部用props接收,子组件在模板里可以通过{{}} ...
- vue-cli 2.0搭建vue脚手架步骤
1.安装node 检测版本node -v 2.安装webpack npm install webpack -g 检测版本 webpack -v 3.安装vue-cli npm install vue- ...
- js获取(URL)地址栏参数
//获取地址栏参数 //url为空时为调用当前url地址 //调用方法为 var params = getPatams(); function getParams(url) { var theRe ...
- python学习笔记(十七)flask模块写接口
import flask,json from tools import op_mysql #op_mysql() # 接口,后台服务 server = flask.Flask(__name__) #把 ...