zoukankan      html  css  js  c++  java
  • HTML <button> 标签

    <button> 标签定义一个按钮。
    所有主流浏览器都支持 <button> 标签。

    在 button 元素内部,您可以放置内容,比如文本或图像。这是该元素与使用 input 元素创建的按钮之间的不同之处。
    <button> 控件 与 <input type="button"> 相比,提供了更为强大的功能和更丰富的内容。

    重要:请始终为按钮规定 type 属性。IE 的默认类型是 "button", 而其他浏览器中(包括 W3C 规范)的默认值是 "submit" 。
    重要:如果在 HTML 表单中使用 button 元素,不同的浏览器会提交不同的值。IE 将提交 <button> 与 <button/> 之间的文本,而其他浏览器将提交 value 属性的内容。请在 HTML 表单中使用 input 元素来创建按钮。

    <button> 与 </button> 标签之间的所有内容都是按钮的内容,其中包括任何可接受的正文内容,比如文本或多媒体内容。
    唯一禁止使用的元素是图像映射,因为它对鼠标和键盘敏感的动作会干扰表单按钮的行为。

    HTML 4.01 与 HTML 5 之间的差异
    HTML 5 中的新属性:autofocus, form, formaction, formenctype, formmethod, formnovalidate 以及 formtarget。

    ####  autofocus  规定当页面加载时按钮应当自动地获得焦点。 H5
    <button type="button" autofocus="autofocus">点击这里</button>


    #### disabled 属性规定禁用按钮。被禁用的按钮既不可用,也不可点击。 H4
    <button type="button" disabled="disabled">Click Me!</button>


    #### form 规定按钮属于一个或多个表单。  H5
    位于表单之外的提交按钮:
    <button type="submit" form="nameform" value="Submit">提交</button>


    form 属性规定按钮属于一个或多个表单。
    form 属性的值必须是按钮所属表单的 id
    如需引用一个以上的表单,请使用空格分隔的列表。


    例:
    <form action="#" method="get" id="nameform">
      姓:<input type="text" name="lname" /><br />
      名:<input type="text" name="fname" /><br />
    </form>
    <p>下面的按钮位于 form 元素之外,但仍是表单的一部分。</p>
    <button type="submit" form="nameform" value="Submit">提交</button>


    #### formaction  覆盖 form 元素的 action 属性。 H5
    注释:该属性与 type="submit" 配合使用。
    例:
    <form action="/example/old.php" method="get">
      First name: <input type="text" name="fname" /><br />
      Last name: <input type="text" name="lname" /><br />
    <button type="submit">提交</button><br />
    <button type="submit" formaction="/example/new.php">以管理员身份提交</button>
    </form>


    #### formenctype  覆盖 form 元素的 enctype 属性。 H5
    注释:该属性与 type="submit" 配合使用。
    <button formenctype="value">
    例:
    <form action="demo_post_enctype.asp" method="post">
    <div>First name: <input type="text" name="fname" /></div>


    <button type="submit" >提交</button>
    <button type="submit" formenctype="multipart/form-data"> 以 Multipart/form-data 类型提交</button>

    </form>


    #### formmethod 覆盖 form 元素的 method 属性。 H5
    注释:该属性与 type="submit" 配合使用。
    <button formmethod="get | post">

    例子:
    <form action="demo_form.asp" method="get">
      First name: <input type="text" name="fname" />
      <div><button type="submit" >提交</button>
    <button type="submit" formmethod="post" formaction="demo_post.asp">使用 POST 来提交</button>
    </div>
    </form>


    ### formnovalidate 覆盖 form 元素的 novalidate 属性。 H5
    注释:该属性与 type="submit" 配合使用。
    如果使用该属性,则提交表单时按钮不会执行验证过程。


    例:
    带有两个提交按钮的表单(进行验证或不进行验证)
    <form action="demo_form.asp" method="get">
    E-mail: <input type="email" name="userid" />
    <div>
    <button type="submit" >提交</button>
    <button type="submit" formnovalidate="formnovalidate">进行没有验证的提交</button>
    </div>
    </form>


    ### formtarget 覆盖 form 元素的 target 属性。 H5
    注释:该属性与 type="submit" 配合使用。

    例子:
    <form action="/example/html5/demo_form.asp" method="get">
    First name: <input type="text" name="fname" />

    <button type="submit" >提交</button>
    <button type="submit" formtarget="_blank">提交到新窗口</button>
    </form>

    // _self 在同一框架中将表单提交到文档。(默认)
    // _blank     在新窗口/选项卡中将表单提交到文档。
    // _parent     在父框架中将表单提交到文档。
    // _top     在整个窗口中将表单提交到文档。
    // framename     在指定的框架中将表单提交到文档。
    注释:HTML5 不支持框架和框架集。现在,parent, top 和 framename 值大多用于 iframe。


    ### name 规定按钮的名称。 H4
    不同的 button 元素可以共享相同的名称。这就允许您标记带有相同名称的若干按钮,以便在表单中使用时能够提交不同的值。

    <form action="#" method="get">
      <button name="subject" type="submit" value="HTML">HTML</button>  // HTML
      <button name="subject" type="submit" value="CSS">CSS</button> // Choose your favorite subject: CSS
    </form>


    ### type 规定按钮的类型。 H4

    <form action="form_action.asp" method="get">
      First name: <input type="text" name="fname" />
      <button type="submit" value="Submit">Submit</button>
      <button type="reset" value="Reset">Reset</button>
    </form>

    强调:请始终为按钮规定 type 属性。IE 的默认类型是 "button",而其他浏览器中(包括 W3C 规范)的默认值是 "submit"。

    submit     该按钮是提交按钮(除了 Internet Explorer,该值是其他浏览器的默认值)。
    button     该按钮是可点击的按钮(Internet Explorer 的默认值)。
    reset     该按钮是重置按钮(清除表单数据)。


    ### value   规定按钮的初始值。可由脚本进行修改。  H4

    <form action="#" method="get">
      <button name="subject" type="submit" value="HTML">HTML</button>
      <button name="subject" type="submit" value="CSS">CSS</button>
    </form>

    重要:如果在 HTML 表单中使用 button 元素,不同的浏览器会提交不同的值。IE 将提交 <button> 与 <button/> 之间的文本,而其他浏览器将提交 value 属性的内容。
    请在 HTML 表单中使用 input 元素来创建按钮。

  • 相关阅读:
    spring中各个模块的作用
    《Spring实战》学习笔记-第四章:面向切面的Spring
    《Spring实战》学习笔记-第四章:面向切面的Spring
    Centos7下永久修改mysql5.6最大连接数
    Prefix-List
    Route-Map
    PBR Lab2
    Lab PBR
    ISIS超载位解决流量黑洞
    ISIS TLV
  • 原文地址:https://www.cnblogs.com/bigdesign/p/4398552.html
Copyright © 2011-2022 走看看