Introduction
The HTML5 <button> tag is used for creating a rich button control that may contain arbitrary content to enlarge or increase. This is a form button. 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. Inside it you can put a button tag image or text and you can also apply JavaScript.
HTML5 has new element-specific attributes: autofocus, form , formaction, fromenctype, formmethod, formnovalidate, formtarget, name, type, and value.
Syntax
<button
accesskey="key"
class="class name(s)"
dir="ltr | rtl"
disabled="disabled"
id="unique alphanumeric identifier"
lang="language code"
name="button name"
style="style information"
tabindex="number"
title="advisory text"
type="button | reset | submit"
value="button value">
</button>
Attributes Introduced by HTML5
| Attributes |
Values |
| autofocus |
autofocus |
| contenteditable |
true | false | inherit |
| contextmenu |
id of menu |
| data-X |
user-defined data |
| draggable |
true | false | auto |
| enctype |
mimetype |
| form |
id of a related form element |
| formaction |
URL of form action |
| formenctype |
MIME-type of form encoding |
| formmethod |
GET | POST | PUT | DELETE |
| formnovalidate |
true | false |
| formtarget |
name of the target frame, region or window |
| hidden |
hidden |
| itemid |
microdata id in URL format |
| itemprop |
microdata value |
| itemref |
space-separated list of IDs that may contain microdata |
| itemscope |
itemscope |
| itemtype |
microdata type in URL format |
| spellcheck |
true | false |
| tabindex |
number |
| type |
add | remove | move-down | move-up |
| HTML5 Event Attributes |
| onabort |
onblur |
oncanplay |
oncanplaythrough |
| onchange |
onclick |
oncontextmenu |
ondblclick |
| ondrag |
ondragend |
ondragenter |
ondragleave |
| ondragover |
ondragstart |
ondrop |
ondurationchange |
| onemptied |
onended |
onerror |
onfocus |
| onformchange |
onforminput |
oninput |
oninvalid |
| onkeydown |
onkeypress |
onkeyup |
onload |
| onloadeddata |
onloadedmetadata |
onloadstart |
onmousedown |
| onmousemove |
onmouseout |
onmouseover |
onmouseup |
| onmousewheel |
onpause |
onplay |
onplaying |
| onprogress |
onratechange |
onreadystatechange |
onscroll |
| onseeked |
onseeking |
onselect |
onshow |
| onstalled |
onsubmit |
onsuspend |
ontimeupdate |
| onvolumechange |
onwaiting |
|
|
HTML5 has new element specific-attributes
| Attributes |
Values |
Description |
| autofocus |
autofocus |
This attribute automatically gives focus to the button when the page loads. Possible values are [Empty string] or autofocus. |
| form |
form_name |
This attribute specifies form Id to which this button belongs to. |
| formaction |
URL |
This attribute specifies a URL to target when the button is clicked.
Note: Used with type="submit" |
| formenctype |
1. application/x-www-form-urlencoded
2. multipart/form-data
3. text/plain |
This attribute encoded data before sending it to a server
Default value: application/x-www-form-urlencoded
Note: Used with type="submit" |
| formmethod |
get
post
put
delete |
This attribute specifies the HTTP method to use when information should be transferred to the server.
Note: Used with type="submit" |
| formnovalidate |
formnovalidate |
This Boolean attribute is used to specifies that a form should not be validated during submission. Overrides the form's novalidate attribute.
Note: Used with type="submit" |
| formtarget |
_blank
_self
_parent
_top
framename |
This attribute used to set the name of a window or frame where to open the action URL. Overrides the forms' target attribute.
Note: Used with type="submit" |
| name |
button_name |
This attribute defines a name for the button. |
| type |
button
reset
submit |
This attribute specifies a type for the button. |
| value |
text |
This attribute defines the value that is sent to the server when the button is clicked. |
Code:
Output
Internet Explorer
Chrome
FireFox
Safari
When you click on image you will move to the second HTML page (Htmlpage2.htm).
When you click on the fifth button " Csharpcorner button" you will move to the Csharpcorner site.
When you click on the third button "click here". You will get a message box that is created using JavaScript.