HTML 表单标签之select标签的学习

标签定义及使用说明

<select> 元素用来创建下拉列表。

<select> 元素中的 <option> 标签定义了列表中的可用选项。

提示:<select> 元素是一种表单控件,可用于在表单中接受用户输入。

举例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>select标签</title>
</head>
<body>

<form>
    请选择学习科目:
    <select name="科目">
        <option> --请选择-- </option>
        <option> Python </option>
        <option> Java </option>
        <option> Hadoop </option>
        <option> Spark </option>
        <option> Linux </option>
        <option> NoSQL </option>
    </select>
    <input type="submit" value="提交">
</form>

</body>
</html>

Google浏览器中操作:

 

select标签中的属性

属性描述
autofocus
autofocus 规定在页面加载时下拉列表自动获得焦点。
disabled disabled 当该属性为 true 时,会禁用下拉列表。
form
form_id 定义 select 字段所属的一个或多个表单。
multiple multiple 当该属性为 true 时,可选择多个选项。
name name 定义下拉列表的名称。
required
required 规定用户在提交表单前必须选择一个下拉列表中的选项。
size number 规定下拉列表中可见选项的数目。

option标签

<option> 标签定义下拉列表中的一个选项(一个条目)。

<option> 标签中的内容作为 <select> 或者<datalist> 一个元素使用。

属性

属性描述
disabled disabled 规定此选项应在首次加载时被禁用。
label text 定义当使用 <optgroup> 时所使用的标注。
selected selected 规定选项(在首次显示在列表中时)表现为选中状态。
value text 定义送往服务器的选项值。

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>option标签</title>
</head>
<body>

<form>
    请选择学习科目:
    <select name="科目">
        <option value=""> --请选择-- </option>
        <option value="Python"> Python </option>
        <option value="Java"> Java </option>
        <option value="Hadoop"> Hadoop </option>
        <option value="Spark"> Spark </option>
        <option value="Linux"> Linux </option>
        <option value="NoSQL"> NoSQL </option>
    </select>
    <input type="submit" value="提交">
</form>


</body>
</html>

          

原文地址:https://www.cnblogs.com/liyihua/p/12363804.html