前端随笔 —— HTML Form 的那些原生部件

在前端开发中，Form 表单是一个非常重要的元素，它允许用户在网页上输入数据并将其提交到服务器。Form 表单中包含各种各样的原生部件，这些部件可以帮助用户轻松地输入数据，包括输入框、单选框、复选框、按钮、下拉框、文本域和标签等。

1. 输入框

输入框是 Form 表单中最基本也是最重要的部件之一，它允许用户输入文本数据。输入框的类型有很多，包括 text、password、email、url、number、range、date、time、datetime-local等，每种类型都有不同的用途和格式要求。

<input type="text" name="username" placeholder="请输入用户名">
<input type="password" name="password" placeholder="请输入密码">
<input type="email" name="email" placeholder="请输入邮箱地址">

2. 单选框

单选框允许用户从一组选项中选择一个选项，单选框的类型为 radio。要将一组单选框合并成一个组，需要使用 <fieldset> 和 <legend> 标签。<fieldset> 标签用于将一组相关的单选框分组，<legend> 标签用于为一组单选框添加标题。

<fieldset>
  <legend>性别</legend>
  <input type="radio" name="gender" value="male"> 男
  <input type="radio" name="gender" value="female"> 女
</fieldset>

3. 复选框

复选框允许用户从一组选项中选择多个选项，复选框的类型为 checkbox。要将一组复选框合并成一个组，也需要使用 <fieldset> 和 <legend> 标签。

<fieldset>
  <legend>兴趣爱好</legend>
  <input type="checkbox" name="hobby" value="reading"> 读书
  <input type="checkbox" name="hobby" value="writing"> 写作
  <input type="checkbox" name="hobby" value="coding"> 编程
</fieldset>

4. 按钮

按钮是 Form 表单中用于提交数据或执行其他操作的部件，按钮的类型有很多，包括 submit、reset、button 等。<input> 标签可以设置 type 属性为 submit、reset 或 button 来创建不同的按钮。

<input type="submit" value="提交">
<input type="reset" value="重置">
<button type="button" onclick="alert('Hello World!')">点击我</button>

5. 下拉框

下拉框允许用户从一组选项中选择一个选项，下拉框的类型为 select。下拉框中可以包含多个 <option> 标签，每个 <option> 标签代表一个选项。

<select name="country">
  <option value="china">中国</option>
  <option value="us">美国</option>
  <option value="japan">日本</option>
</select>

6. 文本域

文本域允许用户输入多行文本数据，文本域的类型为 textarea。

<textarea name="content" rows="10" cols="30"></textarea>

7. 标签

标签用于为 Form 表单中的部件提供说明和提示，标签的类型为 label。标签可以使用 <label> 标签或 <legend> 标签创建。

<label for="username">用户名：</label>
<input type="text" name="username" id="username">

<fieldset>
  <legend>性别</legend>
  <input type="radio" name="gender" value="male"> 男
  <input type="radio" name="gender" value="female"> 女
</fieldset>

以上便是 HTML Form 表单中常用的原生部件，这些部件可以帮助前端开发者轻松地创建出各种各样的 Form 表单，满足不同的需求。