前端——12.表单标签
创始人
2025-05-28 11:49:49
0

这篇文章,我们来讲一讲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标签中,

标签用于定义表单域,以实现用户信息的收集和传递。

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

语法规范:

    各种表单元素控件

常用属性:

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

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

我们需要记住以下两点:

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

3.表单元素

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

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

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

3.1 input表单元素

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

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

语法格式:

注意事项:

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

3.1.1 input标签的type属性

下面说一下标签的type属性及其属性值:

3.1.2实际演示

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

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

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

上面演示的都要掌握好! 

3.2 input标签的其他属性

除了type属性外,标签还有其他很多属性,其常用属性如下:

注意:

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

3.2.1实际演示

下面来看一下实际演示:

3.3 input标签的 label 标签

标签为input元素定义标注(标签)

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

语法:

        

核心:标签的for属性应当与相关元素的id属性相同

3.4 select 下拉表单元素

使用场景:在页面中,如果有多个选项让用户选择,并且想要节约页面空间时,我们可以选择使用

注意事项:

  1. 注意:

    1. 通过