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>


                                    目录
                                    相关文章
                                    |
                                    6月前
                                    |
                                    JavaScript 前端开发 开发者
                                    Vue 动态添加 HTML 元素组件封装使用方法及长尾关键词优化指南
                                    本文详细介绍了Vue中动态添加HTML元素的使用方法与组件封装技巧。内容涵盖条件渲染(v-if/v-show)、列表渲染(v-for)、动态组件(:is)、手动操作DOM及动态创建组件实例等核心方法。同时,通过动态表单、弹窗组件和动态加载组件的封装示例,展示如何提升代码复用性和可维护性。最后,总结性能优化策略与注意事项,如批量更新DOM、懒加载大型组件及避免直接操作DOM等,帮助开发者在实际项目中灵活应用Vue动态元素管理功能。
                                    178 15
                                    |
                                    2月前
                                    |
                                    XML 前端开发 C#
                                    C#编程实践:解析HTML文档并执行元素匹配
                                    通过上述步骤,可以在C#中有效地解析HTML文档并执行元素匹配。HtmlAgilityPack提供了一个强大而灵活的工具集,可以处理各种HTML解析任务。
                                    177 19
                                    |
                                    5月前
                                    |
                                    移动开发 前端开发 JavaScript
                                    HTML表单验证:确认input元素输入为具有特定整数和小数位数的数值。
                                    将上述JavaScript代码与HTML一同使用,便可以确保用户输入的数值符合特定的格式要求。特别要注意,在实际的生产环境中,仅仅依靠前端验证是不够的。为了安全起见,后端也应该实施相应的验证措施,以防止不匹配格式的数据通过其他手段提交到服务器。
                                    349 74
                                    |
                                    6月前
                                    |
                                    JavaScript 前端开发 开发者
                                    Vue 动态添加 HTML 元素组件封装使用方法及长尾关键词优化指南
                                    本文详细介绍了Vue中动态添加HTML元素的多种方法与组件封装技巧,涵盖条件渲染(v-if/v-show)、列表渲染(v-for)、动态组件(:is)、手动DOM操作及动态创建组件实例等内容。同时提供了性能优化建议,如批量更新DOM、使用v-show代替v-if以及懒加载大型组件等。通过合理封装组件,可提高代码复用性和维护性。文中还附有具体示例代码,帮助开发者更好地理解和应用相关技术。适用于前端开发人员学习和实践Vue动态元素处理与组件设计。
                                    166 19
                                    |
                                    6月前
                                    |
                                    缓存 JavaScript 前端开发
                                    Vue 项目中动态添加 HTML 元素的方法与实践
                                    本文探讨了 Vue 中动态添加 HTML 元素的多种技术方案,包括条件渲染(v-if/v-show)、动态组件(component :is)、手动挂载($mount)及 Vuex 状态管理等方法。通过实例分析,如动态表单生成器与全局模态框服务,展示了这些方案在实际开发中的应用。同时提供了性能优化建议和注意事项,帮助开发者根据需求选择最佳方式,在保持 Vue 响应式特性的同时实现灵活交互。附带代码示例,便于理解和实践。
                                    175 2
                                    |
                                    移动开发 开发者 UED
                                    HTML5 语义元素详解
                                    HTML5引入了诸多语义元素
                                    WK
                                    |
                                    存储 移动开发 前端开发
                                    HTML5新增了哪些其他元素和属性
                                    这段文字介绍了HTML5中新增的多种元素和属性,包括页面布局元素如header、nav等,表单元素如email、tel输入框等,以及其他元素如canvas、svg等。此外,还介绍了全局及表单属性,例如contenteditable、placeholder等,这些新功能显著增强了HTML5在现代网页设计与开发中的实用性与灵活性。
                                    WK
                                    463 1
                                    |
                                    JavaScript 前端开发 容器
                                    用HTML DOM实现有条件地渲染网页元素(上)
                                    用HTML DOM实现有条件地渲染网页元素(上)
                                    |
                                    存储 JavaScript 前端开发
                                    用HTML DOM实现有条件地渲染网页元素(下)
                                    用HTML DOM实现有条件地渲染网页元素(下)