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>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>