The HTML5 <button> tag is used for creating a rich button control that may
contain arbitrary content to enlarge or increase. This is form button. You can
say button tag creates a push button. It is a clickable button, when can send
request to using GET or POST and also perform a client side action in
JavaScript. You can put inside 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 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 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 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 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 use 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 define a name for the button. |
| type | button
reset
submit | This attribute specifies type for the button. |
| value | text | This attribute defines the value that is sent to the server when the button is clicked. |
Code:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<button type="button">
Click Here</button>
<br />
<br />
<br />
<button type="button" onclick="location.href='http://www.c-sharpcorner.com/UploadFile/7b0949/8105/'">
<img src="Image/HTML5.jpg" alt="HTML5" /></button><br />
<br />
<button onclick="JavaScript:alert('You
will love this article!')">
Click Here
</button>
<br />
<br />
<button type="button" onclick="location.href='HTMLPage2.htm'">
Move to HTML page 2</button>
<br />
<br />
<button name="Csharpcorner" type="button" onclick="location.href='http://www.c-sharpcorner.com/">
Click here to visit C-SharpCorner</button>
<br />
<br />
<button type="button" autofocus="autofocus">
AutoFocus on this button</button>
</body>
</html>
OutputInternet Explorer
Chrome
Fire Fox
Safari
When you click on image you will move to
second html page (Htmlpage2.htm).
When you click on fifth button "
Csharpcorner button" you will move to Csharpcorner site.
When you click on third button "click here". You will get a message box that is
created using JavaScript.
