常见的表单元素有哪些？各有什么属性？
常见的表单元素有哪些？各有什么属性？
1.背景介绍
表单元素是允许⽤户在表单中输⼊信息的元素。随着时代的改变和互联⽹的发展，表单的使⽤越来越⼴泛。
2.知识剖析
（1）什么是表单
表单在⽹页中主要负责数据采集功能。⼀个表单有三个基本组成部分： 表单标签：这⾥⾯包含了处理表单数据所⽤CGI程序的URL以及数据提交到服务器的⽅法。 表单域：包含了⽂本框、密码框、隐藏域、多⾏⽂本框、复选框、单选框、下拉选择框和⽂件上传框等。 表单按钮：包括提交按钮、复位按钮和⼀般按钮；⽤于将数据传送到服务器上的CGI脚本或者取消输⼊，还可以⽤表单按钮来控制其他定义了处理脚本的处理⼯作。
（2）常⽤表单元素
form：定义供⽤户输⼊的表单。
fieldset：定义域。即输⼊区加有⽂字的边框。
legend：定义域的标题，即边框上的⽂字。
label：定义⼀个控制的标签。如输⼊框前的⽂字，⽤以关联⽤户的选择。
input：定义输⼊域，常⽤。可设置type属性，从⽽具有不同功能。
textarea：定义⽂本域(⼀个多⾏的输⼊控件)，默认可通过⿏标拖动调整⼤⼩。
button：定义⼀个按钮。
select：定义⼀个选择列表，即下拉列表。
option：定义下拉列表中的选项。
（3）表单的种类
① ⽂本框: ⽂本框是⼀种让访问者⾃⼰输⼊内容的表单对象，通常被⽤来填写信息或者简短的回答，如姓名、地址等。
代码格式：<input type="text" name="..." size="..." maxlength="..." value="..."
属性解释：
type="text"定义单⾏⽂本输⼊框；
name属性定义⽂本框的名称，要保证数据的准确采集，必须定义⼀个独⼀⽆⼆的名称；
size属性定义⽂本框的宽度，单位是单个字符宽度；
maxlength属性定义最多输⼊的字符数；
value属性定义⽂本框的初始值。
② 多⾏⽂本框: 也是⼀种让访问者⾃⼰输⼊内容的表单对象，只不过能让访问者填写较长的内容。
代码格式：<textarea name="..." cols="..." rows="..." wrap="VIRTUAL"></textarea>
属性解释：
name属性定义多⾏⽂本框的名称，要保证数据的准确采集，必须定义⼀个独⼀⽆⼆的名称；
cols属性定义多⾏⽂本框的宽度，单位是单个字符宽度；
rows属性定义多⾏⽂本框的⾼度，单位是单个字符宽度；
wrap属性定义输⼊内容⼤于⽂本域时显⽰的⽅式。
③ 密码框: 是⼀种特殊的⽂本域，⽤于输⼊密码。当访问者输⼊⽂字时，⽂字会被星号或其它符号代替，⽽输⼊的⽂字会被隐藏。html中提交表单用什么属性
代码格式：<input type="password" name="..." size="..." maxlength="...">
属性解释：
type="password"定义密码框；
name属性定义密码框的名称，要保证数据的准确采集，必须定义⼀个独⼀⽆⼆的名称；
size属性定义密码框的宽度，单位是单个字符宽度；
maxlength属性定义最多输⼊的字符数。
④ 隐藏域: 隐藏域是⽤来收集或发送信息的不可见元素，对于⽹页的访问者来说，隐藏域是看不见的。当表单被提交时，隐藏域就会将信息⽤你设置时定义的名称和值发送到服务器上。
代码格式：<input type="hidden" name="..." value="...">
属性解释：
type="hidden"定义隐藏域；
name属性定义隐藏域的名称，要保证数据的准确采集，必须定义⼀个独⼀⽆⼆的名称；
value属性定义隐藏域的值。
⑤ 单选框: 当需要访问者在单选项中选择唯⼀的答案时，就需要⽤到单选框了。
代码格式：<input type="radio" name="..." value="...">
属性解释：
type="radio"定义单选框；
name属性定义单选框的名称，要保证数据的准确采集，单选框都是以组为单位使⽤的，在同⼀组中的单选项都必须⽤同⼀个名称；
value属性定义单选框的值，在同⼀组中，它们的域值必须是不同的。
⑥ 复选框: 复选框允许在待选项中选中⼀项以上的选项。每个复选框都是⼀个独⽴的元素，都必须有⼀个唯⼀的名称。
代码格式：<input type="checkbox" name="..." value="...">
属性解释：
type="checkbox"定义复选框；
name属性定义复选框的名称，要保证数据的准确采集，必须定义⼀个独⼀⽆⼆的名称；
value属性定义复选框的值。
⑦ 提交按钮: 提交按钮⽤来将输⼊的信息提交到服务器。
代码格式：<input type="submit" name="..." value="...">
属性解释：
type="submit"定义提交按钮；
name属性定义提交按钮的名称；
value属性定义按钮的显⽰⽂字。
⑧ 复位按钮: 复位按钮⽤来重置表单。
代码格式：<input type="reset" name="..." value="...">
属性解释：
type="reset"定义复位按钮；
name属性定义复位按钮的名称；
value属性定义按钮的显⽰⽂字。
常⽤type属性：button、checkbox、hidden、image、password、checkbox、radio、reset、submit、text。
3.常见问题
4.解决⽅案
5.编码实战
6.扩展思考
html5新增type属性：
（1）search：input会呈现为搜索框（与text类型的唯⼀区别在于当⿏标覆盖时尾部出现叉号可快速清除输⼊的内容）。
（2）tel：编辑电话号码的控件，提交时换⾏符会⾃动从输⼊框中去掉（普通的text并不会，故text类型验证输⼊值时⼀般需要trim()函数处理）。
（3）url：编辑url的控件，提交时换⾏符与⾸位的空格都将⾃动去除。
（4）email：可输⼊⼀个邮件地址。
7.参考⽂献
（1）html元素 —— 表单元素及实⽤属性
（2）HTML5-input元素新特性
（3）W3School HTML 表单
（4）菜鸟教程
8.更多讨论
问题⼀
css如何实现input不可编辑？
答：有两种⽅法
第⼀：disabled="disabled"这样定义之后被禁⽤的 input 元素既不可⽤，也不可点击。
第⼆：readonly="readonly" 只读字段是不能修改的。不过，⽤户仍然可以使⽤ tab 键切换到该字段，还可以选中或拷贝其⽂本。问题⼆
如何实现会发光的输⼊框input？
答：
取消浏览器默认样式outline。
设置边框样式、宽度、颜⾊。
设置边框阴影。
渐变过渡效果
问题三
⽤HTML5怎么实现输⼊密码功能（六个格⼦）？
答：⽤六个li充当六个格⼦，同时将input框隐藏，点击承载六个格⼦的容器时，使焦点聚焦在input上。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。