HTML表单元素

1. 多项选择和列表

HTML表单为用户与网页交互提供了许多可能性。除了文本框和按钮外，表单还支持多选和列表元素，这些元素可以创建更灵活和便捷的数据输入界面。今天，我们将一起来学习这些元素。

在HTML中，表单提供了几种方式创建带有列表选择功能的元素。最常见的是使用 <select> 和 <option>，以及复选框和单选按钮。

下拉列表：<select> 和 <option>

标签 <select> 创建下拉列表，而 <option> 用于向此列表中添加选项。用户可以从列表中选择一个或多个选项。

单项选择：默认情况下，<select> 只允许选择一个选项。

<label for="country">选择国家:</label>
<select id="country" name="country">
  <option value="ru">俄罗斯</option>
  <option value="us">美国</option>
  <option value="de">德国</option>
</select>

<label for="country">选择国家:</label>
<select id="country" name="country">
<option value="ru">俄罗斯</option>
<option value="us">美国</option>
<option value="de">德国</option>
</select>

多项选择：如果添加 multiple 属性，用户可以按住 Ctrl（Windows）或 Cmd（Mac） 键点击来选择多个选项。

<label for="languages">选择语言:</label>
<select id="languages" name="languages" multiple>
  <option value="ru">俄语</option>
  <option value="en">英语</option>
  <option value="de">德语</option>
</select>

<label for="languages">选择语言:</label>
<select id="languages" name="languages" multiple>
<option value="ru">俄语</option>
<option value="en">英语</option>
<option value="de">德语</option>
</select>

此时，多个选定元素的数据将作为值数组发送到服务器。

复选框：<input type="checkbox">

复选框是一种允许用户从提供的列表中选择一个或多个选项的元素。每个复选框通过 <input type="checkbox"> 标签创建。

<label><input type="checkbox" name="interests" value="sports"> 体育</label>
<label><input type="checkbox" name="interests" value="music"> 音乐</label>
<label><input type="checkbox" name="interests" value="travel"> 旅行</label>

<label><input type="checkbox" name="interests" value="sports"> 体育</label>
<label><input type="checkbox" name="interests" value="music"> 音乐</label>
<label><input type="checkbox" name="interests" value="travel"> 旅行</label>

如果所有复选框具有相同的 name 属性，则表单提交时每个已选中的复选框的数据将作为数组发送。

单选按钮：<input type="radio">

单选按钮允许用户从一组选项中仅选择一个。具有相同 name 属性值的单选按钮会被分组，用户只能选择这一组中的一个选项。

<p>选择性别:</p>
<label><input type="radio" name="gender" value="male"> 男性</label>
<label><input type="radio" name="gender" value="female"> 女性</label>

<p>选择性别:</p>
<label><input type="radio" name="gender" value="male"> 男性</label>
<label><input type="radio" name="gender" value="female"> 女性</label>

单选按钮适合用于选择固定选项之一，例如“是”或“否”、性别、年龄组等。

2. 不同类型的表单元素

HTML中有多种 <input> 类型，提供了多样的数据输入选择。除我们已经讨论过的几种外，还有几个非常实用的类型，可以提升表单交互体验，更精准地收集数据。

电话 (type="tel")

电话号码输入框。此类型允许输入电话号码，且在移动设备上可能弹出带数字的虚拟键盘。

<label for="phone">电话:</label>
<input type="tel" id="phone" name="phone" placeholder="+86 123 456 7890">

<label for="phone">电话:</label>
<input type="tel" id="phone" name="phone" placeholder="+86 123 456 7890">

1

Опрос

HTML基础,  29 уровень,  4 лекция

недоступен

HTML基础

HTML基础

Открыть