Reader Level:
Articles

Working With Button Tag in HTML5

By Valon Ademi on July 18, 2011
This is a rich button tag that is used to create a push button. It is a clickable button.
  • 0
  • 0
  • 40608
Download Files:
 

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 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 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:


button tag in html5

Output

Internet Explorer

Button-in-HTML.gif

Chrome

button-in-HTML5.gif

Fire Fox

Button-tag.gif

Safari

 button-tag-in-html5.gif

When you click on image you will move to second html page (Htmlpage2.htm).

HTML5.gif

When you click on fifth button " Csharpcorner button" you will move to Csharpcorner site.

csharpcorner.gif

When you click on third button "click here". You will get a message box that is created using JavaScript.

Button-element-in-html-5.gif

COMMENT USING

Trending up