HTML 表单详解

HTML 表单详解

表单介绍

HTML 表单用于收集用户输入数据，是网页与用户交互的重要方式。

主要表单标签

<form>

• 定义表单容器

• 属性：

• action: 提交目标URL

• method: 提交方式(GET/POST)

• enctype: 编码类型(如文件上传需用multipart/form-data)

输入控件

• <input>: 通用输入字段

• type: text, password, radio, checkbox, file, submit, reset, button等

• name: 字段名称

• value: 初始值

• placeholder: 提示文本

• required: 必填项

• <textarea>: 多行文本输入

• rows, cols: 行数和列数

• <select>: 下拉选择框

• <option>: 选项

• <button>: 可自定义按钮

其他标签

• <label>: 表单标签

• <fieldset>: 分组表单元素

• <legend>: 分组标题

• <datalist>: 输入建议列表

表单实例

<form action="/submit" method="post">
  <fieldset>
    <legend>用户信息</legend>
    
    <label for="username">用户名:</label>
    <input type="text" id="username" name="username" required>
    
    <label for="password">密码:</label>
    <input type="password" id="password" name="password" required>
    
    <label for="email">邮箱:</label>
    <input type="email" id="email" name="email" placeholder="example@domain.com">
    
    <label for="gender">性别:</label>
    <select id="gender" name="gender">
      <option value="male">男</option>
      <option value="female">女</option>
    </select>
    
    <label>兴趣:</label>
    <input type="checkbox" id="sports" name="interest" value="sports">
    <label for="sports">运动</label>
    <input type="checkbox" id="music" name="interest" value="music">
    <label for="music">音乐</label>
    
    <label for="bio">个人简介:</label>
    <textarea id="bio" name="bio" rows="4" cols="50"></textarea>
    
    <button type="submit">提交</button>
    <button type="reset">重置</button>
  </fieldset>
</form>

CSS扩展样式

/* 基础表单样式 */
form {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  background: #f9f9f9;
  border-radius: 8px;
}

fieldset {
  border: 1px solid #ddd;
  padding: 20px;
  border-radius: 5px;
}

legend {
  font-weight: bold;
  padding: 0 10px;
}

label {
  display: block;
  margin: 15px 0 5px;
}

input[type="text"],
input[type="password"],
input[type="email"],
textarea,
select {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-sizing: border-box;
}

textarea {
  height: 100px;
  resize: vertical;
}

input[type="checkbox"],
input[type="radio"] {
  margin-right: 5px;
}

button {
  background: #4CAF50;
  color: white;
  padding: 10px 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 15px;
  margin-right: 10px;
}

button:hover {
  background: #45a049;
}

/* 验证样式 */
input:required {
  border-left: 3px solid #ff9800;
}

input:valid {
  border-left: 3px solid #4CAF50;
}

input:invalid {
  border-left: 3px solid #f44336;
}

表单功能

1. 数据收集：文本、选择、文件等

2. 数据验证：HTML5内置验证(required, pattern等)

3. 数据提交：通过HTTP方法发送到服务器

4. 用户交互：提供友好的输入界面