HTML 从一个多选框中提交值

在本文中，我们将介绍如何使用HTML从一个多选框中提交值。多选框是HTML表单中的一种元素，它允许用户选择一个或多个选项。当用户选择了一个或多个选项后，我们可以使用POST方法将这些值提交到服务器进行处理。

阅读更多：HTML 教程

HTML多选框基本用法

使用HTML创建一个多选框非常简单。我们可以使用<select>元素来定义多选框，并使用<option>元素来定义选项。以下是一个基本的HTML多选框的示例：

<form action="submit.php" method="post">
  <select name="fruits[]" multiple>
    <option value="apple">Apple</option>
    <option value="banana">Banana</option>
    <option value="orange">Orange</option>
    <option value="grape">Grape</option>
    <option value="watermelon">Watermelon</option>
  </select>
  <input type="submit" value="Submit">
</form>

在上面的示例中，我们使用<select>元素创建多选框，并设置multiple属性以允许用户选择多个选项。每个选项使用<option>元素定义，并使用value属性设置选项的值。当用户按下提交按钮时，选中的选项将被提交到名为fruits[]的表单字段中。

从多选框中获取提交的值

当用户选择了一个或多个选项并提交表单后，我们可以通过服务器端脚本来获取提交的值。对于PHP，我们可以通过$_POST变量来获取表单提交的值。以下是一个获取多选框值的PHP示例：

$selectedFruits = $_POST['fruits'];
foreach ($selectedFruits as $fruit) {
  echo $fruit . "<br>";
}

在上面的示例中，我们使用$_POST['fruits']来获取名为fruits[]的表单字段的值。由于这是一个多选框，$_POST['fruits']是一个包含选中的所有选项值的数组。我们可以使用foreach循环来遍历这个数组，并输出每个选项的值。

多选框的默认选中值

有时候我们需要在多选框中设置默认选中的值。我们可以在<option>元素中使用selected属性来实现这个目的。以下是一个设置默认选中值的HTML多选框示例：

<form action="submit.php" method="post">
  <select name="fruits[]" multiple>
    <option value="apple" selected>Apple</option>
    <option value="banana">Banana</option>
    <option value="orange" selected>Orange</option>
    <option value="grape">Grape</option>
    <option value="watermelon">Watermelon</option>
  </select>
  <input type="submit" value="Submit">
</form>

在上面的示例中，Apple和Orange选项被设置为默认选中。当用户提交表单时，这两个选项的值将被包含在$_POST['fruits']数组中。

单选模式和多选模式的多选框

除了上面介绍的多选模式外，HTML多选框还有另一种模式，即单选模式。在单选模式下，用户只能选择一个选项。我们可以通过移除multiple属性来将多选框设置为单选模式。

以下是一个单选模式的HTML多选框示例：

<form action="submit.php" method="post">
  <select name="fruit">
    <option value="apple">Apple</option>
    <option value="banana">Banana</option>
    <option value="orange">Orange</option>
    <option value="grape">Grape</option>
    <option value="watermelon">Watermelon</option>
  </select>
  <input type="submit" value="Submit">
</form>