html5表单元素有哪些
这篇文章主要讲解了“html5表单元素有哪些”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“html5表单元素有哪些”吧！
html5表单元素包括的基本控件：1、单行文本输入框；2、密码输入框；3、多行文本输入框（文本域）；4、下拉列表；5、单选框；6、复选框；7、提交按钮；8、重置按钮；9、fieldest控件；10、legend控件等。
本教程操作环境：windows7系统、HTML5版、Dell G3电脑。
表单概述
表单一般用来收集用户信息，让用户填写、选择，提交相关信息；在网页中， 我们也需要跟用户进行交互，收集用户资料，此时也需要表单；供用户输入的 HTML 表单通过 <form></form> 标签来创建
在 HTML 中，一个完整的表单通常由表单控件（表单元素）、提示信息和表单域三部分构成
表单控件
包含了具体的表单功能项，例如：单行文本输入框、密码输入框、单选框、复选框、提交按钮、重置按钮等
提示信息
一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作
表单域
相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过表单域定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法；如果不定义表单域，表单中的数据就无法传送到后台服务器
完整的表单包含以下元素
form用于创建 HTML 表单input控件，单标签，可用于设置输入框、单选框、复选框、上传文件、提交按钮等label为对应的 input 标签定义标注（可以认为是一个标记或说明）；如果被标注的是输入框，点击标注内容时光标自动在输入框中聚焦textarea控件，用于创建多行文本输入框（文本域）select用于定义下拉列表，需要与 option 标签结合使用；使用 select 时需要设置 name 属性，用于对提交到服务器的表单数据进行标识option定义下拉列表中的项，默认只能选择一项；使用时需要设置 value 属性，提交表单时会将对应的选项值提交到服务器fieldest对相关的表单元素进行分组，通常与legend标签结合使用legend为 fieldest 的分组元素定义标题button定义一个按钮，在表单中使用该元素则这个元素具有提交表单的功能；通常在表单中通过 input 标签的 type 属性来设置提交表单的按钮
各标签常见的属性
<form></form> 标签
name设置表单的名称action表单的提交动作，表示表单将被提交到哪里；值为 URL 可以是相对地址或绝对地址method表单的提交方法，用何种 HTTP 方法提交表单；一般值为 get 或 post 两种enctype设置表单数据编码的编码方式；服务端会根据设置的编码方式对提交的数据进行解码；其值有三种：
application/x-www-form-urlencoded在发送前编码所有字符（默认）multipart/form-data不对字符编码；在使用包含文件上传控件的表单时，必须使用该值text/plain空格转换为 “+” 加号，但不对特殊字符编码
<input /> 标签
name定义 input 元素的名称；向服务器提交当前标签中的数据时需要设置该属性value设置 input 元素的值value 属性对于不同 input 类型，用法也有所不同：
对于 text、password、hidden 类型，用于定义输入框中的初始（默认）值
对于 checkbox、radio、image 类型，用于定义与 input 元素相关的值，当提交表单时该值会发送到表单的 action URL
对于 button、reset、submit 类型，用于定义按钮上显示的文本内容
注： input 类型为 checkbox 和 radio 时，必须要设置 value 属性
maxlength设置 input 标签中的最大字符个数，值为数值类型，超过最大字符个数的部分不会被录入；一般用于输入框autofocus设置了该属性在页面加载时会自动聚焦，属性值可以不写；一个表单只能有一个 input 标签设置该属性，多用于输入框placeholder用于设置简短的提示文本；多用于输入框，输入内容时提示信息自动消失checked设置某个选项默认被选中；属性值为 checked，可省略不写；该属性只针对 type=“checkbox” 或者 type=“radio” 有效accept设置提交的文件的类型，只针对 type=“file” 有效；点击 “选择文件” 按钮后，在弹出的资源管理器中只显示匹配的文件类型属性值有：
audio outline: 0; overflow: auto; border: 1px solid gray;}![html5表单元素有哪些]()
<label></label>标签for规定与哪个表单元素进行绑定，其值为 input 标签的 id 属性对应的值<label for="uname">用户名</label><input type="text" id="uname" />![html5表单元素有哪些]()
也可以不使用 for 属性，直接用 label 标签包裹需要标注的 input<label>用户名<input type="text"></label>![html5表单元素有哪些]()
<select></select>标签name定义下拉列表的名称size设置显示下拉列表中可选项的数目disabled禁用下拉列表（无法点击选择）
<option></option>标签value用于设置选项值，被选中的项对应的值在表单提交时会传给服务器disabled设置禁用项，设置该属性的选项会被禁用selected设置默认选中项
默认效果：
<select name="city"> <option value="beijing">北京</option> <option value="tianjin">天津</option> <option value="shanghai">上海</option> <option value="chongqing">重庆</option> <option value="guangzhou">广州</option> <option value="shenzhen">深圳</option> </select>![html5表单元素有哪些]()
select 标签设置了 size 后的效果<select name="city" size="4">![html5表单元素有哪些]()
select 标签设置了 disabled 后的效果<select name="city" disabled="disabled">![html5表单元素有哪些]()
<fieldest><fieldest>标签name定义 fieldest 的名称disabled禁用
<legend></legend>标签align标题文本的对齐方式；值为 top、bottom、left、right
<fieldset name="info1"> <legend>基本信息</legend> 姓名：<input type="text" /> 年龄：<input type="text" /></fieldset><fieldset name="info2" disabled> <legend align="right">健康信息</legend> 身高：<input type="text" /> 体重：<input type="text" /></fieldset>![html5表单元素有哪些]()
<button></button>标签button可点击按钮；IE 默认值submit提交按钮；除 IE 外其他浏览器的默认值reset重置按钮，清除表单数据
感谢各位的阅读，以上就是“html5表单元素有哪些”的内容了，经过本文的学习后，相信大家对html5表单元素有哪些这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是编程网，小编将为大家推送更多相关知识点的文章，欢迎关注！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
