HTML（十二）：表单标签和label标签

现实中的表单，例如，我们去银行办理信用卡填写的单子。

网页中的表单展示

为什么需要表单

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

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

表单的组成

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

表单域

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

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

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

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

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

  • input表单元素

  • select下拉表单元素

  • textarea文本域元素

属性说明：

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

p.s.：这里我们暂时不用表单域提交数据，只需要写上form标签即可。

input表单元素

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

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

基本语法

<form action="url地址" method="提交方式" name="表单域名称">
    <input type="属性值">
</form>
  • <input>标签为单标签
  • type属性设置不同的属性值用来指定不同的控件类型

input标签的属性及描述

type属性的属性值及其描述如下：

属性值 描述
button 定义点击按钮（多数情况下，用于通过js启动脚本）。
checkbox 定义复选框。
file 定义输入字段和“浏览”按钮，供文件上传。
hidden 定义隐藏的输入字段。
image 定义图像形式的提交按钮。
password 定义密码字段，该字段中的字符呗掩码。
radio 定义单选按钮。
reset 定义重置按钮，重置按钮会清除表单中的所有数据。
submit 定义提交按钮。提交按钮会把表单数据发送到服务器。
text 定义单行的输入字段，用户可在其中输入文本。默认宽度为20个字符。

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

属性 属性值 描述
name 由用户自定义 用于定义input元素的名称。
value 由用户自定义 用于定义input元素的值。
checked checked 规定此input元素首次加载时应当被选中。
maxlength 正整数 规定输入字段中的字符的最大长度。

type属性之文本框和密码框

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>文本框和密码框</title>
    </head>
    <body>
        <form>
            <!-- text 文本框 用户可以里面输入任何文字 -->
            用户名: <input type="text">   <br> 
            <!-- password 密码框 用户看不见输入的密码 -->
            密码: <input type="password">  <br> 
        </form>
    </body>
</html>

inputtype属性之单选框和复选框

这里你可以发现单选按钮还是多选多的效果，别急往后看

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>单选框和复选框</title>
</head>
 
<body>
    <form>
    <!-- radio 单选按钮  可以实现多选一 --> 
    <!-- 这里你可以发现单选按钮还是多选多的效果，别急往后看 --> 
    性别: 男 <input type="radio"> 女 <input type="radio"> <br>
    <!-- checkbox 复选框  可以实现多选 -->
    爱好: 吃饭 <input type="checkbox"> 睡觉 <input type="checkbox"> 打豆豆 <input type="checkbox">
    </form>
</body>
 
</html>

input之name和value属性

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>input之name和value属性</title>
</head>
 
<body>
    <form>
        <!-- radio 单选按钮  可以实现多选一 -->
        <!-- name 是表单元素名字 这里性别单选按钮必须有相同的名字name 才可以实现多选1 -->
        性别: 男 <input type="radio" name="sex" value="男"> 女 <input type="radio" name="sex" value="女"> <br>
        <!-- checkbox 复选框  可以实现多选 -->
        爱好: 吃饭 <input type="checkbox" name="hobby" value="吃饭"> 睡觉 <input type="checkbox" name="hobby"> 打豆豆 <input
            type="checkbox" name="hobby">
    </form>
</body>
 
</html>

input之checked和maxlength属性

单选按钮和复选框可以设置checked 属性, 当页面打开的时候就可以默认选中这个按钮

maxlength属性规定了输入字段中的字符的最大长度

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>input之checked和maxlength属性</title>
</head>
 
<body>
    <form>
        <!-- text 文本框 用户可以里面输入任何文字 -->
        <!-- maxlength属性规定了输入字段中的字符的最大长度 -->
        用户名: <input type="text" name="username" value="请输入用户名" maxlength="6"> <br>
        <!-- password 密码框 用户看不见输入的密码 -->
        密码: <input type="password" name="pwd"> <br>
        <!-- radio 单选按钮  可以实现多选一 -->
        <!-- name 是表单元素名字 这里性别单选按钮必须有相同的名字name 才可以实现多选1 -->
        <!-- 单选按钮和复选框可以设置checked 属性, 当页面打开的时候就可以默认选中这个按钮 -->
        性别: 男 <input type="radio" name="sex" value="男"> 女 <input type="radio" name="sex" value="女" checked="checked"> <br>
        <!-- checkbox 复选框  可以实现多选 -->
        爱好: 吃饭 <input type="checkbox" name="hobby" value="吃饭"> 睡觉 <input type="checkbox" name="hobby"> 打豆豆 <input type="checkbox" name="hobby" checked="checked">
    </form>
</body>
 
</html>

type属性之提交和重置按钮

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>提交和重置按钮</title>
</head>
 
<body>
    <form action="xxx.html" method="get">
        <!-- text 文本框 用户可以里面输入任何文字 -->
        用户名: <input type="text" name="username" value="请输入用户名" maxlength="6"> <br>
        <!-- password 密码框 用户看不见输入的密码 -->
        密码: <input type="password" name="pwd"> <br>
        <!-- radio 单选按钮  可以实现多选一 -->
        <!-- name 是表单元素名字 这里性别单选按钮必须有相同的名字name 才可以实现多选1 -->
        <!-- 单选按钮和复选框可以设置checked 属性, 当页面打开的时候就可以默认选中这个按钮 -->
        性别: 男 <input type="radio" name="sex" value="男"> 女 <input type="radio" name="sex" value="女" checked="checked"> <br>
        <!-- checkbox 复选框  可以实现多选 -->
        爱好: 吃饭 <input type="checkbox" name="hobby" value="吃饭"> 睡觉 <input type="checkbox" name="hobby"> 打豆豆 <input type="checkbox" name="hobby" checked="checked">
        <br>
        <!-- 点击了提交按钮,可以把 表单域 form 里面的表单元素 里面的值 提交给后台服务器 -->
        <input type="submit" value="免费注册">
        <!-- 重置按钮可以还原表单元素初始的默认状态 -->
        <input type="reset" value="重新填写">
    </form>
</body>
 
</html>

type属性之普通按钮和文件域

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>input之checked和maxlength属性</title>
</head>
 
<body>
    <form action="xxx.html" method="get">
        <!-- text 文本框 用户可以里面输入任何文字 -->
        用户名: <input type="text" name="username" value="请输入用户名" maxlength="6"> <br>
        <!-- password 密码框 用户看不见输入的密码 -->
        密码: <input type="password" name="pwd"> <br>
        <!-- radio 单选按钮  可以实现多选一 -->
        <!-- name 是表单元素名字 这里性别单选按钮必须有相同的名字name 才可以实现多选1 -->
        <!-- 单选按钮和复选框可以设置checked 属性, 当页面打开的时候就可以默认选中这个按钮 -->
        性别: 男 <input type="radio" name="sex" value="男"> 女 <input type="radio" name="sex" value="女" checked="checked"> <br>
        <!-- checkbox 复选框  可以实现多选 -->
        爱好: 吃饭 <input type="checkbox" name="hobby" value="吃饭"> 睡觉 <input type="checkbox" name="hobby"> 打豆豆 <input type="checkbox" name="hobby" checked="checked">
        <br>
        <!-- 点击了提交按钮,可以把 表单域 form 里面的表单元素 里面的值 提交给后台服务器 -->
        <input type="submit" value="免费注册">
        <!-- 重置按钮可以还原表单元素初始的默认状态 -->
        <input type="reset" value="重新填写">
        <!-- 普通按钮 button  后期结合js 搭配使用-->
        <input type="button" value="获取短信验证码"> <br>
        <!-- 文件域 使用场景 上传文件使用的 -->
        上传头像: <input type="file">
    </form>
</body>
 
</html>

select表单元素

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

例如：

基本语法

    <form>
        <select>
            <option>选项1</option>
            <option>选项2</option>
            <option>选项2</option>
            ...
        </select>
    </form>

  • <select>中至少包含一对<option>

  • 在<option>中定义selected="selected",当前项即为默认选中项。

示例代码

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>select表单元素</title>
</head>
 
<body>
    <form>
        籍贯:
        <select>
            <option>山东</option>
            <option>北京</option>
            <option>天津</option>
            <option selected="selected">火星</option>
        </select>
    </form>
</body>
 
</html>

textarea文本域元素

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

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

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

基本语法

    <form>
        <textarea cols="30" rows="10">
            文本内容
        </textarea>
    </form>

  • 通过<textarea>标签可以轻松的创建多行文本输入框。

  • cols= "每行中的字符数"，rows="显示的行数"。实际开发中并不会使用，都是用CSS来控制大小。

代码示例

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>textarea文本域元素</title>
</head>
    <body>
        <form>
            太难了：
            <textarea cols="50" rows="5">来都来了，不关注一波</textarea>
        </form>
    </body>
</html>

label标签

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

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

基本语法

<form>
    <label for="sex">男</label>
    <input type="redio" name="sex" id="sex">
</form>

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

示例代码

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>label标签</title>
</head>
 
<body>
    <form>
        <label for="text"> 用户名:</label> <input type="text" id="text"><br>
        <input type="radio" id="nan" name="sex"> <label for="nan">男</label>
        <input type="radio" id="nv" name="sex"> <label for="nv">女</label>
    </form>
</body>
 
</html>
posted @   pure3417  阅读(692)  评论(0)  编辑  收藏  举报
相关博文：
· HTML（十一）：列表标签
· HTML（十）：表格标签
· html-表单
· HTML14.表单
· HTML表单标签
阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？
点击右上角即可分享
微信分享提示
AI FOR CODE 大赛