Button is used to display a clickable button that can be used elsewhere in a form or document.

The button element is an inline double label. The style of the button varies from browser to browser and can be modified using CSS.

< button > button < / button >Copy the code

Tag attributes

autofocus

Specify the focus button for page loading. Multiple buttons specify autofocus and focus only the first button.

<button autofocus> </button>Copy the code

disabled

Disabled, users cannot interact with the button.

<button disabled> </button>Copy the code

form

New HTML5 attribute that specifies the ID of the associated form element. Whereas a button button needs to be inside a form element to associate a form, specifying a form attribute can associate a form anywhere in the document.

<form id="form" action="" method="post">
    <input type="text">
</form>
<button type="reset" form='form'>button</button>
Copy the code

formaction

Overrides the action property of the button associated form.

The submission address for the following form will be overwritten as http://www.jd.com.

<form method="get" action="http://www.baidu.com">
    <input type="text">
    <button type="submit" formaction="http://www.jd.com">button</button>
</form>
Copy the code

Different buttons set different formAction properties to submit data from the same form to different URLS.

<form method="get" id="form">
    <input type="text">
</form>
<button type="submit" formaction="http://www.baidu.com" form="form">baidu</button>
<button type="submit" formaction="http://www.qq.com" form="form">qq</button>
Copy the code

formenctype

If the method attribute of the form is POST and the button is of type Submit, it is used to specify the data encoding of the form.

Note that the FormencType on the button also overrides the encType property of the form form.

<form method="post" action="http://www.baidu.com">
    <input type="text">
    <button type="submit" formenctype="multipart/form-data">button</button>
</form>
Copy the code

Enctype actually affects the content-Type of the request header.

Enctype attribute values are of three types.

  • application/x-www-form-urlencoded: Default encoding mode
  • multipart/form-data: The form contains file upload controls to specify
  • text/plain: Used for debugging

Button formencType = name; button formencType = desc; button formencType = name; button formencType = name;

<form method="post" action="http://www.baidu.com">
    <input type="text" name="value">
    <input type="text" name="desc">
    <button type="submit" formenctype="">button</button>
</form>
Copy the code

Application/X-www-form-urlencoded is the default encoding for all types of forms. The special characters (Spaces) have been replaced with +, the names and values of data items are separated by =, and data items are separated by &.

Multipart /form-data is specified when the form contains a type=”file” control, which is more suitable for transferring binary data.

In text/plain, each data item is on a single line and no special characters are encoded. Note The implementation methods of different browsers are different, and are not recommended.

formmethod

Overrides the Method property of the button associated form. Options include GET and POST.

The request for the following form will be GET.

<form method="post" action="http://www.baidu.com">
    <input type="text">
    <button type="submit" formmethod="get">button</button>
</form>
Copy the code

formnovalidate

Specify the form form associated with a button without validating the data when the form is submitted.

You can enter only email as specified below.

<form method="post" action="http://www.baidu.com">
    <input type="email" name="email">
    <button type="submit">button</button>
</form>
Copy the code

When you click the button to submit the form data, it verifies that the data is in mailbox format.

Adding the FormNovalidate attribute turns off form validation.

<button type="submit"Formnovalidate > button < / button >Copy the code

formtarget

If the button associated with the form has a type attribute with a value of Submit, the formTarget indicates where the submitted form responds.

The formTarget attribute values are as follows.

  • _self: Responds to the current page
  • _blank: responds in a new window
  • _parent: responds in the parent frame page of the current page
  • _top: responds in the top-level frame page of the current page
<form method="post" action="http://www.baidu.com">
    <input type="text">
    <button type="submit" formtarget="_blank">button</button>
</form>
Copy the code

name

Specifies the name attribute of the button, whose name and value values will be submitted when clicked.

<form method="post" action="http://www.baidu.com">
    <input type="text" name="value">
    <button type="submit" name="button" value="value">button</button>
</form>
Copy the code

Enter the value in the input box and click the button.

Among thembuttonthenamewithvalueProperty values are committed.

value

Specifies the initial value of the button that will be submitted as the key value of the name property.

type

Specify the type of button, with the following optional values.

  • submit: This button submits form data to the server. Pay attention to the specifiedtypeThis is also true if the value is null or incorrectsubmittype
  • reset: Resets the form control to its initial value
  • button: Specifies a normal button
  • menu: Open a bymenuElement defines a menu. This property is not yet implemented in any browser
<button type="menu" menu="menu">Dropdown</button>
<menu id="menu">
    <menuitem>hello</menuitem>
    <menuitem>world</menuitem>
</menu>
Copy the code

compatibility

button.value

Get the value property on butoon as follows.

<button id="btn" value="hello button"> button < / button ><script>
    var btn = document.getElementById('btn')
    console.log(btn.value)
</script>
Copy the code

  IE8The following browser, which gets the value equivalent tobuttontheinnerText.

  IE8And above browsers,Chrome,Firefox,Opera, and its value isbuttonthevalueAttribute values.

The compatibility is also simple: getAttribute is used to obtain the value of the button element’s value attribute.

btn.getAttribute('value')
Copy the code

Form POST request parameters

A button associated with a form form whose type attribute value is Submit also has compatibility issues when clicking to submit form data.

If the form target is set to _self or _blank, the console will be closed, so the post request parameters cannot be viewed.

The client cannot view the parameters. Instead, print the request parameters from the server.

<form action="http://127.0.0.1:3000" method="post">
    <input type="text" name="input">
    <button name="reset" value="button">reset</button>
    <button type="submit" name="name" value="button">button</button>
</form>
Copy the code

Internet Explorer 8 or later, Chrome, and FireFox.

In IE8, you can see that all the buttons in the form are submitted. Instead of submitting the value of the button, the submitted value is the value equivalent to the innerText of the button.