HTML表单元素

HTML表单元素

HTML表单（form）用来收集用户输入的数据，以便进一步处理和使用。表单中的元素由各种输入字段组成，比如文本框、单选框、复选框、下拉列表等等。这些表单元素可以用来收集用户的信息，例如用户名、密码、电子邮件、电话号码等等，同时也可以用来上传文件和提交数据。

表单交互过程

表单提交的过程分为两个阶段：第一步是填写表单，第二步是提交表单。填写表单时，用户可以在页面上输入相应的信息，并且可以通过表单元素的属性来指定输入范围、输入格式、是否必填等等；提交表单时，浏览器将数据打包成请求报文（request），发送给服务器端，服务器再进行相应的处理。整个流程如下图所示：

表单元素

HTML表单通过各种表单元素来收集用户输入的数据。下面介绍一些常用的表单元素及其属性。

文本框（input type="text"）

文本框用来接收单行的文本输入，可以指定输入长度、输入格式、是否必填等属性。

<form action="submit.php" method="post">

  <label>用户名：
    <input type="text" name="username" maxlength="20" required>
  </label>
  <br><br>
  <input type="submit" value="提交">
</form>

上面的代码中，我们通过input元素的type属性指定了文本框的类型为"text"，name属性指定了该输入框对应的参数名为"username"，maxlength属性指定了最大输入长度为20，required属性指定了该字段为必填项。

需要注意的是，如果要提交多个文本框的值，需要给它们分别指定不同的name值，否则只会提交最后一个文本框的值。

密码框（input type="password"）

密码框用来接收用户输入的密码，可以指定输入长度、是否必填等属性。

<form action="submit.php" method="post">

  <label>密码：
    <input type="password" name="password" minlength="6" required>
  </label>
  <br><br>
  <input type="submit" value="提交">
</form>

上面的代码中，我们同样使用了input元素，但是将其type属性指定为了"password"，name属性指定了该输入框对应的参数名为"password"，minlength属性指定了最小输入长度为6，required属性指定了该字段为必填项。注意，这里虽然看不到用户输入的明文内容，但是在表单提交的时候仍然会将密码的值发送到服务器端，所以需要在服务器端做好安全措施。

单选框（input type="radio"）

单选框用来在一组选项中选择一个选项，每个选项都有不同的值。

<form action="submit.php" method="post">

  <label>您的性别：
    <input type="radio" name="gender" value="1" checked>男
    <input type="radio" name="gender" value="0">女
  </label>
  <br><br>
  <input type="submit" value="提交">
</form>

上面的代码中，我们使用了两个input元素，将它们的type属性都指定为了"radio"，name属性指定了它们属于同一选项组，这样每次只能选中一个选项。value属性指定了该选项对应的值，checked属性指定了默认选中的选项。

复选框（input type="checkbox"）

复选框用来在多个选项中选择多个选项，每个选项可以有相同或不同的值。

<form action="submit.php" method="post">

  <label>您的爱好：
    <input type="checkbox" name="hobby[]" value="reading" checked>阅读
    <input type="checkbox" name="hobby[]" value="music">音乐
    <input type="checkbox" name="hobby[]" value="sports">运动
  </label>
  <br><br>
  <input type="submit" value="提交">
</form>

上面的代码中，我们同样使用了三个input元素，将它们的type属性都指定为了"checkbox"，name属性指定了它们属于同一选项组，但是由于可以选中多个选项，所以需要将其属性设置为数组形式，即name="hobby[]"，其中"[]"表示该属性为数组。value属性指定了不同选项的值，checked属性指定了默认选中的选项。

下拉列表（select）

下拉列表用来在多个选项中选择一个选项，可以设置默认选中的选项。

<form action="submit.php" method="post">

  <label>您所在的城市：
    <select name="city">
      <option value="beijing">北京</option>
      <option value="shanghai" selected>上海</option>
      <option value="guangzhou">广州</option>
    </select>
  </label>
  <br><br>
  <input type="submit" value="提交">
</form>

上面的代码中，我们使用了select元素和option元素，select元素用来选中一个选项，option元素用来设置不同选项的文本和值。select元素的name属性和option元素的value属性分别对应选项对应的参数名和选项的值。selected属性指定了默认选中的选项。

提交按钮（input type="submit"）

提交按钮用来提交表单数据到服务器端。

<form action="submit.php" method="post">

  <input type="submit" value="提交">
</form>

上面的代码中，我们使用input元素将type属性指定为"submit"，value属性指定了按钮的文本。

重置按钮（input type="reset"）

重置按钮用来重置表单的所有内容，使其恢复到初始状态。

<form action="submit.php" method="post">

  <input type="reset" value="重置">
</form>

上面的代码中，我们同样使用input元素将type属性指定为"reset"，value属性指定了按钮的文本。

总结

本篇文章介绍了HTML表单的交互过程以及常用表单元素的使用方法及其属性，包括文本框、密码框、单选框、复选框、下拉列表、提交按钮和重置按钮。通过掌握这些基本知识，我们可以在开发中灵活运用表单元素，实现各种复杂的交互操作。