HTML之<button><select><optgroup>元素详解

简介: 一篇了解<button><select><optgroup>元素

<button >:

定义一个按钮。

在button元素内部,可以置放内容(如文本或图像)这是与input元素创建按钮之间的不同之处。

<button></button>标签之间的所有内容都是按钮的内容,其中包括任何可接受的正文内容,如文本或多媒体内容。

唯一禁止使用的元素是图像映射,因为它对鼠标和键盘敏感的动作会干扰表单按钮的行为。

如果在HTML表单中使用button元素,不同的浏览器会提交不同的按钮值,请使用input元素在html表单中创建按钮。

属性:

    • autofocus属性:

    规定当前页面加载时按钮应当自动地获得焦点。

    <button type="button" autofocus> click it </button>

    image.gif

      • disabled属性:

      规定禁用按钮,被禁用的按钮既不可用,也不点击。

      <button type="button" disabled> click me </button>

      image.gif

        • form:属性

        规定按钮属于一个或多个表单,属性值必须是按钮所属表单的id

        <form action="/example.asp" method="get" id="nameform"> 
        ……
        </form> 
        <p>下面的按钮位于form元素之外,但仍是表单一部分</p> 
        <button type="submit" form="nameform" value="Submit">提交</button>

        image.gif

          • foraction属性:

          覆盖form元素的action属性(与type="submit"配合使用)

          <form action="demo_form.sap" method="get"> 
          …… 
          <button type="submit">提交</button> 
          <button type="submit" formaction="demo_admin.asp">以管理员身份提交</button> 
          </form>

          image.gif

            • formentype属性(与type="submit"配合使用)
            • formethod属性(与type="submit"配合使用)
            • formnovalidate属性(与type="submit"配合使用)
            • formtarget属性(与type="submit"配合使用)

            注:这些与input的用法相同就不介绍了。

              • name属性:

              规定按钮名称,用于在JS中对元素进行引用,或在表单提交之后,对表单数据进行引用。

              不同的button元素可以共享相同的名称。

                • type属性:

                规定按钮的类型。

                属性值:

                  1. submit:提交按钮(默认值)
                  2. button:可点击的按钮
                  3. reset:重置按钮
                  <button type="submit" value="Submit">Submit</button>


                    • value属性:

                    指定<form>中的<button>的初始值,仅当按钮本身用于提交表单时,才会提交按钮及其值。

                    <button name="subject" type="submit" value="fav-HTML">HTML</button>


                    <select>:

                    可创建单选或多选菜单。

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

                    属性:

                      • autofocus属性(逻辑属性):

                      当设置该属性后,它规定在页面加载后下拉列表应该自动获得焦点。

                      <select autofocus> 
                      <option value="volvo">Volvo</option>
                       …… 
                      </select>


                        • disabled属性

                        规定禁用下拉列表,被禁用的下拉列表既不可用也不可点击。

                        <select disabled> 
                        <option value="volvo">Volvo</option> 
                        …… 
                        </select>


                          • form属性:

                          规定下拉列表所属的一个或多个表单,属性值必须是同一个文档中的某个<form>元素的id属性。

                          <form action="demo_form.asp" id="carform"> 
                          …… 
                          <input type="submit"> 
                          </form> 
                          <p>下面的select位于form元素外,但仍属于表单的一部分</p> 
                          <select name="carlist" form="carform"> 
                          <option value="volvo">Volvo</option> 
                          …… 
                          </select>


                            • multiple属性:

                            规定可同时选择多个选项,可以把multiple属性与size属性配合,来定义可见选项的数目。

                            <select multiple size="2"> 
                            <option value="volvo">Volvo</option> 
                            …… 
                            </select>

                            image.gif

                              • required 属性:

                              所有主流浏览器都不支持。

                              规定用户在提交表单之前必须选择一个值。

                              <select required> 
                              <option value="volvo">Volvo</option> 
                              …… 
                              </select>

                              image.gif

                                • size 属性:

                                规定下拉列表中可见选项的数目。

                                如果size属性的值大于1,但小于列表中选项的总数目,浏览器会显示出滚动条。

                                <select size="2"> 
                                <option value="volvo">Volvo</option>
                                 …… 
                                </select>


                                <optgroup>:

                                定义选项组,用于组合选项,当使用一个选项列表时,对于相关的选项进行组合会使处理更加容易。

                                  • 必需属性:

                                  label:规定描述

                                  <select> 
                                  <optgroup label="Swedish cars"> 
                                  <option value="volvo">Volvo</option>
                                   …… 
                                  </option> 
                                  </select>


                                    • 可选属性:

                                    disabled:规定禁用该选项组。被禁用的选项组既不可用也不可点击。

                                    <select> 
                                    <optgroup label="Swedish cars" disabled> 
                                    <option value="volvo">Volvo</option>
                                     …… 
                                    </option> 
                                    </select>


                                    目录
                                    相关文章
                                    |
                                    1月前
                                    |
                                    移动开发 开发者 UED
                                    HTML5 语义元素详解
                                    HTML5引入了诸多语义元素
                                    WK
                                    |
                                    1月前
                                    |
                                    存储 移动开发 前端开发
                                    HTML5新增了哪些其他元素和属性
                                    这段文字介绍了HTML5中新增的多种元素和属性,包括页面布局元素如header、nav等,表单元素如email、tel输入框等,以及其他元素如canvas、svg等。此外,还介绍了全局及表单属性,例如contenteditable、placeholder等,这些新功能显著增强了HTML5在现代网页设计与开发中的实用性与灵活性。
                                    WK
                                    47 1
                                    |
                                    2月前
                                    |
                                    JavaScript 前端开发 容器
                                    用HTML DOM实现有条件地渲染网页元素(上)
                                    用HTML DOM实现有条件地渲染网页元素(上)
                                    |
                                    2月前
                                    |
                                    存储 JavaScript 前端开发
                                    用HTML DOM实现有条件地渲染网页元素(下)
                                    用HTML DOM实现有条件地渲染网页元素(下)
                                    |
                                    14天前
                                    HTML 元素
                                    HTML文档由HTML元素定义,元素包括开始标签、内容和结束标签。某些元素内容为空,可在开始标签中关闭。大多数元素可拥有属性,且元素间可相互嵌套,形成复杂结构。
                                    |
                                    2月前
                                    |
                                    移动开发 前端开发 HTML5
                                    Twaver-HTML5基础学习(8)拓扑元素(Element)_网元(Element)、节点(Node)
                                    本文介绍了Twaver HTML5中的拓扑元素(Element),包括网元(Element)、节点(Node)和连线(Link)的基本概念和使用方法。文章详细解释了Element的属性和方法,并通过示例代码展示了如何在React组件中创建节点、设置节点属性和样式。
                                    39 1
                                    Twaver-HTML5基础学习(8)拓扑元素(Element)_网元(Element)、节点(Node)
                                    |
                                    2月前
                                    |
                                    移动开发 前端开发 JavaScript
                                    Twaver-HTML5基础学习(7)Layer图层元素
                                    本文介绍了Twaver HTML5中的图层元素(Layer),包括图层的属性和使用方法。文章详细解释了如何创建图层、设置图层属性(如可见性、可编辑性、可移动性和可旋转性),并通过示例代码展示了如何在React组件中使用图层。
                                    35 1
                                    Twaver-HTML5基础学习(7)Layer图层元素
                                    |
                                    2月前
                                    |
                                    移动开发 JavaScript 前端开发
                                    Twaver-HTML5基础学习(6)告警元素(Alarm)闪烁效果
                                    本文介绍了在Twaver HTML5中如何为告警元素(Alarm)创建闪烁效果,以提醒用户注意。文章通过示例代码展示了如何通过定时器间隔性地改变告警标签的颜色,从而实现闪烁提示效果。
                                    36 1
                                    Twaver-HTML5基础学习(6)告警元素(Alarm)闪烁效果
                                    |
                                    2月前
                                    |
                                    移动开发 前端开发 HTML5
                                    Twaver-HTML5基础学习(2)基本数据元素(Data)
                                    本文介绍了Twaver HTML5中的基本数据元素,包括Data、Element、Alarm和Layer等,它们分别用来描述拓扑的网元、告警和图层。文章详细解释了Data类的基本属性和方法,并提供了如何在React组件中使用Twaver创建节点和连线的示例代码。
                                    43 1
                                    Twaver-HTML5基础学习(2)基本数据元素(Data)
                                    |
                                    1月前
                                    |
                                    移动开发 数据安全/隐私保护 UED
                                    HTML5 表单元素详解
                                    HTML5 引入了新的表单元素和属性,如 `&lt;form&gt;、&lt;input&gt;、&lt;textarea&gt;、&lt;select&gt;` 和 `&lt;button&gt;`,以及 `required、min、max` 等属性,增强了表单的创建与交互。其中,`&lt;input&gt;` 支持多种类型如 `email、url、date` 等,提供了更好的用户体验和数据验证。此外,HTML5 还新增了原生表单验证功能,简化了开发流程并提升了安全性。