1. 基本表单结构
表单的基本结构是用 <form> 标签包裹其他表单控件，如文本框、按钮、单选框、复选框等。
html
<form action="/submit" method="POST">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br>
<label for="gender">Gender:</label>
<input type="radio" id="male" name="gender" value="male" required>
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br>
<input type="submit" value="Submit">
</form>2. 表单的常用控件
2.1. 文本框（<input>）
-
文本框 用于输入文本数据。
html<input type="text" name="username" id="username" required> -
密码框 用于输入敏感信息，显示为隐藏字符（例如"•"）。
html<input type="password" name="password" id="password" required> -
电子邮件框 用于验证电子邮件格式。
html<input type="email" name="email" id="email" required>
2.2. 复选框（<input type="checkbox">）
允许用户选择多个选项。
html
<input type="checkbox" name="subscribe" id="subscribe" value="yes">
<label for="subscribe">Subscribe to newsletter</label><br>2.3. 单选框（<input type="radio">）
用于从多个选项中选择一个。
html
<input type="radio" name="gender" id="male" value="male">
<label for="male">Male</label><br>
<input type="radio" name="gender" id="female" value="female">
<label for="female">Female</label><br>2.4. 下拉菜单（<select>）
提供一组可选择的选项。
html
<select name="country" id="country">
<option value="usa">USA</option>
<option value="canada">Canada</option>
<option value="uk">UK</option>
</select>2.5. 按钮（<button>）
触发提交表单或执行自定义操作。
html
<button type="submit">Submit</button>3. 表单的属性
-
action：指定表单数据提交的 URL 地址。
html<form action="/submit" method="POST"> -
method ：定义提交表单数据的 HTTP 方法。常见的值是
GET和POST。GET：数据附加在 URL 中（不适用于敏感信息）。POST：数据放在请求体中，适用于较大的数据提交。
html<form action="/submit" method="POST"> -
target：指定表单提交后显示的目标窗口或标签页。
_self（默认）：在同一窗口中打开。_blank：在新窗口中打开。_parent、_top：分别在父窗口和最上层窗口打开。
html<form action="/submit" target="_blank"> -
enctype：指定表单编码类型，通常用于上传文件时设置。
multipart/form-data：用于文件上传。application/x-www-form-urlencoded（默认）：常规表单数据。
html<form action="/submit" method="POST" enctype="multipart/form-data">
4. 表单的提交和重置
4.1. 提交按钮
表单默认提供一个提交按钮（<input type="submit">），用于提交表单数据。
html
<input type="submit" value="Submit">4.2. 重置按钮
<input type="reset"> 用于重置表单中的所有字段到其默认值。
html
<input type="reset" value="Reset">5. 表单验证
HTML5 提供了表单字段的验证功能，例如 required（必填）、pattern（正则表达式）、min 和 max（最小值和最大值）。
html
<form action="/submit" method="POST">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required><br>
<label for="age">Age:</label>
<input type="number" id="age" name="age" min="18" max="100" required><br>
<input type="submit" value="Submit">
</form>6. 嵌套表单控件
通过将 <fieldset> 和 <legend> 标签与表单控件配合使用，可以对表单进行分组，从而提升可读性。
html
<form action="/submit" method="POST">
<fieldset>
<legend>Personal Information</legend>
<label for="name">Name:</label>
<input type="text" id="name" name="name" required><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br>
</fieldset>
<fieldset>
<legend>Preferences</legend>
<label for="color">Favorite Color:</label>
<select id="color" name="color">
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
</select><br>
</fieldset>
<input type="submit" value="Submit">
</form>案例
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>用户注册表单</h1>
<form action="/process-form" method="post">
<!-- action: 表单数据提交的服务器端 URL -->
<!-- method: 数据提交方式 (post 通常用于发送数据) -->
<fieldset>
<legend>基本信息</legend>
<div>
<label for="username">用户名:</label>
<input type="text" id="username" name="username" required placeholder="请输入用户名">
<!-- label 的 for 属性关联 input 的 id -->
<!-- type="text": 单行文本输入 -->
<!-- name="username": 提交到服务器时该字段的名称 -->
<!-- required: 此字段为必填项 (浏览器会进行基本检查) -->
<!-- placeholder: 输入框内的提示文字 -->
</div>
<div>
<label for="password">密码:</label>
<input type="password" id="password" name="password" required minlength="6">
<!-- type="password": 密码输入，内容被隐藏 -->
<!-- minlength="6": HTML5 属性，要求最小长度为 6 -->
</div>
<div>
<label for="email">邮箱:</label>
<input type="email" id="email" name="email" placeholder="例如: [email protected]">
<!-- type="email": 邮箱格式输入 (浏览器可能提供基本格式验证) -->
</div>
<div>
<label for="birthdate">出生日期:</label>
<input type="date" id="birthdate" name="birthdate">
<!-- type="date": 日期选择器 -->
</div>
<div>
<label for="quantity">数量:</label>
<input type="number" id="quantity" name="quantity" min="1" max="10" value="1">
<!-- type="number": 数字输入框 -->
<!-- min/max: 允许的最小/最大值 -->
<!-- value: 默认值 -->
</div>
</fieldset>
<fieldset>
<legend>附加信息</legend>
<div>
<p>性别:</p>
<input type="radio" id="gender_male" name="gender" value="male" checked>
<label for="gender_male">男</label>
<!-- type="radio": 单选按钮 -->
<!-- name="gender": 同一组单选按钮必须有相同的 name -->
<!-- value="male": 选中时提交的值 -->
<!-- checked: 默认选中 -->
<input type="radio" id="gender_female" name="gender" value="female">
<label for="gender_female">女</label>
<input type="radio" id="gender_other" name="gender" value="other">
<label for="gender_other">其他</label>
</div>
<div>
<p>兴趣爱好 (可多选):</p>
<input type="checkbox" id="interest_coding" name="interests" value="coding">
<label for="interest_coding">编程</label>
<!-- type="checkbox": 复选框 -->
<!-- name="interests": 同一组复选框通常使用相同的 name (服务器端会收到一个包含所有选中值的数组或列表) -->
<!-- value="coding": 选中时提交的值 -->
<input type="checkbox" id="interest_music" name="interests" value="music">
<label for="interest_music">音乐</label>
<input type="checkbox" id="interest_reading" name="interests" value="reading">
<label for="interest_reading">阅读</label>
</div>
<div>
<label for="country">国家/地区:</label>
<select id="country" name="country">
<!-- type="select": 下拉列表 -->
<option value="">--请选择--</option>
<option value="cn">中国</option>
<option value="us">美国</option>
<option value="jp" selected>日本</option> <!-- selected: 默认选中项 -->
<option value="other">其他</option>
<!-- option 的 value 是提交的值，标签之间的文本是显示给用户的 -->
</select>
</div>
<div>
<label for="profile_pic">上传头像:</label>
<input type="file" id="profile_pic" name="profile_pic" accept="image/*">
<!-- type="file": 文件选择框 -->
<!-- accept="image/*": 建议浏览器只允许选择图片文件 -->
<!-- 注意：如果表单包含文件上传，<form> 标签需要添加 enctype="multipart/form-data" 属性 -->
<!-- 例如: <form action="/process-form" method="post" enctype="multipart/form-data"> -->
</div>
<div>
<label for="message">留言:</label><br>
<textarea id="message" name="message" rows="4" cols="50" placeholder="请在此输入您的留言..."></textarea>
<!-- textarea: 多行文本输入区域 -->
<!-- rows/cols: 大致定义文本框的行数和列数 (外观) -->
</div>
<div>
<!-- 隐藏字段，用户不可见，但会随表单提交 -->
<input type="hidden" name="form_version" value="1.0">
</div>
</fieldset>
<div>
<!-- 提交按钮 -->
<button type="submit">提交注册信息</button>
<!-- 重置按钮，清空表单所有字段 -->
<button type="reset">重置表单</button>
</div>
</form>
</body>
</html>