<!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属性的更多相关文章

  1. HTML5新增的属性

    关于html5新增的属性: HTML5现在已经不是SGML的子集,主要是增加了关于图像,位置,存储,多任务等功能. 绘画CANVAS; 用于播放媒体的video和audio元素: 本地离线存储loca ...

  2. HTML5新增的属性和废除的属性

    HTML5中,在新增加和废除很多元素的同时,也增加和废除了很多属性. 新增的属性 1.表单相关的属性 对input(type=text).select.textarea与button指定autofoc ...

  3. HTML5 新增通用属性

    一:HTML5保留的常用元素 7. 表格相关元素.表格在html里还算重要的了.   <table>  :用于表格定义.    cellpadding: 单元格内容和单元格边框距离    ...

  4. HTML5新增标签属性

    ----- 新类型表单 - email 自动校验输入的是不否是email 邮箱:<input type="email" name="user_email" ...

  5. 全栈JavaScript之路（十七）HTML5 新增字符集属性

    HTML5 添加�了几个文档字符集属性. document.charset : 表示文档的实际使用的字符集. document.defaultCharset: 表示默认的字符集,跟浏览器以及操作系统设 ...

  6. HTML5新增常用属性

    一. 代码名称语义化的好处 1.能让搜索引擎更好的收录 2.对于特殊设备如盲人设备好解析 二.article和section的区别 article(文章):独立且能被外部引用 section(章节.段 ...

  7. html5新增全局属性

    data-* 如:data-type,data-role等 hidden  <div hidden></div> 隐藏该div spellcheck <textarea ...

  8. HTML5新增属性学习笔记

    1.form属性 表单内的从属元素,可以写在表单外部.可以通过指定元素的form属性来声明元素所属表单.form的属性值为表单的id. <form id="testForm" ...

  9. HTML5 学习总结（二）——HTML5新增属性与表单元素

    一.HTML5新增属性 1.1.contextmenu contextmenu的作用是指定右键菜单. <!DOCTYPE html> <html> <head> & ...

  10. HTML5 学习笔记（二）——HTML5新增属性与表单元素

    目录 一.HTML5新增属性 1.1.contextmenu 1.2.contentEditable 1.3.hidden 1.4.draggable 1.5.data-* 1.6.placehold ...

随机推荐

  1. C#中ComboBox动态绑定赋值

    http://www.crifan.com/csharp_combobox_data_dynamic_binding/ C#中,已有一个List,想要动态的,绑定到ComboBox中. [解决过程] ...

  2. OPECV的配置

    因为要做一点道路是别的东西,所以想用到OPENCV的一些东西.在网上找了一些OPENCCSHARP的代码,但是这方面的书籍或者资料还是不是特别的多,所以我就觉得可能还不是很好.主要的原因还是因为自己的 ...

  3. python 简易小爬虫

    此脚本用于爬站点的下载链接,最终输出到txt文档中. 如果是没有防盗链设置的站点,也可以使用脚本中的下载函数尝试直接下载. 本脚本是为了短期特定目标设计的,如果使用它爬其它特征的资源链接需自行修改配置 ...

  4. RocketMQ集群部署安装

    RcoketMQ:[ 1.低延时:在高压下,1毫秒内超过99.6%的反应延迟. 2.面向金融:具有跟踪和审计功能的高可用性. 3.行业可持续发展:保证了万亿级的消息容量. 4.厂商中立:一个新的开放的 ...

  5. python3-定义函数

    在Python中,定义一个函数要使用def语句,依次写出函数名.括号.括号中的参数和冒号:,然后,在缩进块中编写函数体,函数的返回值用return语句返回. 我们以自定义一个求绝对值的my_abs函数 ...

  6. 黑客教父郭盛华：提升家庭WiFi的10个方法

    中国黑客教父,知名网络安全专家郭盛华曾发博文表示:“WiFi是互联网发展过程中最重要的发展之一,虚拟世界没有百分百的安全,所以杀毒软件并不可以抵抗全部的黑客攻击.“ 用户WiFi密码尽量不要使用简单单 ...

  7. 编译原理--NFA/DFA

    现成的, 讲义: https://www.cnblogs.com/AndyEvans/p/10240790.html https://www.cnblogs.com/AndyEvans/p/10241 ...

  8. 前端之form表单与css（1）

    目录 一.form表单 1.1表单的属性 1.2input 1.2.1form表单提交数据的两种方式 1.3select标签 1.4label标签 1.5textarea多行文本标签 二.CSS 2. ...

  9. LeetCode--045--跳跃游戏II(java)

    给定一个非负整数数组,你最初位于数组的第一个位置. 数组中的每个元素代表你在该位置可以跳跃的最大长度. 你的目标是使用最少的跳跃次数到达数组的最后一个位置. 示例: 输入: [2,3,1,1,4] 输 ...

  10. Spring学习总结（1）- IOC

    一.Spring框架概述 Spring是一个开源免费的框架,为了解决企业应用开发的复杂性而创建.Spring框架是一个轻量级的解决方案,可以一站式地构建企业级应用.Spring是模块化的,所以可以只使 ...