HTML5form表单的相关知识总结
首先在介绍HTML5form表单的新增内容之前，我总结了一下HTML的form表单的内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML表单标签</title>
</head>
<body>
<input type="text"><!--输入文本，字符，数字一切东西-->
<input type="password"><!--输入密码会以掩码的形式显示出来-->
<input type="radio"><!--单选框-->
<input type="checkbox"><!--复选框-->
<input type="submit"><!--提交按钮-->
<input type="reset"><!--重置按钮-->
<input type="image"><!--可以改变按钮颜色的提交按钮-->
<input type="hidden"><!--定义隐藏的输入字段-->
<input type="file"><!--浏览按钮，用于上传文件-->
<input type="button"><!--按钮-->
<select name="" id=""><!--下拉列表-->
<option value=""></option>
<option value=""></option>
<option value=""></option>
</select>
</body>
</html>
接下来总结HTML5的form表单内容，我分为新增的form元素，新增的form属性，新增的input类型，新增的input属性四个部分。
1.新增的form元素
1)datalist元素
datalist与option联合使用，datalist元素通常通过list属性与一个input相关联，达到的效果就是我们既可以手动输出，也可以选择下拉列表中的选项。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>datalist的使用</title>
</head>
<body>
<form action="#" method="get">
请输入网址：<input type="text" list="url_data">
<datalist id="url_data">
<option label="百度" value="http://www.baidu.com"></option>
<option label="腾讯" value="http://www.qq.com"></option>
<option label="搜狐" value="http://www.sohu.com"></option>
<input type="submit">
</datalist>
</form>
</body>
</html>
2)keygen元素
keygen元素是秘钥对生成器，能够使用户验证更为可靠。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>keygen元素的使用</title>
</head>
<body>
<form action="#" method="get">
请输入用户名：<input type="text"><br>
请选择加密强度：<keygen/><br>
<input type="submit">
</form>
</body>
</html>
3)output元素
output元素用于在浏览器中显示计算结果或脚本输出。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>output的使用</title>
</head>
<body>
<form action="#" method="get" name="form">
<output name="output"></output>
</form>
<script>
var a=parseInt(prompt("请输入第一个数：",0));
var b=parseInt(prompt("请输入第二个数：",0));
document.forms["form"]["output"].value=a*b;
</script>
</body>
</html>
2.新增的form属性
1)autocomplete属性
新增的autocomplete属性可以帮组用户在form表单中的元素中实现自动完成内容输入，不过在使用这项功能之前需要先启用浏览器本身的自动完成功能，才能使用autocomplete属性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>autocomplete属性的使用</title>
</head>
<body>
<form action="#" method="get" autocomplete="on"><!--当浏览器开启自动补充功能时，autocomplete不写也自动补充，但是如果将autocomplete设置成为off，那么就算浏览器开启自动补充功能，也没有补充效果。-->
姓名：<input type="text" name="name"><br><!--注意name属性不能省去，否则form表单的autocomplete属性不起作用。-->
密码：<input type="password" name="pass"><br>
电子邮箱：<input type="email" name="email"><br>
<input type="submit">
</form>
</body>
</html>
2)novalidate属性
form元素的novalidate属性用于在提交表单时取消整个表单的验证，即关闭对表单内所有元素的有效性检查。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>novalidate的使用</title>
</head>
<body>
<form action="" method="get" novalidate="true">
请输入正确的电子邮箱：<input type="email" name="user_email" >
<input type="submit" value="提交"><!--点击提交没有浏览器自带的邮箱验证提示了-->
</form>
</body>
</html>
3)formaction属性
等于action。
4)formenctype属性
等于enctype。
5)formmethod属性
等于method。
6)formnovalidate属性
等于novalidate。
7)formtarget属性
等于target。
3.新增的input类型
1)email类型
再提交表单的时候浏览器会自动验证填写的邮箱是否正确。
<input type="email" name="email" />
2)url类型
提交表单的时候，输入的内容时url地址格式的内容，则将数据提交到服务器，如果不是就不允许提交,url地址格式例子：http://www.baidu.com。
<input type="url" name="url"/>
3)number类型
这是一个只能输入数值的输入框，其中的属性可以有min，max，step。
<input type="number" name="number" min="1" max="20" step="4"/>
4)range类型
输出一定范围内数字值的文本框
<input type="range" name="range" min="1" max="20" step="4"/>
5)date类型
输出年，月，日，如2017年6月6日会以2017-06-06显示。
<input type="date" name="date"/>
6)month类型
输出月，年
<input type="month" name="month"/>
7)week类型
输出周，年
<input type="week" name="week"/>
8)time类型
输出小时，分钟
<input type="time" name="time" max="" min="" step="" value=""/>
9)datetime类型
输出选取的时间，日，月，年，其中时间为UTC时间。
<input type="datetime" name="datetime"/>
10)datetime-local类型
同datetime，但是其中时间为本地时间。
11)search类型
用于输入搜索关键词的文本框。
<input type="search" name="search"/>
12)tel类型
用于输入电话号码的文本框，但他不限定制输入数字，也包括+，-，（，）等等。
<input type="tel" name="tel"/>
13)color类型
用于设置颜色的文本框.
<input type="color" name="color"/>
4.新增的input属性
1)autocomplete属性
在上面的form元素上的autocomplete属性是全局的，我们也可以在一个input元素上单独使用让这个元素自动补充或是不补充。
<input type="text" autocomplete="off/on"/>
2)autofocus属性
用于自动获取光标焦点.一般在搜索页面中的搜索文本框，或者一个同意某许可协议的同意按钮。
<input type="text" autofocus="true"/>
3)width和height属性
仅用于image类型的高度和宽度的设置。单位是像素。
<input type="image" src="img/haha.png" width="50" height="50"/>
4)list属性
和datalist搭配使用，在datalist有详细介绍。
5)min,max,step属性
适用于date，picker，number，range属性的input标签。
6)multiple属性
input中file只支持单个文件的上传，multiple属性支持一次性选择多个文件。
<input type="file" multiple="multiple"/>
7)pattern属性
用于验证input类型输入狂汇总用户输入的内容是否于自定义的正则表达式相匹配，适用于text，url，tel，email，password。
<input type="text" pattern="[0-9]{6}"/>
8)placeholder属性
用于为input类型的输入框提供一个提示，这些提示可以给用户一些提示性语言。
<input type="tel" placeholder="请输入电话号码"/>
9)required属性
告诉用户这个输入框的内容不能为空。
<input type="text" required/>
HTML5form表单的相关知识总结的更多相关文章
- HTML5-form表单
什么是表单? 01.获取用户的输入 ==>收集数据 02.将用户的输入发送到服务器 ==>与服务器进行交互 相关属性: action:我们收集完用户的信息之后,需要提交的服务器地址 ...
- html5图片异步上传/ 表单提交相关
1 form 表单 get/post提交时候. action地址(或者啥ajax的url地址) 会涉及到跨域问题 常见跨域问题http://www.cnblogs.com/rainman/archiv ...
- Angular4笔记——表单状态相关的属性
表单状态字段(FromControl)touched和untouched用来判断用户是否访问过一个字段(也就是这个字段是否获取过焦点,如果获取过焦点,touched是true,untouched是fa ...
- Angular2 表单验证相关
angular4响应式表单与校验http://blog.csdn.net/xiagh/article/details/78360845?locationNum=10&fps=1 How to ...
- JavaScript/Jquery：Validform 验证表单的相关属性解释
当我们写提交表单的时候往往需要验证表单是否填写了内容,是否正确,这个插件可以很方便的完成我们需要的验证! 使用方法: 1.先引用js <script type="text/javasc ...
- iview中Modal弹窗做form表单验证相关问题
在modal中初始化状态,点击确定弹窗消失. 有的时候表单验证就不希望立刻消失 在iview官网中有自定义页头页脚 可以直接自定义使用 另一种验证写法 serform: { ctCatelogue: ...
- HTML - 表单标签相关
<html> <head></head> <body> <!-- 表单标签 : 收集其标签内部的数据, 提交给指定的服务器 action : 数据 ...
- 表单select相关
selectedIndex 属性可设置或返回下拉列表中被选选项的索引号. options[] 返回包含下拉列表中的所有选项的一个数组. add()向下拉列表添加一个选项. blur()从下拉列表移开焦 ...
- AngularJS表单验证实现方法详解
本文主要是通过源码实例和大家分享AngularJS中的表单验证相关知识,希望通过本文的分享,对大家学习AngularJS有所帮助. 1.常规表单验证: 2.AngularJs中提供的表单验证实例. 实 ...
随机推荐
- 解决vue变量未渲染前代码显示问题
在网络加载缓慢或者刷新的时候总会有那么一瞬间出现vue的模板代码,实在很影响美观,对于我这种有强迫症的人来说实在是忍无可忍,后来经过查找资料,终于发现了解决方法,可以使用vue现成的指令来解决这个问题 ...
- ubuntu—终端安装mysql
---恢复内容开始--- Step 1 : 安装指令 ~$ sudo apt-get install mysql-server Step 2: 查看是否正常安装 ~$ ps aux | grep my ...
- jQuery的简单函数
1. jQuery函数的基本语法: $(document).ready(function(){ //代码块: }) 2.window.onload()和$(document).ready()的区分: ...
- GDB简单使用
GDB简单使用 更多请参考:https://www.cnblogs.com/HKUI/p/8955443.html https://www.cnblogs.com/skyofbitbit/p/3672 ...
- HTTPS相关知识以及在golang中的应用
最近简单学习了HTTPS,并在golang中实践了一下,现在把学到的知识记录下来,方便以后查看,如果有幸能帮到有需要的人就更好了,如果有错误欢迎留言指出. 一些简单的概念,可以自行百度百科 HTTPS ...
- Codeforces Round #482 (Div. 2) ：B - Treasure Hunt
题目链接:http://codeforces.com/contest/979/problem/B 解题心得: 这个题题意就是三个人玩游戏,每个人都有一个相同长度的字符串,一共有n轮游戏,每一轮三个人必 ...
- java 第七章 面向对象高级特性
一.类的继承 (一)继承的含义 1.在Java中定义一个类时,让该类通过关键字extends继承一个已有的类,这就是类的继承(泛化). 2.被继承的类称为父类(超类,基类),新的类称为子类(派生类). ...
- .NET : 开发ActiveX控件(转载)
我估计有些朋友不清楚ActiveX控件,但这篇博客不是来解释这些概念的.如果你对ActiveX的概念不清楚,请参考这里: http://baike.baidu.com/view/28141.htm 这 ...
- 北京Uber优步司机奖励政策（2月16日）
滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...
- cyclone4驱动LM75A温湿度传感器学习
1. LM75A第一次使用,I2C接口,8脚 2. 打开quartus工程,下面只要是看看代码结构,问题在于多个always语句,逻辑上不太好分清楚,主要看状态机 module I2C_READ( c ...