🚨 $100K in Sight: Follow Bitcoin’s Final Push Live! TRACK NOW

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>

DataCamp
Pros
  • Easy to use with a learn-by-doing approach
  • Offers quality content
  • Gamified in-browser coding experience
  • The price matches the quality
  • Suitable for learners ranging from beginner to advanced
Main Features
  • Free certificates of completion
  • Focused on data science skills
  • Flexible learning timetable
Udacity
Pros
  • Simplistic design (no unnecessary information)
  • High-quality courses (even the free ones)
  • Variety of features
Main Features
  • Nanodegree programs
  • Suitable for enterprises
  • Paid Certificates of completion
edX
Pros
  • A wide range of learning programs
  • University-level courses
  • Easy to navigate
  • Verified certificates
  • Free learning track available
Main Features
  • University-level courses
  • Suitable for enterprises
  • Verified certificates of completion

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