HTML小白入门学习-表单标签

一、前言

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	日期控件，不含具体时间
email	电子邮件地址输入框
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="qihai">七海建人</label><br>
<input type="radio" id="dingqi" name="people" value="qiangwei">
<label for="dingqi">钉崎蔷薇</label><br>
<input type="radio" id="wutiao" name="people" value="wutiaowu">
<label for="wutiao">五条悟 </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标签中经常用到的几种表单标签，大家多敲敲代码，在浏览器上看看效果，加深一下对这些标签的理解。

• 欢迎关注我的公众号，不仅为你推荐最新的博文，还有更多惊喜和资源在等着你!一起学习共同进步！