If ever you have ever opened the webpage and submitted information, then you can understand the requirement of the buttons.
Buttons are an essential part of websites. We use the buttons for many purposes like information submission, linking to different parts of the web page, or other websites.
Using the HTML you can add buttons to your webpage with help of an HTML button tag. So if these questions are coming to your mind like, How do I create a working button in HTML? How do I make a click button in HTML? What is a button tag in HTML? How do I link a button in HTML?.
Well, you have come to the right place. In this tutorial, we will clear your all doubts and we will show you how to add buttons to a website with the HTML Button Tag. So first let’s understand what is HTML button tag is.
HTML Button Tag:
The <button> tag in HTML is used to define the clickable button. It is one of the simplest ways to add buttons to your websites. Any text coming between the opening tag (<button>) and closing tags(</button>) will appear as text on the button.
Like below example, A clickable button is marked up as follows:
<button type="button"> Read more to add button</button>
It will like the below button but nothing will happen if you pressed this button.
Explanation of the above Examples
➤ The <button> tag defines a clickable button.
➤ text between the button tags will appear of the button like “Click me!” on the above example.
Note -1: Always specify the type attribute for an <button> element, to tell browsers what type of button it is.
Note-2: You can also use the tags like <i>, <b>, <strong>, <br>, <img>, etc with text.
HTML Button Calling JavaScript Function:
By default, no action takes place when a button is clicked. Actions must be added to buttons using JavaScript or by associating the button with a form. Code example,
<button type="button" onclick="welcome()">Click me!</button>
<script>
function welcome(){
alert("Thanks for reading Aticleworld!");
}
</script>
How to add Buttons to your Websites with an Anchor Tag:
You can also add buttons to your websites with the anchor tag. Adding basic CSS property to the button in the method to make the button look better. The advantage of this is approach is that you can link to a page without any JavaScript.
<!DOCTYPE html>
<html>
<head>
<!-- Style to create button -->
<style>
.ATIC_BUTTON {
background-color: yellow;
border: .5px solid crimson;
border-radius: 10px;
color: blue;
padding: 5px 10px;
text-align: center;
display: inline-block;
font-size: 20px;
margin: 10px 30px;
cursor: pointer;
}
</style>
</head>
<body>
<!-- Adding button inside the link tag -->
<a href='Your Link'>
<button class="ATIC_BUTTON">
Click Here
</button>
</a>
</body>
</html>
HTML Button Example: Submit Form
Let’s see an HTML example code to submit a form on button click.
<form> Your Name:<input type="text" name="name"/><br/> <button>Submit Name</button> </form>
HTML Attributes:
The <button> tag supports all global attributes and some specific additional attributes. The following table has a list of HTML button tag attributes.
| Attribute | Value | Description |
|---|---|---|
| autofocus | autofocus | It specifies that a button should automatically get focus when the page loads |
| disabled | disabled | It specifies that a button should be disabled |
| form | form_id | It specifies which form the button belongs to |
| formaction | URL | It specifies where to send the form-data when a form is submitted. Only for type=”submit” |
| formenctype | application/x-www-form-urlencoded multipart/form-data text/plain |
It specifies how form-data should be encoded before sending it to a server. Only for type=”submit” |
| formmethod | get post |
It specifies how to send the form-data (which HTTP method to use). Only for type=”submit” |
| formnovalidate | formnovalidate | It specifies that the form-data should not be validated on submission. Only for type=”submit” |
| formtarget | _blank _self _parent _top framename |
It specifies where to display the response after submitting the form. Only for type=”submit” |
| name | name | It specifies a name for the button |
| type | button reset submit |
It specifies the type of button |
| value | text | It specifies an initial value for the button |