正文
html5表单必填项 html表单必须填写
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
HTML5 新增加了哪些表单元素
首先先说一个html5中表单新增的一个功能，在我们之前的html中，表单元素必须放在form元素所包含的里面，在html5中，可以把他们写在页面上的任何一个地方，然后给该元素增加一个form属性，form属性的值为form表单的id，如下：
[html] view plain copy
form method="get" id="test"
input type="text" name="name"/
input type="password" name="password"/
input type="submit" value="提交"
/form
input type="text" name="confirm" form="test"
在form元素里面的表单元素可以不用添加form属性，如果你想利用form获取所有表单元素的值，那么在form元素外面的表单元素就必须添加form属性，input、select、textarea等元素都满足该功能。
接下来开始介绍html5新增的表单元素，所有例子均用谷歌浏览器展示。
新增表单元素
email：提交表单的时候验证输入值是否满足email的格式
input type="email" name="email"/
url：提交表单的时候验证输入值是否满足url的格式
input type="url" name="url"/
number：根据你的设置提供选择数字的功能，其中min为最小值，max为最大值，value为默认值，step为点击箭头时数字的变化量，max、min、step、value均可不写，目前某些浏览器还不支持。
input type="number" name="number" min=2 max=100 step=5 value="15"/
range：会以一个滑块的形式表现包含一定范围内数字值的输入域，max为最大值，min为最小值，value为默认值，如果没有设置max和min，默认值是1-100
input type="range" name="range" min=20 max=200 value="60"/
日期和时间类型：
date：选取日、月、年
input type="date" name="date"/
month：选取月、年
input type="month" name="month"/
week：选取周、年
input type="week" name="week"/
time：选取小时、分钟
input type="time" name="time"/
datetime：选取时间、日、月、年(UTC时间)（我这里浏览器显示不出效果）
input type="datetime" name="datetime"/
datetime-local：选取时间、日、月、年(本地时间)
input type="datetime-local" name="datetime-local"/
search：用于搜索域，若加上result="s"属性，则会在搜索框前面加一个搜索图标（我这里浏览器显示不出效果）
input type="search" name="search" result="s"/
tel：验证输入的是否是电话号码的格式（我这里浏览器显示不出效果）
input type="tel" name="tel" /
color：color类型会提供颜色拾取器，供用户选择颜色，并将用户选择的颜色填充到此元素中
input type="color" name="color"/
新增input属性(部分容易理解的就不进行代码演示了)，后面为支持该属性的元素
autofocus：在打开页面时使元素自动获取焦点 //input,button,select,textarea
placeholder: 在用户输入时进行提示 // input,textarea
form：这篇文章的开头就有这个属性，它用于表明元素属于哪个表单，无论元素的位置在哪里，所属表单都能获取该元素的值 //input,output,button,select,textarea,fieldset
required：表明该元素是必填项，当提交表单的时候会自动验证该元素的内容是否不为空 //input,textarea
max/min/step：限制值的输入范围，以及值的变化程度。上面的新增number元素有介绍。 //input
autocomplete：使form元素或者input元素拥有自动完成功能，既记录用户之前输入的值，关闭为off，默认为on。 //form,input
表单重写属性： //input
formaction:重写表单的action属性
formenctype:重写表单的enctype属性。
enctype属性管理的是表单的MIME编码，MIME就是一种电子邮件传输的互联网标准，表明传递的信息类型和编码，共有三个值可选：
1，application/x-www-form-urlencoded（默认），设置表单传输的编码。
2，multipart/form-data，指定传输数据的特殊类型，主要就是上传的非文本内容，比如文件、图片。
3，text/plain，纯文本传输。
formmethod: 重写表单的method属性
formnovalidate:重写表单的novalidate属性
formtarget：重写表单的target属性。
比如:
[html] view plain copy
form action="test.html" method="get" autocomplete="on"
姓名: input type="text" name="name" /br /
密码: input type="password" name="pwd" /br /
input type="submit" formnovalidate="true" value="提交未经验证"/
/form
multiple:规定输入字段可选择多个值 //input,select
list：list属性的值为datalist元素的id，datalist元素类似于选择框，在文本框获得焦点的时候以提示输入的方式显示。如下：
[html] view plain copy
姓名：input type="text" name="name" list="name"/
datalist id="name"
option value="zhangsan"张三/option
option value="lisi"李四/option
option value-"wanger"王二/option
/datalist
pattern:验证input输入域的格式，即正则表达式。
input type="text" name="name" pattern="[A-z0-9]{8}"/
相关问答
Q1: html5 表单required属性、min和 max属性作用分别是什么?
required: 是必填的意思，就是这个字段不能为空
min和max: 一般是用于数字类型字段，限制这个字段的最小值和最大值，比如说年龄限制，min=1， max=120, 最小一岁，最大120岁
Q2: HTML5中表单验证的好处
HTML5中表单验证有如下好处：
1、可判断用户是否已填写表单中的必填项目。
2、可判断用户输入的邮件地址是否合法。
3、可判断用户是否已输入合法的日期。
4、可判断用户是否在数据域(numeric field)中输入了文本。
表单验证通常采用策略模式的思想，把一个个验证规则封装成一个函数，比如非空规则、最大长度规则等，不同的输入框选择某一个或者某几个规则进行验证。
扩展资料：
HTML表单一直都是Web的核心技术之一，有了它才能在Web上进行各种各样的应用。HTML5 Forms新增了许多新控件及其API，方便做更复杂的应用，而不用借助其它Javascript框架。
表单有以下几个基本知识点：
1、表单仍是以form元素作为容器，可在其中设置基本的提交特性。
2、当用户提交页面时，表单仍然向服务器发送表单控件的值。
3、之前老版本中的表单控件，如text radio checkbox等等，都可以按原有方式使用，尽管增加了新的功能。
4、仍然可以使用javascript操作表单控件。
关于html5表单必填项和html表单必须填写的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。
