HTML 表单详解

宇寒风暖2025-03-12 11:28

一、HTML 表单概述

HTML 表单是网页中用于收集用户输入的重要组件。通过表单，用户可以输入数据，如姓名、邮箱、密码等，这些数据随后可以被发送到服务器进行处理。表单由 <form> 标签定义，其中包含各种表单元素，如文本框、单选按钮、复选框等。

二、HTML 表单的基本结构

一个基本的 HTML 表单结构如下：

html 复制代码 
<form action="/submit" method="post">
  <label for="username">用户名：</label>
  <input type="text" id="username" name="username">
  <br>
  
  <label for="password">密码：</label>
  <input type="password" id="password" name="password">
  <br>
  
  <label for="email">邮箱：</label>
  <input type="email" id="email" name="email">
  <br>
  
  <input type="submit" value="提交">
</form>
  • <form>：定义表单的开始和结束。
  • action：指定表单提交的目标 URL。
  • method ：指定表单提交的方法，通常为 "get" 或 "post"。
  • <label>：为表单元素提供描述性文本，增强可访问性。
  • for ：<label> 的 for 属性与表单元素的 id 属性对应，建立关联。
  • <input>：定义各种类型的输入字段，如文本框、密码框、提交按钮等。
  • type ：<input> 的 type 属性决定输入字段的类型。
  • id 和 name ：id 用于唯一标识元素，name 用于标识提交时的键名。

三、常用表单元素

1. 文本输入框（<input type="text">）

用于输入文本，如姓名、地址等。

html 复制代码 
<label for="name">姓名：</label>
<input type="text" id="name" name="name">

2. 密码输入框（<input type="password">）

用于输入密码，输入的内容会以掩码形式显示。

html 复制代码 
<label for="pwd">密码：</label>
<input type="password" id="pwd" name="pwd">

3. 单选按钮（<input type="radio">）

用于选择一个选项，同一组中的单选按钮应具有相同的 name 属性。

html 复制代码 
<label>性别：</label>
<input type="radio" id="male" name="gender" value="male">
<label for="male">男</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">女</label>

4. 复选框（<input type="checkbox">）

用于选择多个选项，每个复选框的 name 属性可以相同或不同。

html 复制代码 
<label>兴趣爱好：</label>
<input type="checkbox" id="reading" name="hobbies" value="reading">
<label for="reading">阅读</label>
<input type="checkbox" id="sports" name="hobbies" value="sports">
<label for="sports">运动</label>
<input type="checkbox" id="music" name="hobbies" value="music">
<label for="music">音乐</label>

5. 下拉列表（<select>）

用于提供多个选项供用户选择。

html 复制代码 
<label for="country">国家：</label>
<select id="country" name="country">
  <option value="china">中国</option>
  <option value="usa">美国</option>
  <option value="uk">英国</option>
</select>

6. 文本区域（<textarea>）

用于输入多行文本，如评论、描述等。

html 复制代码 
<label for="comment">评论：</label>
<textarea id="comment" name="comment" rows="4" cols="50"></textarea>

7. 文件上传（<input type="file">）

用于上传文件。

html 复制代码 
<label for="file">上传文件：</label>
<input type="file" id="file" name="file">

8. 提交按钮（<input type="submit">）

用于提交表单数据。

html 复制代码 
<input type="submit" value="提交">

四、表单属性

1. action

action 属性指定表单提交的目标 URL。

html 复制代码 
<form action="/submit" method="post">

2. method

method 属性指定表单提交的方法，通常为 "get" 或 "post"。

  • get：将表单数据作为 URL 参数附加在动作 URL 后提交，适用于数据量小且不需要保密的情况。
  • post：将表单数据放在请求体中提交，适用于数据量大或需要保密的情况。

3. id 和 name

id 属性用于唯一标识表单元素，name 属性用于标识提交时的键名。

html 复制代码 
<input type="text" id="username" name="username">

4. required

required 属性指定表单元素在提交前必须填写。

html 复制代码 
<input type="text" id="username" name="username" required>

5. placeholder

placeholder 属性提供输入提示，帮助用户理解应输入的内容。

html 复制代码 
<input type="text" id="username" name="username" placeholder="请输入用户名">

6. disabled

disabled 属性使表单元素不可用，用户无法与其交互。

html 复制代码 
<input type="text" id="username" name="username" disabled>

7. readonly

readonly 属性使表单元素只读，用户无法修改其值，但值仍会提交。

html 复制代码 
<input type="text" id="username" name="username" readonly>

8. maxlength 和 minlength

maxlength 属性限制输入的最大字符数，minlength 属性限制输入的最小字符数。

html 复制代码 
<input type="text" id="username" name="username" maxlength="10" minlength="2">

9. pattern

pattern 属性指定输入值的正则表达式模式，用于验证输入格式。

html 复制代码 
<input type="text" id="username" name="username" pattern="[A-Za-z0-9]+" title="只能包含字母和数字">

10. autocomplete

autocomplete 属性指定表单元素是否启用自动完成功能。

  • on：启用自动完成功能。
  • off：禁用自动完成功能。
html 复制代码 
<input type="text" id="username" name="username" autocomplete="on">

五、表单样式设计

使用内联样式

html 复制代码 
<form style="background-color: #f0f0f0; padding: 20px; border-radius: 5px;">
  <label for="username" style="display: block; margin-bottom: 5px;">用户名：</label>
  <input type="text" id="username" name="username" style="width: 200px; padding: 5px; margin-bottom: 10px;">
  
  <label for="password" style="display: block; margin-bottom: 5px;">密码：</label>
  <input type="password" id="password" name="password" style="width: 200px; padding: 5px; margin-bottom: 10px;">
  
  <input type="submit" value="提交" style="background-color: #4CAF50; color: white; padding: 8px 16px; border: none; border-radius: 4px; cursor: pointer;">
</form>

使用内部样式表

html 复制代码 
<style>
  .custom-form {
    background-color: #f0f0f0;
    padding: 20px;
    border-radius: 5px;
    width: 300px;
  }
  .custom-form label {
    display: block;
    margin-bottom: 5px;
  }
  .custom-form input[type="text"],
  .custom-form input[type="password"] {
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
    box-sizing: border-box;
  }
  .custom-form input[type="submit"] {
    background-color: #4CAF50;
    color: white;
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    width: 100%;
  }
  .custom-form input[type="submit"]:hover {
    background-color: #45a049;
  }
</style>
<form class="custom-form">
  <label for="username">用户名：</label>
  <input type="text" id="username" name="username">
  
  <label for="password">密码：</label>
  <input type="password" id="password" name="password">
  
  <input type="submit" value="提交">
</form>

使用外部样式表

html 复制代码 
<!-- HTML 文件 -->
<link rel="stylesheet" href="styles.css">
<form class="custom-form">
  <label for="username">用户名：</label>
  <input type="text" id="username" name="username">
  
  <label for="password">密码：</label>
  <input type="password" id="password" name="password">
  
  <input type="submit" value="提交">
</form>
css 复制代码 
/* styles.css */
.custom-form {
  background-color: #f0f0f0;
  padding: 20px;
  border-radius: 5px;
  width: 300px;
}
.custom-form label {
  display: block;
  margin-bottom: 5px;
}
.custom-form input[type="text"],
.custom-form input[type="password"] {
  width: 100%;
  padding: 8px;
  margin-bottom: 10px;
  box-sizing: border-box;
}
.custom-form input[type="submit"] {
  background-color: #4CAF50;
  color: white;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  width: 100%;
}
.custom-form input[type="submit"]:hover {
  background-color: #45a049;
}

六、表单验证

HTML5 内置验证

HTML5 提供了一些内置的表单验证功能，可以在用户提交表单时自动进行验证。

1. required 属性

required 属性指定表单元素在提交前必须填写。

html 复制代码 
<input type="text" id="username" name="username" required>
2. pattern 属性

pattern 属性指定输入值的正则表达式模式，用于验证输入格式。

html 复制代码 
<input type="text" id="username" name="username" pattern="[A-Za-z0-9]+" title="只能包含字母和数字">
3. min 和 max 属性

min 和 max 属性用于限制数值输入的范围。

html 复制代码 
<input type="number" id="age" name="age" min="18" max="60">
4. maxlength 和 minlength 属性

maxlength 和 minlength 属性限制输入的最大和最小字符数。

html 复制代码 
<input type="text" id="username" name="username" maxlength="10" minlength="2">

JavaScript 自定义验证

除了 HTML5 的内置验证功能外，还可以使用 JavaScript 进行自定义验证。

html 复制代码 
<form onsubmit="return validateForm()" action="/submit" method="post">
  <label for="username">用户名：</label>
  <input type="text" id="username" name="username">
  <span id="username-error" class="error-message"></span>
  <br>
  
  <label for="email">邮箱：</label>
  <input type="email" id="email" name="email">
  <span id="email-error" class="error-message"></span>
  <br>
  
  <input type="submit" value="提交">
</form>

<script>
  function validateForm() {
    var username = document.getElementById('username').value;
    var email = document.getElementById('email').value;
    var isValid = true;
    
    // 验证用户名
    if (username.trim() === '') {
      document.getElementById('username-error').textContent = '用户名不能为空';
      isValid = false;
    } else if (username.length < 2 || username.length > 10) {
      document.getElementById('username-error').textContent = '用户名长度必须在 2 到 10 之间';
      isValid = false;
    } else {
      document.getElementById('username-error').textContent = '';
    }
    
    // 验证邮箱
    if (email.trim() === '') {
      document.getElementById('email-error').textContent = '邮箱不能为空';
      isValid = false;
    } else if (!isValidEmail(email)) {
      document.getElementById('email-error').textContent = '邮箱格式不正确';
      isValid = false;
    } else {
      document.getElementById('email-error').textContent = '';
    }
    
    return isValid;
  }
  
  function isValidEmail(email) {
    var emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return emailPattern.test(email);
  }
</script>

七、完整示例

以下是一个包含多种表单元素和验证的完整 HTML 表单示例：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML 表单示例</title>
    <style>
      .custom-form {
        background-color: #f0f0f0;
        padding: 20px;
        border-radius: 5px;
        width: 400px;
      }
      .custom-form label {
        display: block;
        margin-bottom: 5px;
      }
      .custom-form input[type="text"],
      .custom-form input[type="password"],
      .custom-form input[type="email"],
      .custom-form textarea {
        width: 100%;
        padding: 8px;
        margin-bottom: 10px;
        box-sizing: border-box;
      }
      .custom-form input[type="submit"] {
        background-color: #4CAF50;
        color: white;
        padding: 8px 16px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        width: 100%;
      }
      .custom-form input[type="submit"]:hover {
        background-color: #45a049;
      }
      .error-message {
        color: red;
        font-size: 0.8em;
        display: block;
        margin-bottom: 10px;
      }
    </style>
</head>
<body>
    <h1>HTML 表单示例</h1>
    
    <form onsubmit="return validateForm()" class="custom-form" action="/submit" method="post">
      <label for="username">用户名：</label>
      <input type="text" id="username" name="username" required>
      <span id="username-error" class="error-message"></span>
      
      <label for="password">密码：</label>
      <input type="password" id="password" name="password" required>
      <span id="password-error" class="error-message"></span>
      
      <label for="email">邮箱：</label>
      <input type="email" id="email" name="email" required>
      <span id="email-error" class="error-message"></span>
      
      <label for="message">留言：</label>
      <textarea id="message" name="message" rows="4" cols="50"></textarea>
      <span id="message-error" class="error-message"></span>
      
      <input type="submit" value="提交">
    </form>
    
    <script>
      function validateForm() {
        var username = document.getElementById('username').value;
        var password = document.getElementById('password').value;
        var email = document.getElementById('email').value;
        var message = document.getElementById('message').value;
        var isValid = true;
        
        // 验证用户名
        if (username.trim() === '') {
          document.getElementById('username-error').textContent = '用户名不能为空';
          isValid = false;
        } else if (username.length < 2 || username.length > 10) {
          document.getElementById('username-error').textContent = '用户名长度必须在 2 到 10 之间';
          isValid = false;
        } else {
          document.getElementById('username-error').textContent = '';
        }
        
        // 验证密码
        if (password.trim() === '') {
          document.getElementById('password-error').textContent = '密码不能为空';
          isValid = false;
        } else if (password.length < 6) {
          document.getElementById('password-error').textContent = '密码长度必须至少为 6 个字符';
          isValid = false;
        } else {
          document.getElementById('password-error').textContent = '';
        }
        
        // 验证邮箱
        if (email.trim() === '') {
          document.getElementById('email-error').textContent = '邮箱不能为空';
          isValid = false;
        } else if (!isValidEmail(email)) {
          document.getElementById('email-error').textContent = '邮箱格式不正确';
          isValid = false;
        } else {
          document.getElementById('email-error').textContent = '';
        }
        
        // 验证留言
        if (message.trim() === '') {
          document.getElementById('message-error').textContent = '留言不能为空';
          isValid = false;
        } else {
          document.getElementById('message-error').textContent = '';
        }
        
        return isValid;
      }
      
      function isValidEmail(email) {
        var emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        return emailPattern.test(email);
      }
    </script>
</body>
</html>

八、总结

HTML 表单是网页中不可或缺的部分，用于收集和提交用户输入的数据。通过合理使用表单元素和属性，可以创建出功能强大、用户体验良好的表单。以下是常用的表单元素和属性总结：

常用表单元素

元素 描述 示例
<input type="text"> 文本输入框 <input type="text" id="name" name="name">
<input type="password"> 密码输入框 <input type="password" id="pwd" name="pwd">
<input type="radio"> 单选按钮 <input type="radio" id="male" name="gender" value="male">
<input type="checkbox"> 复选框 <input type="checkbox" id="reading" name="hobbies" value="reading">
<select> 下拉列表 <select id="country" name="country">
<textarea> 文本区域 <textarea id="comment" name="comment" rows="4" cols="50"></textarea>
<input type="file"> 文件上传 <input type="file" id="file" name="file">
<input type="submit"> 提交按钮 <input type="submit" value="提交">

常用表单属性

属性 描述 示例
action 指定表单提交的目标 URL <form action="/submit">
method 指定表单提交的方法 <form method="post">
id 唯一标识表单元素 <input type="text" id="username">
name 标识提交时的键名 <input type="text" name="username">
required 指定表单元素在提交前必须填写 <input type="text" id="username" name="username" required>
placeholder 提供输入提示 <input type="text" id="username" name="username" placeholder="请输入用户名">
disabled 使表单元素不可用 <input type="text" id="username" name="username" disabled>
readonly 使表单元素只读 <input type="text" id="username" name="username" readonly>
maxlength 和 minlength 限制输入的最大和最小字符数 <input type="text" id="username" name="username" maxlength="10" minlength="2">
pattern 指定输入值的正则表达式模式 <input type="text" id="username" name="username" pattern="[A-Za-z0-9]+">
autocomplete 指定表单元素是否启用自动完成功能 <input type="text" id="username" name="username" autocomplete="on">

通过合理使用这些元素和属性，可以创建出功能强大、用户体验良好的 HTML 表单。

相关推荐
崔庆才丨静觅13 小时前
hCaptcha 验证码图像识别 API 对接教程
前端
passerby606113 小时前
完成前端时间处理的另一块版图
前端·github·web components
掘了14 小时前
「2025 年终总结」在所有失去的人中，我最怀念我自己
前端·后端·年终总结
崔庆才丨静觅14 小时前
实用免费的 Short URL 短链接 API 对接说明
前端
执笔论英雄14 小时前
【大模型学习cuda】入们第一个例子-向量和
学习
wdfk_prog14 小时前
[Linux]学习笔记系列 -- [drivers][input]input
linux·笔记·学习
崔庆才丨静觅14 小时前
5分钟快速搭建 AI 平台并用它赚钱！
前端
ouliten14 小时前
cuda编程笔记（36）-- 应用Tensor Core加速矩阵乘法
笔记·cuda
崔庆才丨静觅14 小时前
比官方便宜一半以上！Midjourney API 申请及使用
前端
Moment14 小时前
富文本编辑器在 AI 时代为什么这么受欢迎
前端·javascript·后端
热门推荐
01GitHub 镜像站点02Claude Code + GLM4.7 避坑指南：解决 Unable to connect to Anthropic services03UV安装并设置国内源04openclaw配置教程（linux+局域网ollama）05Linux下V2Ray安装配置指南06OpenClaw Chrome扩展使用教程 - 浏览器中继控制07AI 规范驱动开发“三剑客”深度对比：Spec-Kit、Kiro 与 OpenSpec 实战指南08Claude Code Skills 实用使用手册09openclaw使用nginx反代部署过程 与disconnected (1008): pairing required解决10Vue-skills的中文文档