zoukankan      html  css  js  c++  java
  • 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>

              

  • 相关阅读:
    php数组通过值获得键
    php 重定向
    php 数组排序
    SVN使用操作
    Java + Jsp web 项目
    create-react-app搭建React项目
    双向链表实现查询、删除、插入、末尾增加
    顺序存储结构实现查询、删除、插入、末尾增加
    单向链表实现查询、删除、插入、末尾增加
    数列
  • 原文地址:https://www.cnblogs.com/liyihua/p/12363804.html
Copyright © 2011-2022 走看看