学会正确使用一些form表单元素：提升网页表单质量

<select> 元素（支持多选）

<select multiple> 用于创建一个支持多选的下拉列表。

• <optgroup> 元素用于对选项进行分组：
  • label 属性用于为分组指定标签，以描述该组的类别。
  • 每组内包含多个 <option> 元素。
  • <option> 元素的 value 属性用于指定选项的值，若为空，则默认使用选项的文本作为值。

示例代码：

代码语言：javascript复制

<select multiple>
    <optgroup label="测试1">
        <option value="">1</option>
        <option value="">2</option>
    </optgroup>
    <optgroup  label="测试2">
        <option value="">3</option>
        <option value="">4</option>
    </optgroup>
</select>

以下是为您完善的关于这段代码的笔记：

单选按钮组（爱好选择）

这段代码通过<input>标签和<label>标签创建了一组单选按钮，用于选择爱好。

• 每个<input>元素的type="radio"表示这是一个单选按钮。
• name="sex"属性确保在同一组中，只能选择一个选项。
• 通过<label>标签为每个单选按钮提供了对应的文本描述，并使用for属性与相应的<input>元素的id属性关联，以提高用户交互性。

示例代码：

代码语言：javascript复制

爱好：
    <input type="radio" name="sex" id="a1">
    <label for="a1">篮球</label>

    <input type="radio" name="sex" id="a2">
    <label for="a2">足球</label>

    <input type="radio" name="sex" id="a3">
    <label for="a3">游泳</label>

    <label>
        <input type="radio" name="sex" id="b1">
        羽毛球
    </label>

以下是为您完善的关于这段代码的笔记：

浏览器类型选择输入框

在这段代码中：

• <p> 标签用于创建一个段落。
  • 段落内包含文本“浏览器类型：”以及一个关联了数据列表的输入框。
• <input type="text" list="browser"> 定义了一个文本输入框，通过 list 属性关联到 id 为 browser 的数据列表。
• <datalist id="browser"> 定义了数据列表。
  • 其中每个 <option> 元素代表一个可选项，value 属性指定了实际的值，元素内的文本为显示给用户的描述。

当用户在输入框中输入时，会根据输入内容显示匹配的数据列表选项，方便用户快速选择浏览器类型。

示例代码：

代码语言：javascript复制

<p>
    浏览器类型：
    <input type="text" list="browser">
</p>
<datalist id="browser">
    <option value="chrome">谷歌浏览器</option>
    <option value="firefox">火狐浏览器</option>
    <option value="safari">苹果浏览器</option>
    <option value="opera">欧朋浏览器</option>
    <option value="ie">IE 浏览器</option>
    <option value="edge">微软浏览器</option>
</datalist>

测试 浏览器 数据 form 表单

0 人点赞