这篇文章,我们来讲一讲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.小结
表单,我们很常用。现实中的表单,比如我们去银行办理信用卡填写的单子,如下图所示:
而我们网页中的表单如下如所示:
不管是现实中,还是网页上,表单都是非常常用的。那有没有想过,我们为什么需要表单呢?
答:使用表单目的是为了收集用户信息。
在我们网页中,我们需要跟用户进行交互,收集用户资料,此时就需要表单。
在HTML中,一个完整的表单通常由表单域、表单控件(也称为表单元素)和提示信息3个部分构成。
如下图所示:
表单域是一个包含表单元素的区域。
在HTML标签中,用于定义表单域,以实现用户信息的收集和传递。
会把它范围内的表单元素信息提交给浏览器。
语法规范:
常用属性:
属性 | 属性值 | 作用 |
action | url地址 | 用于指定接收并处理表单数据的服务器程序的url地址 |
method | get / post | 用于设置表单数据的提交方式,其取值为get或post |
name | 名称 | 用于指定表单的名称,以区分同一个页面中的多个表单域 |
我们暂时不需要使用表单来提交数据,只需要写上form标签即可,后面我们学习服务器编程时会重新讲解的。
我们需要记住以下两点:
在表单域中可以定义各种表单元素,这些表单元素就是允许用户在表单中输入或者选择的内容控件。
下面我们主要讲解以下几类表单元素:
在英文单词中,input是输入的意思,而在表单元素中标签用于收集用户信息。
在标签中,包含一个type属性,根据不同的type属性值,输入字段拥有很多种形式(可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等)。
语法格式:
注意事项:
下面说一下标签的type属性及其属性值:
下面看一下实际演示效果:
实操时,我们可以根据具体需求来修改我们type的属性值
下面来看一下其他type属性的实际演示吧:
上面演示的都要掌握好!
除了type属性外,标签还有其他很多属性,其常用属性如下:
注意:
下面来看一下实际演示:
语法:
核心:
使用场景:在页面中,如果有多个选项让用户选择,并且想要节约页面空间时,我们可以选择使用
语法规范:
注意事项:
实际演示:
使用场景:当用户输入内容较多的情况下,我们就不能使用文本框表单了,此时我们可以使用标签
在表单元素中,
使用多行文本输入控件,可以输入更多的文字,该控件常见于留言板,评论。
语法格式:
注意:
实际演示:
这篇文章,我们主要讲了表单元素。其中包括