当前位置：首页 > article >正文

表单与交互：HTML表单标签全面解析

article 2025/2/11 0:02:41

前言

一.HTML表单的基本结构

基本结构

示例

二.常用表单控件

文本输入框

选择控件

文件上传

按钮

综合案例

三.标签的作用

四.注意事项

前言

HTML（超文本标记语言）是构建网页的基础，其中表单（<form>）元素用于收集用户输入的数据。在表单中，<label>标签与表单控件密切配合，提升用户体验和可访问性。本文将详细讲解HTML表单的基本结构、常用控件、<label>标签的作用及相关注意事项。

一.HTML表单的基本结构

表单通过<form>标签定义，包含用户可交互的控件，如文本框、按钮、复选框等。表单的主要作用是收集用户输入，并将数据发送到服务器进行处理。

基本结构

<form action="提交目标URL" method="提交方法">
  <!-- 表单控件 -->
</form>

action：指定表单数据提交的目标URL，即服务器端处理程序的地址。
method：定义数据提交方式，常用的有：
- GET：将表单数据附加在URL之后，适用于获取数据，数据量有限制。
- POST：在HTTP请求体中发送表单数据，适用于提交敏感信息或大量数据。

示例

<form action="/submit" method="post">
  <!-- 表单控件 -->
</form>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    
    <title>表单基本结构</title>
</head>
<body>
    <form action="https://www.baidu.com/s" target="_blank" method="get">
        <input type="text" name="wd"></input>
        <button>去百度搜索</button>
    </form>
    <form action="https://search.jd.com/Search" target="_self" method="get">
        <input type="text" name="keyword"></input>
        <button>去京东搜索</button>
    </form>
    <hr>
    <a href="https://www.baidu.com/s?wd=你好">百度搜索你好</a>
</body>
</html>

二.常用表单控件

HTML提供了多种表单控件，满足不同的用户输入需求。以下是一些常用的控件及其描述：

文本输入框
- 单行文本框：
```
<input type="text" name="username" placeholder="请输入用户名">
```
  - type="text"：定义单行文本输入。
  - name：控件名称，用于表单数据提交时标识。
  - placeholder：提供占位提示文本。
- 密码框：
```
<input type="password" name="password" placeholder="请输入密码">
```
  - type="password"：输入内容以掩码形式显示，适用于密码输入。
- 多行文本框：
```
<textarea name="message" rows="4" cols="50" placeholder="请输入留言"></textarea>
```
  - <textarea>：用于多行文本输入。
  - rows 和 cols：定义文本区域的行数和列数。

选择控件

复选框：
```
<input type="checkbox" name="subscribe" value="newsletter"> 订阅新闻
```
- type="checkbox"：允许用户进行多选。
- value：提交时的值。
单选按钮：
```
<input type="radio" name="gender" value="male"> 男
<input type="radio" name="gender" value="female"> 女
```
- type="radio"：在一组选项中仅允许选择一个。
- name：相同的name属性将这些按钮分组。

下拉列表：

<select name="country">
  <option value="china">中国</option>
  <option value="usa">美国</option>
  <option value="uk">英国</option>
</select>

<select>：创建下拉列表。
<option>：定义列表中的选项。

文件上传
```
<input type="file" name="profile_picture">
```
- type="file"：允许用户选择文件上传。
按钮
- 提交按钮：
```
<input type="submit" value="提交">
```
  - type="submit"：点击后提交表单。
- 重置按钮：
```
<input type="reset" value="重置">
```
  - type="reset"：点击后重置表单内容。
- 普通按钮：
```
<button type="button" onclick="alert('按钮被点击')">点击我</button>
```
  - <button>：可包含文本或HTML元素的按钮。
  - type="button"：定义为普通按钮，不会提交表单。

综合案例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单控件</title>
</head>
<body>
    <form action="https://search.jd.com/Search">
        账户:<input type="text" name="account" value="hulin" maxlength="10" placeholder="请输入用户名"><br><!--value默认值-->
        密码:<input type="password" name="password" placeholder="请输入密码"></input><br>
        性别:
        <!--单选-->
        <input type="radio" name="gender" value="男" checked>男<!--chexk默认选中-->
        <input type="radio" name="gender" value="女">女
       <br>
       <!--多选-->
        爱好:
        <input type="checkbox" name="hobby" value="打篮球" checked>打篮球</input>
        <input type="checkbox" name="hobby" value="打游戏">打游戏</input>
        <input type="checkbox" name="hobby" value="看电影">看电影</input>
        <br>
        其他:
        <textarea name="other" cols="30" rows="10"></textarea>
        <br>
        <!--下拉框-->
        籍贯:
        <select name="address">
            <option value="北京">北京</option>
            <option value="上海" selected>上海</option><!--默认选择-->
            <option value="广东">广东</option>
            <option value="深圳">深圳</option>
        </select>
        <!---->
        <!--隐藏域-->
        <br>
        <input type="hidden" name="type" value="1"></input>
        <!--确认按钮-->
        <!--<button>确认</button>  默认按钮类型是submit-->
        <br>
        <button type="submit" values="确认">确认</button>
        <button type="reset">重置</button>
        <!--重置按钮-->
        <!--<input type="reset" value="重置"></input> -->
        <!--普通按钮-->
        <input type="button" value="普通按钮"></input>
    </form>
</body>
</html>

三.`<label>`标签的作用

<label> 标签用于为表单控件定义标签，提升用户体验和可访问性。通过点击 <label>，用户可以聚焦到对应的表单控件。

有两种方式将 <label> 与表单控件关联：

使用 for 属性：<label> 的 for 属性值应与对应表单控件的 id 属性值相同。

<label for="email">电子邮件：</label>
<input type="email" id="email" name="email">

将表单控件嵌套在 <label> 内部：此时无需使用 for 和 id 属性。
```
<label>电子邮件：<input type="email" name="email"></label>
```

需要注意的是，避免在 <label> 内嵌套可交互的元素，如链接或按钮，以免影响用户体验。

综合案例，fieldset和legend将单独写一篇进行补充。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单控件</title>
</head>
<body>
    <form action="https://search.jd.com/Search">
        <fieldset>
            <legend>基本信息</legend>
            <label for="zhanghu">账户:</label>  <!--for与id关联，点击label标签，会自动聚焦到id对应的input标签上-->
        <input id="zhanghu" type="text" name="account" value="hulin" maxlength="10"><br>
        <label>
            密码:
            <input type="password" name="password" ></input>
        </label>
        </fieldset>
        <br>
        <fieldset>
            <legend>附加信息</legend>
            性别:
        <!--单选-->
          <label>
            <input type="radio" name="gender" value="男" >男</input>
          </label>
           
       
            <input type="radio" name="gender" value="女"  id="nv"></input>
            <label for="nv">女</label>
      
       <br>
       <!--多选-->
        爱好:
        <label><input type="checkbox" name="hobby" value="打篮球" checked>打篮球</input></label>
        <label><input type="checkbox" name="hobby" value="打游戏">打游戏</input></label>
        <label><input type="checkbox" name="hobby" value="看电影">看电影</input></label>
        
        </fieldset>
        
        <br>
        其他:
        <textarea name="other" cols="30" rows="10"></textarea>
        <br>
        <!--下拉框-->
        籍贯:
        <select name="address">
            <option value="北京">北京</option>
            <option value="上海" selected>上海</option><!--默认选择-->
            <option value="广东">广东</option>
            <option value="深圳">深圳</option>
        </select>
        <!---->
        <!--隐藏域-->
        <br>
        <input type="hidden" name="type" value="1"></input>
        <!--确认按钮-->
        <!--<button>确认</button>  默认按钮类型是submit-->
        <br>
        <button type="submit">确认</button>
        <button type="reset">重置</button>
        <!--重置按钮-->
        <!--<input type="reset" value="重置"></input> -->
        <!--普通按钮-->
        <input type="button" value="普通按钮"></input>
    </form>
</body>
</html>