HTML 表单详解

一、HTML 表单概述

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

二、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">）

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

<label for="name">姓名：</label>
<input type="text" id="name" name="name">

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

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

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

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

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

<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 属性可以相同或不同。

<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>）

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

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

6. 文本区域（<textarea>）

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

<label for="comment">评论：</label>
<textarea id="comment" name="comment" rows="4" cols="50"></textarea>

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

用于上传文件。

<label for="file">上传文件：</label>
<input type="file" id="file" name="file">

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

用于提交表单数据。

<input type="submit" value="提交">

四、表单属性

1. action

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

<form action="/submit" method="post">

2. method

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

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

3. id 和 name

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

<input type="text" id="username" name="username">

4. required

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

<input type="text" id="username" name="username" required>

5. placeholder

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

<input type="text" id="username" name="username" placeholder="请输入用户名">

6. disabled

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

<input type="text" id="username" name="username" disabled>

7. readonly

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

<input type="text" id="username" name="username" readonly>

8. maxlength 和 minlength

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

<input type="text" id="username" name="username" maxlength="10" minlength="2">

9. pattern

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

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

10. autocomplete

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

• on：启用自动完成功能。
• off：禁用自动完成功能。

<input type="text" id="username" name="username" autocomplete="on">

五、表单样式设计

使用内联样式

<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>

使用内部样式表

<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 文件 -->
<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>

/* 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 属性指定表单元素在提交前必须填写。

<input type="text" id="username" name="username" required>

2. pattern 属性

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

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

3. min 和 max 属性

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

<input type="number" id="age" name="age" min="18" max="60">

4. maxlength 和 minlength 属性

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

<input type="text" id="username" name="username" maxlength="10" minlength="2">

JavaScript 自定义验证

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

<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 表单示例：

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

常用表单元素

常用表单属性

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