Button Tag in HTML5


Input The <input> tag specifies an input field where the user can enter data. These attributes make it easier to create forms and set automatic validation.  An input field can be a text field, a checkbox, a password field, a radio button, a button, and more.

Input Button Tag

The button tag gives you a way to create simple input buttons with custom text. It is similar to the INPUT submit tag but is slightly more flexible. You can say a button tag creates a push button. It is a clickable button that can send a request using a GET or a POST and also performs a client-side action in JavaScript. The <button> tag is supported in all major browsers.
<button name="" type="" value="">HTML</button>


HTML tags can contain one or more attributes. Attributes are added to a tag to provide the browser with more information about how the tag should appear or behave. Attributes consist of a name and a value separated by an equals (=) sign, with the value surrounded by double-quotes.
New Attributes Introduced by HTML5
Attributes Value Description             
autofocus(New) autofocus Specifies that a buttonshould have focus when the page loads.
disabled disabled Specifies that a buttonshould be disabled.
form (New) form_name Specifies which form the buttonbelongs to
formaction (New) URL Specifies where to send the form-datawhen a form is submitted. Overrides the form's action attribute.
formenctypeNew application/x-www-form-urlencoded
Specifies how form-data should beencoded before sending it to a server. Overrides the form's enctype attribute.
formmethod (New) get
Specifies how to send form-data.Overrides the form's action attribute.
formnovalidate (New) formnovalidate If present indicates that the formshould not be validated when submitted. Overrides the form's validating attribute.
formtarget (New) _blank
Specifies where to open the actionURL. Overrides the form's target attribute.
name button_name Specifies a name for the button
type button
Specifies the type of button
value text Specifies an initial value for thebutton. The value can be changed by a script

Event Handler Content Attributes

Here are the standard HTML 5 event handler content attributes.
onabort onerror* onmousewheel
onblur* onfocus* onpause
oncanplay onformchange onplay
oncanplaythrough onforminput onplaying
onchange oninput onprogress
onclick oninvalid onratechange
oncontextmenu onkeydown onreadystatechange
ondblclick onkeypress onscroll
ondrag onkeyup onseeked
ondragend onload* onseeking
ondragenter onloadeddata onselect
ondragleave onloadedmetadata onshow
ondragover onloadstart onstalled
ondragstart onmousedown onsubmit
ondrop onmousemove onsuspend
ondurationchange onmouseout ontimeupdate
onemptied onmouseover onvolumechange
onended onmouseup onwaiting
Type attribute example of button Tag
This attribute specifies the type of button.
  1. <!doctype html><html ><head><title> Insert title of document. </title></head><body><p><b>Example of type attribute of  button tag in HTML5.</b></p><form><table style="width: 50%"></tr><tr><td>Name</td><td> </td><td><input name="Text4" type="text"></td></tr><tr><td>Address</td><td> </td><td><input name="Text2" type="text"></td></tr><tr><td>Age</td><td> </td><td><input name="Text5" type="text" style="width: 124px"></td></tr><tr><td><button type="submit" > Submit</button></td><td><button type="button" >Button</button></td><td><button type="reset" >Reset</button></td></tr></table></form></body></html>  
Internet explorer
Value attribute example of button Tag
The value attribute specifies an initial value for the button. The value can be changed by a script.
Create a html page.
  1. <!DOCTYPE HTML>  
  2. <html>  
  3.     <body>  
  4.         <form  action="HTMLPage1.htm" method="get">  
  5.             <div>  
  6.                 <button name="subject" type="submit" >SQLSERVER</button>  
  7.                 <button name="subject" type="submit" value="JavaScript">CSS</button>  
  8.             </div>  
  9.         </form>  
  10.     </body>  
  11. </html>  
Disable attribute example of button Tag
This attribute specifies that a button should be disabled.
  1. <!DOCTYPE HTML>  
  2. <html>  
  3.     <body>  
  4.         <button type="button" disabled="disabled">Disable Button!</button>  
  5.     </body>  
  6. </html>  
Internet explorer
Autofocus attribute example of button Tag
This attribute specifies that a button should have focus when the page loads.
  1. <!DOCTYPE HTML>  
  2. <html>  
  3.     <body>  
  4.         <button type="button" autofocus="autofocus">Button Autofocus!</button>  
  5.     </body>  
  6. </html>