一、前言
HTML标签千千万，要学习的占一半。上篇文章中我们学习了列表标签，针对有序列表、无序列表、自定义列表和嵌套列表进行简单的学习了解和实操。本篇文章将为大家介绍另一种常用标签，那就是表单类标签。
我们在网页中经常会看到表单的出现，最常见的就是登录界面，登录界面一般包含用户名、密码、勾选协议以及登录按钮，有些还要填写其他信息。
我们今天来介绍几种常用的表单类标签：
分别是<form>、<input>、<textarea>、<label>、<select>、<button>。
二、form标签
form标签顾名思义就是表单标签，这个标签主要用来提供一个表单，它里面可以包裹各种表单控件，表单控件指的就是我们常见的输入框、下拉框、按钮等表单上会出现的东西，我们统称为表单控件。
form标签有很多个属性，最常用的是action和method这两个，action是用于定义这个表单提交的路径，即告诉浏览器你这个表单要提交到哪里去，具体是哪个url；method则是用来定义这个表单的提交方法，这里不详细介绍方法这个概念，有兴趣的小伙伴可以去了解一下request请求的相关知识。
以下是代码示例：
<form></form>
接下来介绍的其他表单类控件标签都是<form></form>所包裹的内容，即表单的内容。
三、input标签
input标签就是一种表单控件，这个标签是最重要也是最全能的一个表单类标签，它可以在网页中表现为各种样子，比如输入框、单选框、文件上传、按钮等等，这取决它的属性type的值。当type配置不同值时，它对应展示的表单控件是不一样的，下面列了几个常用的type属性的取值。
| 取值 | 含义 |
|---|---|
| text | type属性的默认取值，文本输入框 |
| button | 按钮 |
| checkbox | 复选框 |
| radio | 单选按钮 |
| date | 日期控件，不含具体时间 |
| 电子邮件地址输入框 | |
| file | 文件上传按钮 |
| number | 数字输入框 |
| password | 密码输入框，会隐藏密码 |
| search | 带搜索按钮的搜索输入框 |
| submit | 提交按钮 |
| reset | 重置按钮 |
input标签根据不同的type类型会需要配置不同的其他属性值，具体标签使用方法和属性配置大家可以去W3school看看。
以下是代码示例：
<input type=“password”/>
看看效果：
四、textarea标签
textarea标签是多行文本输入框控件，就是我们平常也写一大段话时，比如写说明、写评论等，一般我们都会选择这个标签，它允许你输入大段文本，同时还可以设置文本区域的大小。
一般是通过属性cols和rows来设置文本区域大小的，cols用于设置文本区域的可见宽度，rows则是设置可见的行数，他们的取值都是数值，但是单位不一样，rows是行，cols是px（像素单位，简单认为就是浏览器对长度的计量单位）。
textarea标签比较常用的属性就是maxlength和placeholder。maxlength表示当前这个文本输入框你最多可以输入多少个字，即最大输入字数。placeholder就是定义文本输入框还未输入文本前框里的输入说明。
以下是代码示例：
<textarea rows=“3” cols=“100” maxlength=“100” placeholder=“请输入你讨厌咒术回战的真人的原因”></textarea>
看看效果：
五、label标签
label标签表示文本标签，它本身不像其他控件那样有具体的控件展示形式，比如输入框、下拉框、按钮等，它主要用于展示文本，不过它可以让你在点击它所包裹的文本时，触发跟它所关联绑定的控件。
比如我们经常用的单选按钮，按钮控件可点击范围很小，如果我们将按钮控件跟label控件绑定，那我们就可以通过点击label标签的文本来触发对按钮控件的点击了。label标签是通过它的for属性跟其他控件建立联系的，这有效提高了用户的交互体验，增强了交互友好性。
以下是示例代码：
<h1>选择一个你超级喜欢的人吧！</h1>
<input type="radio" id="qihai" name="people" value="nanami">
<label for="html">七海建人</label><br>
<input type="radio" id="dingqi" name="people " value="qiangwei">
<label for="css">钉崎蔷薇</label><br>
<input type="radio" id="wutiao " name=" people" value="wutiaowu">
<label for="javascript">五条悟 </label><br><br>
<input type="submit" value="提交">
看看效果哟：
六、select标签
select标签就是我们平常用到的下拉框，一般跟option标签一起使用，该标签要使用name属性来与表单构建联系，如果没有设置对应的name属性，提交表单时会出现问题。同时，我们也会用id这个属性来与label标签建立联系，将id属性的值设置为label标签的for属性的值，就可以建立联系了。
以下是示例代码：
<label for="people">请选择一个你喜欢的动漫角色：</label>
<select name=" people " id=" people ">
<option value="huzhang ">虎杖</option>
<option value="sunuo">宿傩</option>
<option value="qihai">七海</option>
<option value="dingqi">钉崎</option>
</select>
看看效果：
七、button标签
button标签会展示为一个按钮控件，它跟type属性为button的input标签区别在于，它可以包裹更多类型的内容，比如多媒体。
button标签的使用要指定按钮类型，即为它的属性type设置一个值。type属性的取值有button、reset和submit。button即表示该按钮为普通按钮，不具备其他能力。reset表示该按钮为重置按钮，可以将表单控件的输入内容进行重置。Submit表示该按钮为提交按钮，点击可以将表单输入内容进行提交。
以下是示例代码
<input type="password">
<br>
<br>
<button type="button">普通按钮</button>
<button type="submit" value="提交">提交</button>
<button type="reset" value="重置">重置</button>
看看效果：
八、小结
本篇为大家简单介绍了HTML标签中经常用到的几种表单标签，大家多敲敲代码，在浏览器上看看效果，加深一下对这些标签的理解。
- 欢迎关注我的公众号，不仅为你推荐最新的博文，还有更多惊喜和资源在等着你!一起学习共同进步！
