前端——12.表单标签

这篇文章，我们来讲一讲HTML中的表单标签

目录

1.表单标签概述

1.1为什么需要表单

1.2表单的组成

2.表单域

3.表单元素

3.1 input表单元素

3.1.1 input标签的type属性

3.1.2实际演示

3.2 input标签的其他属性

3.2.1实际演示

3.3 input标签的 label 标签

3.4 select 下拉表单元素

3.5 textarea文本域元素 

4.小结

---

1.表单标签概述

表单，我们很常用。现实中的表单，比如我们去银行办理信用卡填写的单子，如下图所示：

而我们网页中的表单如下如所示：

1.1为什么需要表单

不管是现实中，还是网页上，表单都是非常常用的。那有没有想过，我们为什么需要表单呢？

答：使用表单目的是为了收集用户信息。

在我们网页中，我们需要跟用户进行交互，收集用户资料，此时就需要表单。

1.2表单的组成

在HTML中，一个完整的表单通常由表单域、表单控件（也称为表单元素）和提示信息3个部分构成。

如下图所示：

2.表单域

表单域是一个包含表单元素的区域。

在HTML标签中，<form>标签用于定义表单域，以实现用户信息的收集和传递。

<form>会把它范围内的表单元素信息提交给浏览器。

语法规范：

    <form action="url地址" method="提交方式" name="表单域名称">
        各种表单元素控件
    </form>

常用属性：

属性	属性值	作用
action	url地址	用于指定接收并处理表单数据的服务器程序的url地址
method	get / post	用于设置表单数据的提交方式，其取值为get或post
name	名称	用于指定表单的名称，以区分同一个页面中的多个表单域

我们暂时不需要使用表单来提交数据，只需要写上form标签即可，后面我们学习服务器编程时会重新讲解的。

我们需要记住以下两点：

1. 在我们写表单元素之前，应该有个表单元素将其包裹起来
2. 表单域就是form标签

3.表单元素

在表单域中可以定义各种表单元素，这些表单元素就是允许用户在表单中输入或者选择的内容控件。

下面我们主要讲解以下几类表单元素：

1. input输入表单元素
2. select下拉表单元素
3. textarea文本域表单元素

3.1 input表单元素

在英文单词中，input是输入的意思，而在表单元素中<input>标签用于收集用户信息。

在<input>标签中，包含一个type属性，根据不同的type属性值，输入字段拥有很多种形式（可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等）。

语法格式：

<input type="属性值"/>

注意事项：

• <input / >标签为单标签
• type属性设置不同的属性值来指定不同的控件类型

3.1.1 input标签的type属性

下面说一下<input>标签的type属性及其属性值：

3.1.2实际演示

下面看一下实际演示效果： 

 实操时，我们可以根据具体需求来修改我们type的属性值

下面来看一下其他type属性的实际演示吧：

上面演示的都要掌握好！ 

3.2 input标签的其他属性

除了type属性外，<input>标签还有其他很多属性，其常用属性如下:

注意：

1. name和value是每个表单元素都有的属性值，主要给后台人员使用
2. name表单元素的名字，要求单选按钮和复选框要有相同的name值
3. checked属性主要针对于单选按钮和复选框，主要作用是一打开页面，就可以默认选中某个表单元素
4. maxlength是用户可以在表单元素输入的最大字符数，一般较少使用

3.2.1实际演示

下面来看一下实际演示：

3.3 input标签的 label 标签

<lable>标签为input元素定义标注（标签）

<lable>标签用于绑定一个表单元素，点击<lable>标签内的文本时，浏览器就会自动将焦点（光标）转到或者选择对应的表单元素上，用来增加用户体验

语法：

        <label for="sex">男</label>
        <input type="radio" name="性别" id="sex">

核心：<lable>标签的for属性应当与相关元素的id属性相同

3.4 select 下拉表单元素

使用场景：在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，我们可以选择使用<select>标签控件定义下拉列表

语法规范：

        <select>
            <option>北京</option>
            <option>杭州</option>
            <option>苏州</option>
            <option>纽约</option>
            <option>伦敦</option>
            <option>半人马座三体星系</option>
        </select>

注意事项：

1. <select>中至少包含一对<option>
2. 在<option>中定义select= "selected" 时，当前项即为默认选中项

实际演示：

3.5 textarea文本域元素 

使用场景：当用户输入内容较多的情况下，我们就不能使用文本框表单了，此时我们可以使用<textarea>标签

在表单元素中，<textarea>标签是用于定义多行文本输入的控件。

使用多行文本输入控件，可以输入更多的文字，该控件常见于留言板，评论。

语法格式：

        <textarea rows="3" cols="20">
            感谢留言！
        </textarea>

注意：

1. 通过<textarea>标签可以轻松的创建多行文本输入框
2. cols=“每行中的字符数”，rows=“显示的行数”，我们在实际开发中不会使用，都是用CSS来改变大小的

实际演示：

4.小结

这篇文章，我们主要讲了表单元素。其中包括<input><select>和<textarea>三者，其中最重要最难的是<input>，它的难点在于各种属性的记忆。多练练就好啦。