Code has been added to clipboard!

HTML button Tag

<button>

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="http://www.bitdegree.org/" 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="upload" method="POST">
  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="register" method="POST">
  Name: <input type="text" name="name">
  Email ID: <input type="text" name="email" required>
  <button type="submit" formnovalidate>Search</button>
</form>

formtarget

It sets the target location for the web server response.

Example
<form action="http://www.bitdegree.org/" 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>