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>

              

  • 相关阅读:
    单例模式(singleton)
    Unsupported major.minor version 51.0
    “万能数据库查询分析器”4.03发布,谨以此致我们终将逝去的青春
    和菜鸟一起学linux内核之初始化init篇
    PL/SQL备份oracle数据库
    java.lang.ClassCastException: org.apache.struts.taglib.bean.CookieTei
    DB Query Analyzer 4.03 is upgraded in ZOL
    Android应用程序资源的查找过程分析
    java.lang.IllegalArgumentException: Can't convert argument: null
    Dalvik虚拟机简要介绍和学习计划
  • 原文地址:https://www.cnblogs.com/liyihua/p/12363804.html
Copyright © 2011-2022 走看看