Appearance
10. HTML表单标签（用户交互核心，实战必备，SEO高频）
10.1 表单基本结构
基本标签
HTML表单由 <form> 标签定义，包含各种表单元素。
html
<form action="处理表单的URL" method="提交方法">
<!-- 表单元素 -->
</form>action属性
action 属性指定表单数据提交的目标URL。
html
<form action="submit.php" method="post">
<!-- 表单元素 -->
</form>method属性
method 属性指定表单数据的提交方法，常用的值有：
get：数据通过URL传递，适用于小量数据post：数据通过HTTP请求体传递，适用于大量数据或敏感信息
10.2 输入框标签：input
基本用法
<input> 标签用于创建各种类型的输入字段，是一个自闭合标签。
html
<input type="类型" name="名称" value="默认值">常用类型
| 类型 | 描述 | 示例 |
|---|---|---|
text | 文本输入框 | <input type="text" name="username"> |
password | 密码输入框 | <input type="password" name="password"> |
radio | 单选按钮 | <input type="radio" name="gender" value="male"> |
checkbox | 复选框 | <input type="checkbox" name="hobby" value="reading"> |
submit | 提交按钮 | <input type="submit" value="提交"> |
reset | 重置按钮 | <input type="reset" value="重置"> |
button | 普通按钮 | <input type="button" value="点击"> |
file | 文件上传 | <input type="file" name="file"> |
email | 邮箱输入框 | <input type="email" name="email"> |
tel | 电话输入框 | <input type="tel" name="phone"> |
number | 数字输入框 | <input type="number" name="age"> |
date | 日期选择器 | <input type="date" name="birthday"> |
10.3 其他表单元素
textarea：文本域
<textarea> 标签用于创建多行文本输入区域。
html
<textarea name="message" rows="4" cols="50">默认文本</textarea>select+option：下拉框
<select> 标签用于创建下拉选择框，<option> 标签定义下拉选项。
html
<select name="country">
<option value="china">中国</option>
<option value="usa">美国</option>
<option value="japan">日本</option>
</select>button：按钮
<button> 标签用于创建按钮。
html
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">点击</button>10.4 表单属性
placeholder：提示文本
placeholder 属性为输入框提供提示文本。
html
<input type="text" name="username" placeholder="请输入用户名">required：必填项
required 属性指定输入字段为必填项。
html
<input type="text" name="username" required>disabled：禁用
disabled 属性禁用输入字段。
html
<input type="text" name="username" disabled>readonly：只读
readonly 属性设置输入字段为只读。
html
<input type="text" name="username" value="张三" readonly>maxlength：最大长度
maxlength 属性限制输入字段的最大长度。
html
<input type="text" name="username" maxlength="20">10.5 表单标签优化：label
基本用法
<label> 标签用于关联表单元素，提升用户体验和SEO。
html
<label for="username">用户名：</label>
<input type="text" id="username" name="username">优势
- 提升用户体验：点击标签可以聚焦到对应的输入字段
- 提高可访问性：屏幕阅读器可以更好地理解表单结构
- SEO友好：搜索引擎可以更好地理解表单内容
10.6 实战：制作简单登录表单、注册表单
实战目标
制作包含登录表单和注册表单的网页，适配后续CSS美化和JS验证。
代码示例
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML表单标签实战</title>
</head>
<body>
<h1>HTML表单标签的使用</h1>
<!-- 登录表单 -->
<h2>一、登录表单</h2>
<form action="login.php" method="post">
<div>
<label for="login-username">用户名：</label>
<input type="text" id="login-username" name="username" placeholder="请输入用户名" required>
</div>
<br>
<div>
<label for="login-password">密码：</label>
<input type="password" id="login-password" name="password" placeholder="请输入密码" required>
</div>
<br>
<div>
<input type="checkbox" id="remember" name="remember">
<label for="remember">记住我</label>
</div>
<br>
<input type="submit" value="登录">
<input type="reset" value="重置">
</form>
<hr>
<!-- 注册表单 -->
<h2>二、注册表单</h2>
<form action="register.php" method="post">
<div>
<label for="reg-username">用户名：</label>
<input type="text" id="reg-username" name="username" placeholder="请输入用户名" required>
</div>
<br>
<div>
<label for="reg-email">邮箱：</label>
<input type="email" id="reg-email" name="email" placeholder="请输入邮箱" required>
</div>
<br>
<div>
<label for="reg-password">密码：</label>
<input type="password" id="reg-password" name="password" placeholder="请输入密码" required>
</div>
<br>
<div>
<label for="reg-confirm-password">确认密码：</label>
<input type="password" id="reg-confirm-password" name="confirm-password" placeholder="请确认密码" required>
</div>
<br>
<div>
<label>性别：</label>
<input type="radio" id="male" name="gender" value="male" checked>
<label for="male">男</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">女</label>
</div>
<br>
<div>
<label>爱好：</label>
<input type="checkbox" id="hobby-reading" name="hobby[]" value="reading">
<label for="hobby-reading">阅读</label>
<input type="checkbox" id="hobby-sports" name="hobby[]" value="sports">
<label for="hobby-sports">运动</label>
<input type="checkbox" id="hobby-music" name="hobby[]" value="music">
<label for="hobby-music">音乐</label>
</div>
<br>
<div>
<label for="reg-country">国家：</label>
<select id="reg-country" name="country">
<option value="china">中国</option>
<option value="usa">美国</option>
<option value="japan">日本</option>
<option value="other">其他</option>
</select>
</div>
<br>
<div>
<label for="reg-message">留言：</label>
<br>
<textarea id="reg-message" name="message" rows="4" cols="50" placeholder="请输入留言"></textarea>
</div>
<br>
<button type="submit">注册</button>
<button type="reset">重置</button>
</form>
<hr>
<h2>表单优化建议</h2>
<ul>
<li>使用 `<label>` 标签关联表单元素</li>
<li>为必填项添加 `required` 属性</li>
<li>使用适当的输入类型，如 `email`、`tel` 等</li>
<li>添加 `placeholder` 属性提供输入提示</li>
<li>合理组织表单结构，提高可读性</li>
<li>使用CSS美化表单，提升用户体验</li>
<li>使用JavaScript进行表单验证</li>
</ul>
</body>
</html>小结
HTML表单标签是用户交互的核心，通过合理使用 <form>、<input>、<textarea>、<select> 等标签，可以创建各种类型的表单。同时，使用 <label> 标签关联表单元素，添加适当的属性，可以提升用户体验和SEO效果。表单是后续CSS美化和JavaScript验证的基础，掌握好表单标签的使用，对于前端开发非常重要。