表单元素盘点第三弹 ＜button＞＜select＞＜optgroup＞

📚博主有话说：如果有描述错误之处请大家纠正。让我们一起学习一起进步。

📃内容专栏：表单和输入

🧸此块内容为纯纯的干货，略显乏味枯燥，是笔记向的blog。如果觉得还不错，希望你可以一键三连，一整个大感谢。

前情回顾：

元素详细介绍</td> </tr> <tr> <td>＜input＞元素详细介绍_GUIDM的博客-CSDN博客</td> </tr> <tr> <td>HTML5结构标签_GUIDM的博客-CSDN博客</td> </tr> </tbody> </table> <h2>这一期介绍表单家族中的三个元素！继续加油干。</h2> </blockquote> <h2><button>:</h2> <p>定义一个<a href="https://www.csdndoc.com/tag/%e6%8c%89%e9%92%ae" title="View all posts in 按钮" target="_blank" style="color:#0ec3f3;font-size: 18px;font-weight: 600;">按钮</a>。</p> <p>在button元素内部，可以置放内容（如文本或图像）这是与input元素创建按钮之间的不同之处。</p> <p><button></button>标签之间的所有内容都是按钮的内容，其中包括任何可接受的正文内容，如文本或多媒体内容。</p> <p>唯一禁止使用的元素是图像映射，因为它对鼠标和键盘敏感的动作会干扰表单按钮的行为。</p> <p>如果在HTML表单中使用button元素，不同的浏览器会提交不同的按钮值，请使用input元素在html表单中创建按钮。</p> <p><a href="https://www.csdndoc.com/tag/%e5%b1%9e%e6%80%a7" title="View all posts in 属性" target="_blank" style="color:#0ec3f3;font-size: 18px;font-weight: 600;">属性</a>：</p> <ul> <li>autofocus属性：</li> </ul> <p>规定当前页面加载时按钮应当自动地获得焦点。</p> <pre><code class="language-html"><button type="button"> click it </button></code></pre> <ul> <li>disabled属性：</li> </ul> <p>规定禁用按钮，被禁用的按钮既不可用，也不点击。</p> <pre><code class="language-html"><button type="button" disabled> click me </button></code></pre> <ul> <li>form:属性</li> </ul> <p>规定按钮属于一个或多个表单，属性值必须是按钮所属表单的id</p> <pre><code class="language-html"> …… <p>下面的按钮位于form元素之外，但仍是表单一部分</p> <button type="submit" value="Submit">提交</button></code></pre> <ul> <li>foraction属性：</li> </ul> <p>覆盖form元素的action属性（与type="submit"配合使用）</p> <pre><code class="language-html"> …… <button type="submit">提交</button> <button type="submit">以管理员身份提交</button> </code></pre> <ul> <li>formentype属性（与type="submit"配合使用）</li> <li>formethod属性（与type="submit"配合使用）</li> <li>formnovalidate属性（与type="submit"配合使用）</li> <li>formtarget属性（与type="submit"配合使用）</li> </ul> <p><strong>注：这些与input的用法相同就不介绍了。</strong></p> <ul> <li>name属性：</li> </ul> <p>规定按钮名称，用于在JS中对元素进行引用，或在表单提交之后，对表单数据进行引用。</p> <p>不同的button元素可以共享相同的名称。</p> <ul> <li>type属性：</li> </ul> <p>规定按钮的类型。</p> <p><strong>属性值：</strong></p> <ol> <li>submit：提交按钮（默认值）</li> <li>button：可点击的按钮</li> <li>reset：重置按钮</li> </ol> <pre><code class="language-html"><button type="submit" value="Submit">Submit</button></code></pre> <ul> <li>value属性：</li> </ul> <p>指定中的<button>的初始值，仅当按钮本身用于提交表单时，才会提交按钮及其值。</p> <pre><code class="language-html"><button name="subject" type="submit" value="fav-HTML">HTML</button></code></pre> <h2>:</h2> <p>可创建单选或多选菜单。</p> <p>元素中的标签用于定义列表中的可用选项。</p> <p><strong>属性：</strong></p> <ul> <li>autofocus属性（逻辑属性）：</li> </ul> <p>当设置该属性后，它规定在页面加载后下拉列表应该自动获得焦点。</p> <pre><code class="language-html"> Volvo …… </code></pre> <ul> <li>disabled属性</li> </ul> <p>规定禁用下拉列表，被禁用的下拉列表既不可用也不可点击。</p> <pre><code class="language-html"> Volvo …… </code></pre> <ul> <li>form属性：</li> </ul> <p>规定下拉列表所属的一个或多个表单，属性值必须是同一个文档中的某个元素的id属性。</p> <pre><code class="language-html"> …… <p>下面的select位于form元素外，但仍属于表单的一部分</p> Volvo …… </code></pre> <ul> <li>multiple属性：</li> </ul> <p>规定可同时选择多个选项，可以把multiple属性与size属性配合，来定义可见选项的数目。</p> <pre><code class="language-html"> Volvo …… </code></pre> <ul> <li>required 属性：</li> </ul> <p>所有主流浏览器都不支持。</p> <p>规定用户在提交表单之前必须选择一个值。</p> <pre><code class="language-html"> Volvo …… </code></pre> <ul> <li>size 属性：</li> </ul> <p>规定下拉列表中可见选项的数目。</p> <p>如果size属性的值大于1，但小于列表中选项的总数目，浏览器会显示出滚动条。</p> <pre><code class="language-html"> Volvo …… </code></pre> <h2>:</h2> <p>定义选项组，用于组合选项，当使用一个选项列表时，对于相关的选项进行组合会使处理更加容易。</p> <ul> <li>必需属性：</li> </ul> <p>label：规定描述</p> <pre><code class="language-html"> Volvo …… </code></pre> <ul> <li>可选属性：</li> </ul> <p>disabled：规定禁用该选项组。被禁用的选项组既不可用也不可点击。</p> <pre><code class="language-html"> Volvo …… </code></pre> <blockquote> <p>感谢兄弟们能看到最后最后附上一张我用wolai做的笔记</p> <p style="text-align:center"><img src="https://img-blog.csdnimg.cn/5bcb6c30173b438894cfbe136d8e036f.png" alt="表单元素盘点第三弹 ＜button＞＜select＞＜optgroup＞" alt="5bcb6c30173b438894cfbe136d8e036f.png" /></p> <p> </p> <p> </p> </blockquote> <p> </p> </div> <div class="clear"></div> <div class="article_tags"> <div class="tagcloud"> 网络标签：<a href="https://www.csdndoc.com/tag/%e5%b1%9e%e6%80%a7" rel="tag">属性</a> <a href="https://www.csdndoc.com/tag/%e6%8c%89%e9%92%ae" rel="tag">按钮</a> <a href="https://www.csdndoc.com/tag/%e8%a1%a8%e5%8d%95" rel="tag">表单</a> </div> </div> </div> </div> <div> <ul class="post-navigation row"> <div class="post-previous twofifth"> 上一篇 <br> <a href="https://www.csdndoc.com/doc/11851.html" rel="prev">表单元素盘点第二弹＜form＞＜textarea＞元素详细介绍</a> </div> <div class="post-next twofifth"> 下一篇 <br> <a href="https://www.csdndoc.com/doc/11853.html" rel="next">【置顶】HTML5元素大全</a> </div> </ul> </div> <div class="article_container row box article_related"> <div class="related"> <div class="newrelated"> <h2>相关问题</h2> <ul> <li><a href="https://www.csdndoc.com/wzlb/24612.html">怎么做电商小程序</a></li> <li><a href="https://www.csdndoc.com/wzlb/25189.html">微信小程序怎么注册开发</a></li> <li><a href="https://www.csdndoc.com/wzlb/23884.html">微信小程序在哪登录</a></li> <li><a href="https://www.csdndoc.com/doc/18652.html">梅科尔工作室-位青-鸿蒙笔记2</a></li> <li><a href="https://www.csdndoc.com/sygl/27230.html">2016冬活攻略</a></li> <li><a href="https://www.csdndoc.com/doc/15048.html">2022年高考送祝福，金秋9月，CSDN等你哦！</a></li> <li><a href="https://www.csdndoc.com/wzlb/25957.html">研发控制程序</a></li> <li><a href="https://www.csdndoc.com/doc/561.html">编程界也有修仙秘籍？程序员码字3年终得《JavaScript 百炼成仙》</a></li> <li><a href="https://www.csdndoc.com/wzlb/27663.html">历史记录在哪看（历史记录在哪）</a></li> <li><a href="https://www.csdndoc.com/doc/13707.html">智慧物流园区供应链系统解决方案：赋能物流运输行业供应链新模式</a></li> </ul> </div> </div> </div> <div class="clear"></div> <div id="comments_box"> </div> </div> <div id="sidebar"> <div id="sidebar-follow"> <div class="search box row"> <div class="search_site"> <form id="searchform" method="get" action="https://www.csdndoc.com/index.php"> <button type="submit" value="" id="searchsubmit" class="button"><i class="fasearch">☚</i></button> <label><input type="text" class="search-s" name="s" x-webkit-speech="" placeholder="请输入搜索内容"></label> </form></div></div> <div class="widget_text widget box row widget_custom_html"><h3>公告</h3><div class="textwidget custom-html-widget"><a target="_blank" href="http://www.5d.ink/freefonts/?d=FreeFontsdown.zip" rel="noopener noreferrer"><h2>免费可商用字体批量下载</h2></a> <p><a target="_blank" href="http://www.5d.ink/freefonts/?d=FreeFontsdown.zip" rel="noopener noreferrer"><img src="http://css.5d.ink/img/freefont.png" alt="免费可商用字体下载"></a></p></div></div> <div class="widget box row widget_tag_cloud"><h3>标签</h3><div class="tagcloud"><a href="https://www.csdndoc.com/tag/%e4%bb%a3%e7%a0%81" class="tag-cloud-link tag-link-19 tag-link-position-1" style="font-size: 13.913793103448pt;" aria-label="代码 (787个项目)">代码</a> <a href="https://www.csdndoc.com/tag/%e5%85%83%e7%b4%a0" class="tag-cloud-link tag-link-500 tag-link-position-2" style="font-size: 12.706896551724pt;" aria-label="元素 (629个项目)">元素</a> <a href="https://www.csdndoc.com/tag/%e5%87%bd%e6%95%b0" class="tag-cloud-link tag-link-111 tag-link-position-3" style="font-size: 15.724137931034pt;" aria-label="函数 (1,123个项目)">函数</a> <a href="https://www.csdndoc.com/tag/%e5%8a%9f%e8%83%bd" class="tag-cloud-link tag-link-294 tag-link-position-4" style="font-size: 10.051724137931pt;" aria-label="功能 (376个项目)">功能</a> <a href="https://www.csdndoc.com/tag/%e5%8f%82%e6%95%b0" class="tag-cloud-link tag-link-680 tag-link-position-5" style="font-size: 9.448275862069pt;" aria-label="参数 (335个项目)">参数</a> <a href="https://www.csdndoc.com/tag/%e5%8f%98%e9%87%8f" class="tag-cloud-link tag-link-81 tag-link-position-6" style="font-size: 11.137931034483pt;" aria-label="变量 (471个项目)">变量</a> <a href="https://www.csdndoc.com/tag/%e5%91%bd%e4%bb%a4" class="tag-cloud-link tag-link-570 tag-link-position-7" style="font-size: 9.448275862069pt;" aria-label="命令 (336个项目)">命令</a> <a href="https://www.csdndoc.com/tag/%e5%9c%a8%e8%bf%99%e9%87%8c" class="tag-cloud-link tag-link-33 tag-link-position-8" style="font-size: 21.034482758621pt;" aria-label="在这里 (3,056个项目)">在这里</a> <a href="https://www.csdndoc.com/tag/%e5%ad%97%e7%ac%a6%e4%b8%b2" class="tag-cloud-link tag-link-556 tag-link-position-9" style="font-size: 10.655172413793pt;" aria-label="字符串 (428个项目)">字符串</a> <a href="https://www.csdndoc.com/tag/%e5%ae%b9%e5%99%a8" class="tag-cloud-link tag-link-332 tag-link-position-10" style="font-size: 9.448275862069pt;" aria-label="容器 (338个项目)">容器</a> <a href="https://www.csdndoc.com/tag/%e5%af%b9%e8%b1%a1" class="tag-cloud-link tag-link-175 tag-link-position-11" style="font-size: 14.155172413793pt;" aria-label="对象 (831个项目)">对象</a> <a href="https://www.csdndoc.com/tag/%e5%b1%9e%e6%80%a7" class="tag-cloud-link tag-link-468 tag-link-position-12" style="font-size: 9.5689655172414pt;" aria-label="属性 (349个项目)">属性</a> <a href="https://www.csdndoc.com/tag/%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f" class="tag-cloud-link tag-link-39 tag-link-position-13" style="font-size: 10.413793103448pt;" aria-label="应用程序 (407个项目)">应用程序</a> <a href="https://www.csdndoc.com/tag/%e6%89%8b%e6%9c%ba" class="tag-cloud-link tag-link-28 tag-link-position-14" style="font-size: 10.293103448276pt;" aria-label="手机 (393个项目)">手机</a> <a href="https://www.csdndoc.com/tag/%e6%8c%87%e9%92%88" class="tag-cloud-link tag-link-849 tag-link-position-15" style="font-size: 8.1206896551724pt;" aria-label="指针 (262个项目)">指针</a> <a href="https://www.csdndoc.com/tag/%e6%8e%a5%e5%8f%a3" class="tag-cloud-link tag-link-110 tag-link-position-16" style="font-size: 10.293103448276pt;" aria-label="接口 (401个项目)">接口</a> <a href="https://www.csdndoc.com/tag/%e6%8f%92%e5%85%a5%e5%9b%be%e7%89%87" class="tag-cloud-link tag-link-336 tag-link-position-17" style="font-size: 16.689655172414pt;" aria-label="插入图片 (1,344个项目)">插入图片</a> <a href="https://www.csdndoc.com/tag/%e6%93%8d%e4%bd%9c" class="tag-cloud-link tag-link-179 tag-link-position-18" style="font-size: 9.9310344827586pt;" aria-label="操作 (367个项目)">操作</a> <a href="https://www.csdndoc.com/tag/%e6%95%b0%e6%8d%ae" class="tag-cloud-link tag-link-97 tag-link-position-19" style="font-size: 17.775862068966pt;" aria-label="数据 (1,660个项目)">数据</a> <a href="https://www.csdndoc.com/tag/%e6%95%b0%e6%8d%ae%e5%ba%93" class="tag-cloud-link tag-link-92 tag-link-position-20" style="font-size: 9.448275862069pt;" aria-label="数据库 (336个项目)">数据库</a> <a href="https://www.csdndoc.com/tag/%e6%95%b0%e7%bb%84" class="tag-cloud-link tag-link-671 tag-link-position-21" style="font-size: 13.068965517241pt;" aria-label="数组 (669个项目)">数组</a> <a href="https://www.csdndoc.com/tag/%e6%96%87%e4%bb%b6" class="tag-cloud-link tag-link-109 tag-link-position-22" style="font-size: 15.724137931034pt;" aria-label="文件 (1,124个项目)">文件</a> <a href="https://www.csdndoc.com/tag/%e6%96%b9%e6%b3%95" class="tag-cloud-link tag-link-112 tag-link-position-23" style="font-size: 15.241379310345pt;" aria-label="方法 (1,033个项目)">方法</a> <a href="https://www.csdndoc.com/tag/%e6%97%b6%e9%97%b4" class="tag-cloud-link tag-link-21 tag-link-position-24" style="font-size: 8.4827586206897pt;" aria-label="时间 (281个项目)">时间</a> <a href="https://www.csdndoc.com/tag/%e6%a8%a1%e5%9e%8b" class="tag-cloud-link tag-link-49 tag-link-position-25" style="font-size: 8.1206896551724pt;" aria-label="模型 (263个项目)">模型</a> <a href="https://www.csdndoc.com/tag/%e7%89%88%e6%9c%ac" class="tag-cloud-link tag-link-15 tag-link-position-26" style="font-size: 9.0862068965517pt;" aria-label="版本 (317个项目)">版本</a> <a href="https://www.csdndoc.com/tag/%e7%94%a8%e6%88%b7" class="tag-cloud-link tag-link-100 tag-link-position-27" style="font-size: 15.120689655172pt;" aria-label="用户 (1,008个项目)">用户</a> <a href="https://www.csdndoc.com/tag/%e7%94%b5%e8%84%91" class="tag-cloud-link tag-link-564 tag-link-position-28" style="font-size: 9.8103448275862pt;" aria-label="电脑 (359个项目)">电脑</a> <a href="https://www.csdndoc.com/tag/%e7%9a%84%e6%98%af" class="tag-cloud-link tag-link-41 tag-link-position-29" style="font-size: 8.7241379310345pt;" aria-label="的是 (293个项目)">的是</a> <a href="https://www.csdndoc.com/tag/%e7%a8%8b%e5%ba%8f" class="tag-cloud-link tag-link-102 tag-link-position-30" style="font-size: 22pt;" aria-label="程序 (3,721个项目)">程序</a> <a href="https://www.csdndoc.com/tag/%e7%a8%8b%e5%ba%8f%e5%91%98" class="tag-cloud-link tag-link-58 tag-link-position-31" style="font-size: 11.258620689655pt;" aria-label="程序员 (479个项目)">程序员</a> <a href="https://www.csdndoc.com/tag/%e7%ae%97%e6%b3%95" class="tag-cloud-link tag-link-225 tag-link-position-32" style="font-size: 8.4827586206897pt;" aria-label="算法 (284个项目)">算法</a> <a href="https://www.csdndoc.com/tag/%e7%b1%bb%e5%9e%8b" class="tag-cloud-link tag-link-273 tag-link-position-33" style="font-size: 8.8448275862069pt;" aria-label="类型 (302个项目)">类型</a> <a href="https://www.csdndoc.com/tag/%e7%b3%bb%e7%bb%9f" class="tag-cloud-link tag-link-138 tag-link-position-34" style="font-size: 10.534482758621pt;" aria-label="系统 (420个项目)">系统</a> <a href="https://www.csdndoc.com/tag/%e7%ba%bf%e7%a8%8b" class="tag-cloud-link tag-link-463 tag-link-position-35" style="font-size: 11.862068965517pt;" aria-label="线程 (532个项目)">线程</a> <a href="https://www.csdndoc.com/tag/%e7%bb%84%e4%bb%b6" class="tag-cloud-link tag-link-523 tag-link-position-36" style="font-size: 10.775862068966pt;" aria-label="组件 (438个项目)">组件</a> <a href="https://www.csdndoc.com/tag/%e8%87%aa%e5%b7%b1%e7%9a%84" class="tag-cloud-link tag-link-5 tag-link-position-37" style="font-size: 14.758620689655pt;" aria-label="自己的 (940个项目)">自己的</a> <a href="https://www.csdndoc.com/tag/%e8%8a%82%e7%82%b9" class="tag-cloud-link tag-link-676 tag-link-position-38" style="font-size: 12.344827586207pt;" aria-label="节点 (584个项目)">节点</a> <a href="https://www.csdndoc.com/tag/%e8%ae%be%e5%a4%87" class="tag-cloud-link tag-link-25 tag-link-position-39" style="font-size: 8.1206896551724pt;" aria-label="设备 (264个项目)">设备</a> <a href="https://www.csdndoc.com/tag/%e8%af%ad%e8%a8%80" class="tag-cloud-link tag-link-36 tag-link-position-40" style="font-size: 9.6896551724138pt;" aria-label="语言 (355个项目)">语言</a> <a href="https://www.csdndoc.com/tag/%e8%bd%af%e4%bb%b6" class="tag-cloud-link tag-link-155 tag-link-position-41" style="font-size: 10.534482758621pt;" aria-label="软件 (412个项目)">软件</a> <a href="https://www.csdndoc.com/tag/%e9%98%9f%e5%88%97" class="tag-cloud-link tag-link-678 tag-link-position-42" style="font-size: 8pt;" aria-label="队列 (254个项目)">队列</a> <a href="https://www.csdndoc.com/tag/%e9%a1%b5%e9%9d%a2" class="tag-cloud-link tag-link-279 tag-link-position-43" style="font-size: 9.5689655172414pt;" aria-label="页面 (348个项目)">页面</a> <a href="https://www.csdndoc.com/tag/%e9%a1%b9%e7%9b%ae" class="tag-cloud-link tag-link-82 tag-link-position-44" style="font-size: 10.172413793103pt;" aria-label="项目 (388个项目)">项目</a> <a href="https://www.csdndoc.com/tag/%e9%b8%bf%e8%92%99" class="tag-cloud-link tag-link-136 tag-link-position-45" style="font-size: 8pt;" aria-label="鸿蒙 (257个项目)">鸿蒙</a></div> </div> <div class="widget box row"> <div id="tab-title"> <div class="tab"> <ul id="tabnav"> <li class="selected">猜你想看的文章</li> </ul> </div> <div class="clear"></div> </div> <div id="tab-content"> <ul> <li><a href="https://www.csdndoc.com/doc/2288.html">JAVA体系实战项目-SpringBoot+Thymeleaf+Mybatis+Maven+Oracle综合性电商项目</a></li> <li><a href="https://www.csdndoc.com/doc/1870.html">小记一手 “Redis持久化机制”</a></li> <li><a href="https://www.csdndoc.com/wzlb/20155.html">春节通行证任务更新</a></li> <li><a href="https://www.csdndoc.com/doc/9320.html">【全栈软件测试】二、Windows服务器（1）搭建DNS服务器</a></li> <li><a href="https://www.csdndoc.com/doc/28892.html">冷月无声的下一句是什么</a></li> <li><a href="https://www.csdndoc.com/doc/11289.html">ReentrantReadWriteLock读写锁源码分析</a></li> <li><a href="https://www.csdndoc.com/wzlb/24116.html">微信团购小程序哪个好</a></li> <li><a href="https://www.csdndoc.com/doc/13516.html">TCP连接与断开，状态迁移图详解</a></li> <li><a href="https://www.csdndoc.com/doc/3200.html">与运算的基础运用</a></li> <li><a href="https://www.csdndoc.com/doc/12192.html">Kafka实战《原理2》</a></li> </ul> </div> </div> </div> </div> </div> </div> <div class="clear"></div> <div id="footer"> <div class="container"> <div class="twothird"> </div> </div> <div class="container"> <div class="twothird"> <div class="copyright"> <p> Copyright © 2012 - 2024 <a href="https://www.csdndoc.com/"><strong>程序员档案馆</strong></a> Powered by <a href="/lists">网站分类目录</a> | <a href="/top100.php" target="_blank">精选推荐文章</a> | <a href="/sitemap.xml" target="_blank">网站地图</a> | <a href="/post/" target="_blank">疑难解答</a> <a href="https://beian.miit.gov.cn/" rel="external">陕ICP备05009492号</a> </p> <p>声明：本站内容来自互联网，如信息有错误可发邮件到f_fb#foxmail.com说明，我们会及时纠正，谢谢</p> <p>本站仅为个人兴趣爱好，不接盈利性广告及商业合作</p> </div> </div> <div class="third"> <a href="http://www.xiaoboy.cn" target="_blank">小男孩</a> </div> </div> </div> <!--gototop--> <div id="tbox"> <a id="home" href="https://www.csdndoc.com" title="返回首页"><i class="fa fa-gohome"></i></a> <a id="pinglun" href="#comments_box" title="前往评论"><i class="fa fa-commenting"></i></a> <a id="gotop" href="javascript:void(0)" title="返回顶部"><i class="fa fa-chevron-up"></i></a> </div> <script src="//css.5d.ink/body5.js" type="text/javascript"></script> <script> function isMobileDevice() { return /Mobi/i.test(navigator.userAgent) || /Android/i.test(navigator.userAgent) || /iPhone|iPad|iPod/i.test(navigator.userAgent) || /Windows Phone/i.test(navigator.userAgent); } // 加载对应的 JavaScript 文件 if (isMobileDevice()) { var script = document.createElement('script'); script.src = '//css.5d.ink/js/menu.js'; script.type = 'text/javascript'; document.getElementsByTagName('head')[0].appendChild(script); } </script> <script> $(document).ready(function() { $("#sidebar-follow").pin({ containerSelector: ".main-container", padding: {top:64}, minWidth: 768 }); $(".mainmenu").pin({ containerSelector: ".container", padding: {top:0} }); $(".swipebox").swipebox(); }); </script> </body></html>