Cyber Week

Save big!

All courses under $5 - for a limited time!

Code has been added to clipboard!

HTML button Tag

Reading time 2 min
Published Mar 21, 2019
Updated Sep 30, 2019

HTML button: Main Tips

  • The HTML <button> element creates a clickable button, which can be put anywhere in the web page.
  • Browsers present this button according to the host platform. However, the appearance of HTML buttons can be changed with CSS.
  • <button> HTML is easier to style than the <input> since it accepts not only text value.

Use and Purpose of button

Learning how to make a button in HTML begins by learning the use of <button> element.

This code reveals how to make buttons by using the <button> element:

Example
<button style="background-color: blue;" type="button">
I am a blue button! Click me!
</button>

JavaScript adds functions to HTML buttons:

Example
<button type="button" onclick="alert('Hi user!')">Press me!</button>

One of the simplest ways of creating HTML button link is to repeat the following code:

Example
<p>This button transfers you to another website!</p>
<a href="http://bitdegree.org" target="_blank">
	<button>Click me!</button>

Attributes for button

autofocus

It sets focus after a web document loads.

Example
<button type="button" autofocus>Hello World!</button>

disabled

It defines a disabled button.

Example
<button type="submit" disabled>Register</button>

form

It defines a form ID to which the button is associated.

Example
<form action="http://www.bitdegree.org/" method="GET" id="Search">
  Search Term: <input type="text" name="search_query">
</form>
<button type="submit" form="Search">Search</button>

formaction

It sets the location for submitting the form data.

Example
<form action="https://www.bitdegree.org/learn/html-button/#ltbuttongt" method="GET">
  Search Term: <input type="text" name="q">
  <button type="submit" formaction="https://www.google.com/search">Search</button>
</form>

formenctype

It sets the type of content applied to submit the form to the server.

Example
<form action="https://www.bitdegree.org/learn/best-code-editor/?example=27003" method="get">
  Select Image: <input type="file" name="uploaded_filename">
  <button type="submit" formenctype="multipart/form-data">Upload</button>
</form>

formmethod

It sets the type of HTTP method.

Example
<form action="search" method="GET">
  Search Term: <input type="text" name="search_query">
  <button type="submit" formmethod="get">Search</button>
</form>

formnovalidate

It sets no support for validation features.

Example
<form action="https://www.bitdegree.org/learn/best-code-editor/?example=27006" method="POST">
  Name: <input type="text" name="name">
  Email ID: <input type="text" name="email">
  <button type="submit" formnovalidate>Search</button>
</form>

formtarget

It sets the target location for the web server response.

Example
<form action="https://www.bitdegree.org/learn/html-button/#ltbuttongt" method="GET">
  Search Term: <input type="text" name="search_query">
  <button type="submit" formtarget="_blank">Search</button>
</form>

name

It defines the button name.

Example
<form action="search" method="GET">
  Search Term: <input type="text" name="search_query">
  <button type="submit" name="search">Search</button>
</form>

type

It defines the type of button.

Example
<form action="search" method="GET">
  Search Term: <input type="text" name="search_query">
  <button type="submit">Search</button>
</form>

value

It defines the value associated with the name submitted along with form data.

Example
<form action="search" method="GET">
  Search Term: <input type="text" name="search_query">
  <input type="submit" value="Search">
  <button type="submit" name="search" value="search_button">Search</button>
</form>

Browser support

Browser image
Chrome
All
Browser image
Edge
All
Browser image
Firefox
All
Browser image
IE
All
Browser image
Opera
All
Browser image
Safari
All

Mobile browser support

Browser image
Chrome
All
Browser image
Firefox
All
Browser image
Opera
All
Browser image
Safari
All