HTML 表单元素是通过 <form> 标签和其他相关控件来收集用户输入的数据。通过表单控件，用户可以提交各种类型的数据，如文本、选项、日期、文件等。每种控件都有不同的输入类型、属性和用途。
以下是 HTML 表单中常见的元素及其使用说明。
1. <form> 元素
<form> 是表单的容器元素，用于包裹其他表单控件。它指定了表单的 action（数据提交地址）、method（数据提交方式）等属性。
<form action="submit_form.php" method="POST"> <!-- 表单控件 --></form>php71 Bytes© 菜鸟-创作你的创作action：指定数据提交到的服务器地址。method：指定表单数据的提交方法，通常是GET或POST。
2. <input> 元素
<input> 是最常用的表单控件，支持多种不同类型的输入字段。通过 type 属性，<input> 可以变成文本框、按钮、单选按钮、复选框等。
常见类型：
- 文本框：
type="text"用于单行文本输入。<input type="text" name="username" placeholder="请输入用户名"> - 密码框：
type="password"用于输入密码，显示为星号（*）。<input type="password" name="password" placeholder="请输入密码"> - 单选按钮：
type="radio"用于选择一个选项（同组的单选按钮需有相同的name值）。<input type="radio" name="gender" value="male"> 男 <input type="radio" name="gender" value="female"> 女 - 复选框：
type="checkbox"用于选择多个选项。<input type="checkbox" name="subscribe" checked> 订阅新闻 - 按钮：
type="button"、type="submit"或type="reset"用于提交表单、重置表单或执行其他操作。<button type="submit">提交</button> <button type="reset">重置</button> - 文件上传：
type="file"允许用户选择并上传文件。<input type="file" name="profile_picture"> - 隐藏输入：
type="hidden"用于隐藏数据字段，提交时不会显示给用户。<input type="hidden" name="user_id" value="12345"> - 日期选择器：
type="date"用于选择日期。<input type="date" name="birthday"> - 邮箱输入框：
type="email"用于输入邮箱地址，浏览器会验证格式是否正确。<input type="email" name="email" placeholder="请输入邮箱">
3. <textarea> 元素
<textarea> 用于创建多行文本框，通常用于输入长文本（如留言、评论等）。
<textarea name="message" rows="4" cols="50" placeholder="请输入留言"></textarea>php75 Bytes© 菜鸟-创作你的创作rows：指定文本框的行数。cols：指定文本框的列数。
4. <select> 和 <option> 元素
<select> 用于创建下拉菜单，<option> 定义下拉菜单中的选项。
<select name="country"> <option value="us">美国</option> <option value="cn">中国</option> <option value="jp">日本</option></select>php138 Bytes© 菜鸟-创作你的创作<select>：定义一个下拉菜单。<option>：定义下拉菜单中的每一个选项。selected：指定默认选中的选项。
5. <button> 元素
<button> 用于定义按钮，通常用来提交表单或执行 JavaScript 操作。
<button type="submit">提交</button><button type="reset">重置</button><button type="button" onclick="alert('按钮点击')">点击我</button>php125 Bytes© 菜鸟-创作你的创作type="submit"：提交表单。type="reset"：重置表单。type="button"：定义常规按钮，通常与 JavaScript 一起使用。
6. <label> 元素
<label> 元素定义了表单控件的标签，通常与表单控件配合使用，增加可访问性。通过 for 属性与表单控件关联。
<label for="username">用户名:</label><input type="text" id="username" name="username">php84 Bytes© 菜鸟-创作你的创作for：指定<label>与哪个表单控件关联。
7. <fieldset> 和 <legend> 元素
<fieldset> 用于分组表单中的元素，<legend> 提供该分组的标题。常用于表单控件的组织和结构化。
<fieldset> <legend>个人信息</legend> <label for="name">姓名:</label> <input type="text" id="name" name="name"><br> <label for="email">邮箱:</label> <input type="email" id="email" name="email"><br></fieldset>php220 Bytes© 菜鸟-创作你的创作<legend>：为<fieldset>提供标题。
8. <optgroup> 元素
<optgroup> 用于将 <select> 中的选项分组。
<select name="country"> <optgroup label="亚洲"> <option value="cn">中国</option> <option value="jp">日本</option> </optgroup> <optgroup label="欧洲"> <option value="us">美国</option> <option value="fr">法国</option> </optgroup></select>php273 Bytes© 菜鸟-创作你的创作<optgroup>：对选项进行分组。label：定义分组的标题。
9. <input type="image"> 元素
<input type="image"> 用作提交按钮，显示为图像按钮。src 属性指定图像路径，alt 提供替代文本。
<input type="image" src="submit_button.png" alt="提交" />php55 Bytes© 菜鸟-创作你的创作10. <datalist> 元素
<datalist> 提供一组预定义的选项，供 <input> 控件使用。它可以在用户输入时显示一个建议列表。
<input list="browsers" name="browser" id="browser"><datalist id="browsers"> <option value="Chrome"> <option value="Firefox"> <option value="Safari"> <option value="Edge"> <option value="Opera"></datalist>php216 Bytes© 菜鸟-创作你的创作list：指定与<input>控件关联的<datalist>元素的id。<option>：定义提供给用户的预选项。
11. <progress> 和 <meter> 元素
<progress>：表示一个进度条，用于显示任务的进展。<meter>：表示度量（如统计值），用来显示范围内的值。
<progress value="70" max="100">70%</progress><meter value="0.7">70%</meter>php76 Bytes© 菜鸟-创作你的创作value：表示当前值。max：定义最大值。
总结
HTML 表单元素提供了多种控件来收集不同类型的用户输入。通过合理选择和组合这些元素，你可以创建各种类型的表单，如登录表单、注册表单、搜索表单等。每个控件元素都有不同的属性和用途，可以根据需求灵活应用。
https://www.52runoob.com/archives/5081
