HTML表单_动力节点Java学院整理

HTML表单是一种用于收集用户输入信息的常用工具。本文将介绍HTML表单的基本用法、各种表单元素的用法及HTML表单的样式设置。

HTML表单的基本用法

一个HTML表单主要由一组表单元素和一个表单提交按钮组成。要创建一个表单，需要使用HTML中的<form>标签来定义表单，例如：

<form action="submit.php" method="POST">
  <!-- 表单元素 -->
  <input type="text" name="username">
  <input type="password" name="password">
  <!-- 表单提交按钮 -->
  <input type="submit" value="提交">
</form>

在上面的例子中，使用了<form>标签来定义表单，其中的“action”属性定义了表单提交到的地址，而“method”属性定义了表单提交的方法（POST或GET）。接下来是表单元素，其中的<input>标签定义了文本框和密码框，并设置了“name”属性来标识该表单元素的名称。最后是一个提交按钮，使用<input>标签执行操作。

各种表单元素的用法

HTML表单中常用的表单元素还包括选择框、单选按钮、复选框、文本域等。下面一一介绍：

选择框

<select>标签用于创建选择框，其中的<option>标签用于设置每个选项：

<select name="gender">
  <option value="male">男</option>
  <option value="female">女</option>
</select>

上面的例子中创建了一个名称为“gender”的选择框，其中的选项分别为“男”和“女”，对应的值分别为“male”和“female”。

单选按钮

<input>标签中的“type”属性可以设置为“radio”来创建单选按钮：

<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女

上面的例子中创建了两个名称为“gender”的单选按钮，分别为“男”和“女”，对应的值分别为“male”和“female”。

复选框

<input>标签中的“type”属性可以设置为“checkbox”来创建复选框：

<input type="checkbox" name="hobby[]" value="reading">阅读
<input type="checkbox" name="hobby[]" value="music">音乐

上面的例子中创建了两个名称为“hobby”的复选框，分别为“阅读”和“音乐”，对应的值分别为“reading”和“music”。

需要注意的是，由于复选框可以选择多个选项，因此需要使用“[]”来定义该表单元素是一个数组，从而将多个选项的值作为一个数组提交到后台。

文本域

<textarea>标签用于创建文本域：

<textarea name="comment"></textarea>

上面的例子中创建了一个名称为“comment”的文本域，用户可以在其中输入文本信息。

HTML表单的样式设置

可以使用CSS来设置HTML表单的样式，例如将表单元素组合在一起，并使用CSS来设置元素的样式：

<style>
  form {
    display: flex;
    flex-wrap: wrap;
  }
  input, select, textarea {
    flex: 1 1 auto;
    margin: 0.5rem;
    padding: 0.5rem;
    border: 1px solid #ccc;
    border-radius: 0.25rem;
  }
</style>
<form action="submit.php" method="POST">
  <input type="text" name="username" placeholder="用户名">
  <input type="password" name="password" placeholder="密码">
  <select name="gender">
    <option value="male">男</option>
    <option value="female">女</option>
  </select>
  <input type="radio" name="hobby" value="reading">阅读
  <input type="radio" name="hobby" value="music">音乐
  <textarea name="comment" placeholder="评论"></textarea>
  <input type="submit" value="提交">
</form>

上面的例子中，定义了两个CSS样式，分别用于设置<form>标签和表单元素的样式。将表单元素的样式设置为灰色边框和圆角，将<form>标签的display属性设置为flex布局，使表单元素可以自动排列。

示例说明

示例一

创建一个包含用户名、邮箱、密码和确认密码的表单，并在提交时检查密码和确认密码是否一致。

可以使用下面的HTML代码来实现：

<form action="register.php" method="POST">
  <label>用户名：<input type="text" name="username"></label>
  <label>邮箱：<input type="email" name="email"></label>
  <label>密码：<input type="password" name="password"></label>
  <label>确认密码：<input type="password" name="repassword"></label>
  <input type="submit" value="注册">
</form>

在表单提交后，在后台代码中检查密码和确认密码是否一致：

if ($_POST["password"] == $_POST["repassword"]) {
  // 密码和确认密码一致，可以进行注册操作
} else {
  // 密码和确认密码不一致，重新显示表单并提示错误信息
}

示例二

创建一个选择框和两个单选按钮，用于选择用户兴趣爱好。在后台代码中将选择的兴趣保存到数据库中：

<form action="profile.php" method="POST">
  <label>兴趣爱好：</label>
  <select name="hobby">
    <option value="reading">阅读</option>
    <option value="music">音乐</option>
    <option value="movie">电影</option>
  </select>
  <input type="radio" name="gender" value="male">男
  <input type="radio" name="gender" value="female">女
  <input type="submit" value="保存">
</form>

在后台代码中可以使用以下代码将用户选择的兴趣保存到数据库中：

$hobby = $_POST["hobby"];
$gender = $_POST["gender"];
// 将兴趣和性别保存到数据库中

以上就是关于HTML表单的详细攻略。如果需要更深入地学习HTML表单的使用，可以参考W3C官方文档：https://www.w3.org/TR/html52/sec-forms.html