html下拉列表

作者：思念的回忆发布日期:2025-04-27 浏览:160

<!DOCTYPE html>
<html>
<head>
    <title>HTML 下拉列表示例</title>
</head>
<body>
    <h2>选择您喜欢的水果</h2>
    <!-- 创建一个下拉列表 -->
    <form action="">
        <label for="fruits">请选择一种水果:</label>
        <select id="fruits" name="fruits">
            <option value="apple">苹果</option>
            <option value="banana">香蕉</option>
            <option value="orange">橙子</option>
            <option value="grape">葡萄</option>
        </select>
        <input type="submit" value="提交">
    </form>
</body>
</html>

解释说明：

<select> 标签：用于创建下拉列表。用户可以从下拉列表中选择一个选项。
<option> 标签：定义下拉列表中的每个选项。每个 <option> 标签都有一个 value 属性，表示该选项的值。
<label> 标签：为表单元素提供描述性标签，增强可访问性。
<form> 标签：包含表单元素（如下拉列表），并可以指定表单提交的目标 URL（本例中为空）。

这个示例展示了如何创建一个简单的 HTML 下拉列表，并允许用户选择一个水果。

上一篇：html5元素周期表

下一篇：html设置背景颜色