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类型

　　　　　　再提交表单的时候浏览器会自动验证填写的邮箱是否正确。

　　　　2)url类型

　　　　　　提交表单的时候，输入的内容时url地址格式的内容，则将数据提交到服务器，如果不是就不允许提交,url地址格式例子：http://www.baidu.com。

　　　　3)number类型

　　　　　　这是一个只能输入数值的输入框，其中的属性可以有min，max，step。

　　　　4)range类型

　　　　　　输出一定范围内数字值的文本框

　　　　5)date类型

　　　　　　输出年，月，日，如2017年6月6日会以2017-06-06显示。

　　　　6)month类型

　　　　　　输出月，年

　　　　7)week类型

　　　　　　输出周，年

　　　　8)time类型

　　　　　　输出小时，分钟

　　　　9)datetime类型

　　　　　　输出选取的时间，日，月，年，其中时间为UTC时间。

　　　　10)datetime-local类型

　　　　　　同datetime，但是其中时间为本地时间。

　　　　11)search类型

　　　　　　用于输入搜索关键词的文本框。

　　　　12)tel类型

　　　　　　用于输入电话号码的文本框，但他不限定制输入数字，也包括+，-，（，）等等。

　　　　13)color类型

　　　　　　用于设置颜色的文本框.

　　4.新增的input属性

　　　　1)autocomplete属性

　　　　　　在上面的form元素上的autocomplete属性是全局的，我们也可以在一个input元素上单独使用让这个元素自动补充或是不补充。

　　　　2)autofocus属性

　　　　　　用于自动获取光标焦点.一般在搜索页面中的搜索文本框，或者一个同意某许可协议的同意按钮。

　　　　3)width和height属性

　　　　　　仅用于image类型的高度和宽度的设置。单位是像素。

　　　　4)list属性

　　　　　　和datalist搭配使用，在datalist有详细介绍。

　　　　5)min,max,step属性

　　　　　　适用于date，picker，number，range属性的input标签。

　　　　6)multiple属性

　　　　　　input中file只支持单个文件的上传，multiple属性支持一次性选择多个文件。

　　　　7)pattern属性

　　　　　　用于验证input类型输入狂汇总用户输入的内容是否于自定义的正则表达式相匹配，适用于text，url，tel，email，password。

　　　　8)placeholder属性

　　　　　　用于为input类型的输入框提供一个提示，这些提示可以给用户一些提示性语言。

　　　　9)required属性

　　　　　　告诉用户这个输入框的内容不能为空。

转载于:https://www.cnblogs.com/iwebkit/p/6949774.html

HTML5form表单的相关知识总结相关推荐

HTML之表单的基本知识
HTML之表单的基本知识点我进群一起学习交流!(群里有许多的学习资料,我做过的一些网页我都上传在群里了,需要的直接下载就可以了) QQ群:722384575 现实中的表单,我们去银行办理信 ...
HTML的基本知识（七）——表单的基本知识及案例
HTML的基本知识(七)--表单的基本知识及案例我为什么要努力?我喜欢的东西都很贵,我想去的地方都很远,我爱的人超级完美,这就是我努力的理由. 一.认识表单 1.表单在WEB网页中用来给访问者填写信 ...
javascript表单处理相关的知识总结（一）
在HTML中,表单是由元素来表示的,而在JavaScript中,表单对应的则是HTMLFormElement类型.HTMLFormElement继承了HTMLElement,它拥有HTML元素具有的默 ...
了解表格与表单的基本知识
表格现在还是较为常用的一种标签,但不是用来布局,常见处理.显示表格式数据. 一.创建表格: 在HTML网页中,要想创建表格,就需要使用表格相关的标签.创建表格的基本语法格式如下: <table& ...
表单实例（判断两次密码是否一致）
表单实例(判断两次密码是否一致) 一.实例描述: 本例是一个综合性的练习,除了们正在学习的JS知识外,还用到了HTML的表格,表单等相关知识. 二.截图三.代码 1 <!DOCTYPE htm ...
【Web安全】PHP与Web表单交互-POST方法与GET方法（看不懂你来打我）
PHP与Web页面交互是实现PHP网站与用户交互的重要手段.在PHP中提供了两种与Web页面交互的方法,一种是通过Web表单提交数据,另一种是通过URL参数传递. 这里我们将详细讲解表单的相关知识,为 ...
easyui表单网格列错位_《HTML5从入门到精通》——第3章 HTML表格与表单
<HTML5从入门到精通> ◎千锋教育高教产品研发部/编著 (清华大学出版社出版) 目录第3章 HTML表格与表单................................... ...
bootstrap html5 表单验证,基于Bootstrap+jQuery.validate实现表单验证
这大概是一种惯例,学习前台后台最开始接触的业务都是用户注册和登录.现在社会坚持以人为本的理念,在网站开发过程同样如此.User是我们面对较多的对象,也是较核心的对象.最开始的用户注册和登陆这块,也就尤 ...
如何优雅的使用 Angular 表单验证
随便说说,这一节可以跳过去年参加 ngChine 2018 杭州开发者大会的时候记得有人问我: Worktile 是什么时候开始使用 Angular 的,我说是今年(2018年) 3 月份开始在新模 ...
PHP-计算表单提交的数据
简书 : https://www.jianshu.com/p/5a27a9706a5d 目录 1 实践目的与任务 2 使用的工具.环境配置.知识点等 3 实践内容及要求 (1)配置phpS ...

HTML5form表单的相关知识总结

HTML5form表单的相关知识总结相关推荐

最新文章

热门文章