Contents
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:
<button style="background-color: blue;" type="button">
I am a blue button! Click me!
</button>
JavaScript adds functions to HTML buttons:
<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:
<p>This button transfers you to another website!</p>
<a href="http://bitdegree.org" target="_blank">
<button>Click me!</button>

- 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
- Free certificates of completion
- Focused on data science skills
- Flexible learning timetable

- Simplistic design (no unnecessary information)
- High-quality courses (even the free ones)
- Variety of features
- Nanodegree programs
- Suitable for enterprises
- Paid Certificates of completion

- A wide range of learning programs
- University-level courses
- Easy to navigate
- Verified certificates
- Free learning track available
- University-level courses
- Suitable for enterprises
- Verified certificates of completion
Attributes for button
autofocus
It sets focus after a web document loads.
disabled
It defines a disabled button.
form
It defines a form ID to which the button is associated.
<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.
<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.
<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.
<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.
<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.
<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.
<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.
<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.
<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

Chrome

Edge

Firefox

IE

Opera

Safari
Mobile browser support

Chrome

Firefox

Opera
