参考资料

1. HTML 表格和边框属性
2. HTML 视频(Videos)播放
3. HTML 超链接
4. html表单标签详细说明以及案例
5. Html网页 Web 安全色
6. 用于长引用的 HTML
7. html元信息标签详细说明以及案例
8. HTML 元素语法

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. 用户交互：提供友好的输入界面