提交表单包括输入类型提交

简介

在编写 Web 应用程序时，我们通常需要让用户输入一些信息，然后将这些信息提交给后端服务器进行处理。在 HTML 中，表单是最常用的用户输入方式。表单的提交可以通过 HTTP POST 或 HTTP GET 方法实现，其中 POST 方法更为常用。

表单元素包括文本框、密码框、单选框、多选框、下拉列表等，不同的元素对应不同的输入类型，这些都可以通过 HTML 标签实现。

输入类型

• text：单行文本框，用户可以输入任意文本。
• password：密码框，在输入时不会显示用户输入的内容。
• radio：单选框，用户只能选择一个选项。
• checkbox：多选框，用户可以选择多个选项。
• select：下拉列表，用户可以从一个列表中选择一个选项。
• textarea：多行文本框，用户可以输入多行文本。
• submit：提交按钮，用户点击后将表单数据提交到服务器。
• reset：重置按钮，用户点击后将表单数据重置为默认值。

表单标签

表单标签使用 <form> 标签包裹，<form> 标签需要设置 action 属性，指定提交表单的地址。method 属性指定表单提交时使用的 HTTP 方法，通常为 POST 或 GET。

<form action="/form" method="POST">
  <!-- 表单元素 -->
</form>

表单元素

单行文本框

单行文本框可以使用 <input> 标签实现，type 属性设置为 text。

<label for="name">姓名：</label>
<input type="text" id="name" name="name" value="">

密码框

密码框和单行文本框类似，也使用 <input> 标签实现，type 属性设置为 password。

<label for="password">密码：</label>
<input type="password" id="password" name="password" value=""/>

单选框

单选框使用 <input> 标签实现，type 属性设置为 radio，name 属性值相同的单选框为一组，其对应的值为选中的单选框 value 属性值。

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

多选框

多选框使用 <input> 标签实现，type 属性设置为 checkbox，name 属性值一般不同，其对应的值为选中的复选框 value 属性值。

<fieldset>
  <legend>爱好：</legend>
  <input type="checkbox" name="hobby" value="reading">阅读
  <input type="checkbox" name="hobby" value="music">音乐
  <input type="checkbox" name="hobby" value="sports">运动
</fieldset>

下拉列表

下拉列表使用 <select> 标签实现，可以使用多个 <option> 元素表示不同的选项。

<label for="city">城市：</label>
<select name="city" id="city">
  <option value="shanghai">上海</option>
  <option value="beijing">北京</option>
  <option value="guangzhou">广州</option>
</select>

多行文本框

多行文本框使用 <textarea> 标签实现，可以设置 cols 和 rows 属性值表示列数和行数。

<label for="content">内容：</label>
<textarea name="content" id="content" cols="30" rows="10"></textarea>

提交和重置按钮

提交和重置按钮使用 <input> 标签实现，分别设置 type 属性为 submit 和 reset。

<input type="submit" value="提交">
<input type="reset" value="重置">

完整示例

<form action="/form" method="POST">
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name" value=""/>

  <label for="password">密码：</label>
  <input type="password" id="password" name="password" value=""/>

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

  <fieldset>
    <legend>爱好：</legend>
    <input type="checkbox" name="hobby" value="reading">阅读
    <input type="checkbox" name="hobby" value="music">音乐
    <input type="checkbox" name="hobby" value="sports">运动
  </fieldset>

  <label for="city">城市：</label>
  <select name="city" id="city">
    <option value="shanghai">上海</option>
    <option value="beijing">北京</option>
    <option value="guangzhou">广州</option>
  </select>

  <label for="content">内容：</label>
  <textarea name="content" id="content" cols="30" rows="10"></textarea>

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

总结

提交表单是 Web 开发中的重要环节，表单元素包括文本框、密码框、单选框、多选框、下拉列表等，通过 HTML 标签实现。在使用表单时，需要设置表单标签和表单元素的相应属性。