Working With Button Tag in HTML5

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.