The <button> tag is used to create clickable buttons on the web page. The difference between these elements and buttons created with the <input> tag is that you can place the content (images or text) inside the <button>.
Use the <input> element to define a button within HTML form, as browsers display the content of the <button> tag differently. For example, the Internet Explorer displays the text between the <button> and </button> tags, while other browsers display the content defined with value attribute.
The <button> tag comes in pairs, the content is written between the opening (<button>) and the closing (</button>) tags.
<html> <head> <title>Title of the document</title> </head> <body> <h1>Here will be our button</h1> <button type="button">Click</button> </body> </html>
Using CSS styles
You can apply CSS styles to the <button> tag to change the appearance of the button, its size, color, text font, and so on.
<html> <head> <title>Title of the document</title> </head> <body> Ordinary button <button type="button">Add to the recycle bin</button> <hr /> Button with red text <button type="button" style="color: red;"><b>HTML Book </b></button> <hr /> Button with increased font size <button type="button" style="font: bold 14px Arial;">Download the book </button><br /> </body> </html>
The <button> tag doesn’t have required attributes, however, we recommend always use the type=”button” attribute, if the tag is used as an ordinary button.
|autofocus||autofocus||Specifies that the button should receive focus after loading the page.|
|disabled||disabled||Deactivates the button. (Used when the button should become active after performing some action.)|
|form||form_id||Specifies one or more forms the button belongs to. If the button has multiple forms, then their identifiers (form_id) must be separated by spaces.
Not supported in Internet Explorer.
|formaction||URL||Defines the address, where the form data will be sent after clicking on the button. (Used only for the buttons with the type="submit" attribute).|
|formenctype||Defines how the form-data should be encoded when a form is submitted. (Used only for type="submit").|
|application/x-www-form-||All symbols are encoded before a form is submitted (default value).|
|urlencoded||Symbols are not encoded.|
|multipart/form-data||Spaces are being replaced by the sign "+", but symbols aren’t encoded.|
|formmethod||Defines the method of the HTTP request, which will be used when a form is submitted (only for type="submit").|
|get||Passes the form data in the address bar ("name = value"), which are added to the URL of the page after the question mark and are separated by an ampersand (&). (http://example.ru/doc/?name=Ivan&password=vanya)|
|post||The browser communicates with the server and sends the data for processing.|
|formnovalidate||formnovalidate||Specifies that the form-data should not be validated on submission (only for type="submit").|
|formtarget||Specifies, where the response will be shown after the form is submitted (only for type="submit").|
|blank||Opens the response in a new window.|
|self||Opens the response in the current window.|
|parent||Opens the response in the parent frame.|
|top||Opens the response in the full width window.|
|name||name||Defines the button name.|
|type||Defines the button type.|
|reset||button, that clears the form from the input data|
|submit||button for sending form data.|
|value||text||Defines the button value.|