在此页

• 值
• Additional attributes
• Using submit buttons
• 验证
• 范例
• 规范
• 浏览器兼容性
• 另请参阅
• 相关话题

<input> elements of type submit are rendered as buttons. When the click event occurs (typically because the user clicked the button), the 用户代理 attempts to submit the form to the server.

<input type="submit" value="Send Request">

值	A DOMString used as the button's label
事件	click
Supported common attributes	type and value
IDL attributes	value
方法	None

值

An <input type="submit"> 元素的 value attribute contains a DOMString which is displayed as the button's label. Buttons do not have a true value otherwise.

<input type="submit" value="Send Request">

If you don't specify a value , the button will have a default label, chosen by the user agent. This label is likely to be something along the lines of "Submit" or "Submit Query." Here's an example of a submit button with a default label in your browser:

<input type="submit">

Additional attributes

In addition to the attributes shared by all <input> elements, submit button inputs support the following attributes:

属性	描述
formaction	The URL to which to submit the form's data; overrides the form's action attribute, if any
formenctype	A string specifying the encoding type to use for the form data
formmethod	The HTTP method ( get or post ) to use when submitting the form.
formnovalidate	A Boolean which, if present, means the form's fields will not be subjected to constraint validation before submitting the data to the server
formtarget	浏览上下文 into which to load the response returned by the server after submitting the form

formaction

A string indicating the URL to which to submit the data. This takes precedence over the action 属性在 <form> element that owns the <input> .

This attribute is also available on <input type="image"> and <button> 元素。

formenctype

A string that identifies the encoding method to use when submitting the form data to the server. There are three permitted values:

application/x-www-form-urlencoded

This, the default value, sends the form data as a string after URL encoding the text using an algorithm such as encodeURI() .

multipart/form-data

使用 FormData API to manage the data, allowing for files to be submitted to the server. You must use this encoding type if your form includes any <input> elements of type file ( <input type="file"> ).

text/plain

Plain text; mostly useful only for debugging, so you can easily see the data that's to be submitted.

If specified, the value of the formenctype attribute overrides the owning form's action 属性。

This attribute is also available on <input type="image"> and <button> 元素。

formmethod

A string indicating the HTTP method to use when submitting the form's data; this value overrides any method attribute given on the owning form. Permitted values are:

get

A URL is constructed by starting with the URL given by the formaction or action attribute, appending a question mark ("?") character, then appending the form's data, encoded as described by formenctype or the form's enctype attribute. This URL is then sent to the server using an HTTP get request. This method works well for simple forms that contain only ASCII characters and have no side effects. This is the default value.

post

The form's data is included in the body of the request that is sent to the URL given by the formaction or action attribute using an HTTP post method. This method supports complex data and file attachments.

dialog

This method is used to indicate that the button simply closes the dialog with which the input is associated, and does not transmit the form data at all.

This attribute is also available on <input type="image"> and <button> 元素。

formnovalidate

A Boolean attribute which, if present, specifies that the form should not be validated before submission to the server. This overrides the value of the novalidate attribute on the element's owning form.

This attribute is also available on <input type="image"> and <button> 元素。

formtarget

A string which specifies a name or keyword that indicates where to display the response received after submitting the form. The string must be the name of a 浏览上下文 (that is, a tab, window, or <iframe> . A value specified here overrides any target given by the target 属性在 <form> that owns this input.

In addition to the actual names of tabs, windows, or inline frames, there are a few special keywords that can be used:

_self

Loads the response into the same browsing context as the one that contains the form. This will replace the current document with the received data. This is the default value used if none is specified.

_blank

Loads the response into a new, unnamed, browsing context. This is typically a new tab in the same window as the current document, but may differ depending on the configuration of the 用户代理 .

_parent

Loads the response into the parent browsing context of the current one. If there is no parent context, this behaves the same as _self .

_top

Loads the response into the top-level browsing context; this is the browsing context that is the topmost ancestor of the current context. If the current context is the topmost context, this behaves the same as _self .

This attribute is also available on <input type="image"> and <button> 元素。

Using submit buttons

<input type="submit"> buttons are used to submit forms. If you want to create a custom button and then customize the behavior using JavaScript, you need to use <input type="button"> , or better still, a <button> 元素。

If you choose to use <button> elements to create the buttons in your form, keep this in mind: if there's only one <button> 在 <form> , that button will be treated as the "submit" button. So you should be in the habit of expressly specifying which button is the submit button.

A simple submit button

We'll begin by creating a form with a simple submit button:

<form>
  <div>
    <label for="example">Let's submit some text</label>
    <input id="example" type="text" name="text">
  </div>
  <div>
    <input type="submit" value="Send">
  </div>
</form>

This renders like so:

Try entering some text into the text field, and then submitting the form.

Upon submitting, the data name/value pair gets sent to the server. In this instance, the string will be text= usertext , where "usertext" is the text entered by the user, encoded to preserve special characters. Where and how the data is submitted depends on the configuration of the <form> ；见 Sending form data 了解更多细节。

Adding a submit keyboard shortcut

Keyboard shortcuts, also known as access keys and keyboard equivalents, let the user trigger a button using a key or combination of keys on the keyboard. To add a keyboard shortcut to a submit button — just as you would with any <input> for which it makes sense — you use the accesskey 全局属性。

在此范例中， s is specified as the access key (you'll need to press s plus the particular modifier keys for your browser/OS combination. In order to avoid conflicts with the user agent's own keyboard shortcuts, different modifier keys are used for access keys than for other shortcuts on the host computer. See accesskey 进一步了解细节。

Here's the previous example with the s access key added:

<form>
  <div>
    <label for="example">Let's submit some text</label>
    <input id="example" type="text" name="text">
  </div>
  <div>
    <input type="submit" value="Send"
     accesskey="s">
  </div>
</form>

For example, in Firefox for Mac, pressing Control - 选项 - S triggers the Send button, while Chrome on Windows uses Alt + S .

The problem with the above example is that the user will not know what the access key is! This is especially true since the modifiers are typically non-standard to avoid conflicts. When building a site, be sure to provide this information in a way that doesn't interfere with the site design (for example by providing an easily accessible link that points to information on what the site access keys are). Adding a tooltip to the button (using the title attribute) can also help, although it's not a complete solution for accessibility purposes.

Disabling and enabling a submit button

To disable a submit button, simply specify the 被禁用 global attribute on it, like so:

<input type="submit" value="Disabled" disabled>

You can enable and disable buttons at run time by simply setting 被禁用 to true or false ; in JavaScript this looks like btn.disabled = true or btn.disabled = false .

见 <input type="button"> page for more ideas about enabling and disabling buttons.

验证

Submit buttons don't participate in constraint validation; they have no real value to be constrained.

范例

We've included simple examples above. There isn't really anything more to say about submit buttons. There's a reason this kind of control is sometimes called a "simple button."

规范

规范	状态	注释
HTML 实时标准 The definition of '<input type="submit">' in that specification.	实时标准
HTML5 The definition of '<input type="submit">' in that specification.	推荐

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
type="submit"	Chrome 完整支持 1	Edge 完整支持 12	Firefox 完整支持 1 注意事项 完整支持 1 注意事项 注意事项 Unlike other browsers, Firefox by default persists the dynamic disabled state 的 <button> across page loads. Use the autocomplete attribute to control this feature.	IE 完整支持 Yes	Opera 完整支持 Yes	Safari 完整支持 1	WebView Android 完整支持 Yes	Chrome Android 完整支持 Yes	Firefox Android 完整支持 4 注意事项 完整支持 4 注意事项 注意事项 Unlike other browsers, Firefox by default persists the dynamic disabled state 的 <button> across page loads. Use the autocomplete attribute to control this feature.	Opera Android 完整支持 Yes	Safari iOS 完整支持 Yes	Samsung Internet Android 完整支持 Yes

图例

完整支持

完整支持

见实现注意事项。

见实现注意事项。

另请参阅

• <input> 和 HTMLInputElement interface which implements it.
• Forms and buttons
• Forms (accessibility)
• HTML 表单
• <button> element
• Compatibility of CSS properties

元数据

• 最后修改： Oct 11, 2020

相关话题

1. <button>
2. <datalist>
3. <fieldset>
4. <form>
5. <input>
6. <label>
7. <legend>
8. <meter>
9. <optgroup>
10. <option>
11. <output>
12. <progress>
13. <select>
14. <textarea>
15. <input> 类型

    1. <input type="button">
    2. <input type="checkbox">
    3. <input type="color">
    4. <input type="date">
    5. <input type="datetime">
    6. <input type="datetime-local">
    7. <input type="email">
    8. <input type="file">
    9. <input type="hidden">
    10. <input type="image">
    11. <input type="month">
    12. <input type="number">
    13. <input type="password">
    14. <input type="radio">
    15. <input type="range">
    16. <input type="reset">
    17. <input type="search">
    18. <input type="submit">
    19. <input type="tel">
    20. <input type="text">
    21. <input type="time">
    22. <input type="url">
    23. <input type="week">
16. HTML 元素

    1. A
       1. <a>
       2. <abbr>
       3. <acronym>
       4. <address>
       5. <applet>
       6. <area>
       7. <article>
       8. <aside>
       9. <audio>
    2. B
       1. <b>
       2. <base>
       3. <basefont>
       4. <bdi>
       5. <bdo>
       6. <bgsound>
       7. <big>
       8. <blink>
       9. <blockquote>
       10. <body>
       11. <br>
       12. <button>
    3. C
       1. <canvas>
       2. <caption>
       3. <center>
       4. <cite>
       5. <code>
       6. <col>
       7. <colgroup>
       8. <content>
    4. D
       1. <data>
       2. <datalist>
       3. <dd>
       4. <del>
       5. <details>
       6. <dfn>
       7. <dialog>
       8. <dir>
       9. <div>
       10. <dl>
       11. <dt>
    5. E
       1. <em>
       2. <embed>
    6. F
       1. <fieldset>
       2. <figcaption>
       3. <figure>
       4. <font>
       5. <footer>
       6. <form>
       7. <frame>
       8. <frameset>
    7. G H
       1. <h1>
       2. <h2>
       3. <h3>
       4. <h4>
       5. <h5>
       6. <h6>
       7. <head>
       8. <header>
       9. <hgroup>
       10. <hr>
       11. <html>
    8. I
       1. <i>
       2. <iframe>
       3. <img>
       4. <input>
       5. <ins>
       6. <isindex>
    9. J K
       1. <kbd>
       2. <keygen>
    10. L
        1. <label>
        2. <legend>
        3. <li>
        4. <link>
        5. <listing>
    11. M
        1. <main>
        2. <map>
        3. <mark>
        4. <marquee>
        5. <menu>
        6. <menuitem>
        7. <meta>
        8. <meter>
    12. N
        1. <nav>
        2. <nobr>
        3. <noframes>
        4. <noscript>
    13. O
        1. <object>
        2. <ol>
        3. <optgroup>
        4. <option>
        5. <output>
    14. P
        1. <p>
        2. <param>
        3. <picture>
        4. <plaintext>
        5. <pre>
        6. <progress>
    15. Q
        1. <q>
    16. R
        1. <rp>
        2. <rt>
        3. <rtc>
        4. <ruby>
    17. S
        1. <s>
        2. <samp>
        3. <script>
        4. <section>
        5. <select>
        6. <shadow>
        7. <slot>
        8. <small>
        9. <source>
        10. <spacer>
        11. <span>
        12. <strike>
        13. <strong>
        14. <style>
        15. <sub>
        16. <summary>
        17. <sup>
    18. T
        1. <table>
        2. <tbody>
        3. <td>
        4. <template>
        5. <textarea>
        6. <tfoot>
        7. <th>
        8. <thead>
        9. <time>
        10. <title>
        11. <tr>
        12. <track>
        13. <tt>
    19. U
        1. <u>
        2. <ul>
    20. V
        1. <var>
        2. <video>
    21. W
        1. <wbr>
    22. X Y Z
        1. <xmp>