参考资料

1. HTML 块引用格式化
2. HTML 提示
3. 如何检测开发者工具是否被禁用？
4. HTML 图像格式化
5. HTML 音频(Audio)
6. HTML 引文、引用和定义元素
7. HTML 多媒体
8. HTML 常用1600 万种不同颜色颜色代码表

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