表单元素盘点第三弹 <button><select><optgroup>

简介: <button><select><optgroup>

<button >:

定义一个按钮。


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


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


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


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


属性:


  • autofocus属性:

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


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


  • disabled属性:

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


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


  • form:属性

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

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


  • 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>
  • 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属性:

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

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


<select>:

可创建单选或多选菜单。

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


属性:

  • autofocus属性(逻辑属性):

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

<select autofocus> 
<option value="volvo">Volvo</option>
 …… 
</select>
  • disabled属性

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

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


  • 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>


  • required 属性:

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


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

<select required> 
<option value="volvo">Volvo</option> 
…… 
</select>
  • 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.png







目录
相关文章
|
存储 监控 安全
PHP医院不良事件报告系统源码带鱼骨图分析
不良事件上报系统通过 “事前的人员知识培训管理和制度落地促进”、“事中的事件上报和跟进处理”、 以及 “事后的原因分析和工作持续优化”,结合预存上百套已正在使用的模板,帮助医院从对护理事件、药品事件、医疗器械事件、医院感染事件、输血事件、意外事件、职业暴露事件、后勤保障事件、信息安全事件、消防事件、工程事件、质量安全事件等各类不良事件进行管理的软件。
331 1
|
数据安全/隐私保护
ApeForms | WinForm窗体UI美化库(Metro扁平风格)演示与安装
ApeForms是一套基于WinForm框架免费的UI库,提供了丰富的Metro风格控件、针对WinForm开发中常见类型的扩展、通用Dialog/Notification的模板等。
735 0
ApeForms | WinForm窗体UI美化库(Metro扁平风格)演示与安装
|
Windows
推荐两种小软件
推荐两种小软件
245 0
|
6天前
|
人工智能 安全 API
CoPaw:5分钟部署你的 AI助理
源自阿里巴巴开源生态的个人 AI 助理——CoPaw。作为阿里倾力打造的开源力作,CoPaw 完美打通钉钉、飞书、Discord 等多平台对话通道,支持定时任务自动化。内置 PDF/Office 深度处理、新闻摘要等强大技能,更开放自定义扩展接口。坚持数据全程私有化部署,绝不上传云端,让每一位用户都能在大厂技术加持下,拥有安全、专属的智能助手。
|
9天前
|
人工智能 自然语言处理 JavaScript
2026年Windows+Ollama本地部署OpenClaw保姆级教程:本地AI Agent+阿里云上快速搭建
2026年OpenClaw凭借本地部署、私有化运行的特性,成为打造个人智能体的核心工具,而Ollama作为轻量级本地大模型管理工具,能让OpenClaw摆脱对云端大模型的依赖,实现**本地推理、数据不泄露、全流程私有化**的智能体验。本文基于Windows 11系统,从硬件环境准备、Ollama安装与模型定制、OpenClaw部署配置、技能扩展到常见问题排查,打造保姆级本地部署教程,同时补充阿里云OpenClaw(Clawdbot)快速部署步骤,兼顾本地私有化需求与云端7×24小时运行需求,文中所有代码命令均可直接复制执行,确保零基础用户也能快速搭建属于自己的本地智能体。
10383 80
|
7天前
|
人工智能 安全 JavaScript
阿里云上+本地部署OpenClaw(小龙虾)新手攻略:解锁10大必备Skills,零基础也能玩转AI助手
2026年,开源AI代理工具OpenClaw(昵称“小龙虾”)凭借“能实际做事”的核心优势,在GitHub斩获25万+星标,成为现象级AI工具。它最强大的魅力在于可扩展的Skills(技能包)系统——通过ClawHub插件市场的数百个技能,能让AI助手从简单聊天升级为处理办公、学习、日常事务的全能帮手。
6029 16
|
8天前
|
人工智能 自然语言处理 机器人
保姆级教程:Mac本地搭建OpenClaw及阿里云上1分钟部署OpenClaw+飞书集成实战指南
OpenClaw(曾用名Clawdbot、Moltbot)作为2026年最热门的开源个人AI助手平台,以“自然语言驱动自动化”为核心,支持对接飞书、Telegram等主流通讯工具,可替代人工完成文件操作、日历管理、邮件处理等重复性工作。其模块化架构适配多系统环境,既可以在Mac上本地化部署打造私人助手,也能通过阿里云实现7×24小时稳定运行,完美兼顾隐私性与便捷性。
5933 13
|
10天前
|
人工智能 JSON JavaScript
手把手教你用 OpenClaw + 飞书,打造专属 AI 机器人
手把手教你用 OpenClaw(v2026.2.22-2)+ 飞书,10分钟零代码搭建专属AI机器人!内置飞书插件,无需额外安装;支持Claude等主流模型,命令行一键配置。告别复杂开发,像聊同事一样自然对话。
6131 15
手把手教你用 OpenClaw + 飞书,打造专属 AI 机器人
|
5天前
|
人工智能 JavaScript Ubuntu
5分钟上手龙虾AI!OpenClaw部署(阿里云+本地)+ 免费多模型配置保姆级教程(MiniMax、Claude、阿里云百炼)
OpenClaw(昵称“龙虾AI”)作为2026年热门的开源个人AI助手,由PSPDFKit创始人Peter Steinberger开发,核心优势在于“真正执行任务”——不仅能聊天互动,还能自动处理邮件、管理日程、订机票、写代码等,且所有数据本地处理,隐私完全可控。它支持接入MiniMax、Claude、GPT等多类大模型,兼容微信、Telegram、飞书等主流聊天工具,搭配100+可扩展技能,成为兼顾实用性与隐私性的AI工具首选。
3566 7