Html Button Link - How do i make html button with link
The HTML button tag is a clickable element which will do click actions. In this example we will see how to use Button on out web pages and how do we make a html button link to navigate to a new page.
We can use button in our web pages in two ways
- Button Tag
- Input Type
Button Tag
The html button can be defined as opening <button> tag and closing </button> tag
|
<form> |
 |
Input Type
We can use button by Input type elements and pass the the type as "button".
|
<form > |
Then what is the difference between input type and <button> tag.
The only difference is using button tag we can add child elements inside button where as input type button can't accept child elements.
How do we make a Button link Html?
To make button link in html we have different ways
- Using form and input type
- Using JavaScript function
Using form and input type
To make html button href we will ass button inside form and add link url to the form action
example
|
<form action="https://rrtutors.com/"> |
Here we created button as link by adding the type as submit and attached page url to the form action attribute.
When we tap on button, it will open the page.
Using JavaScript function
We can also make button as href link using javascript function.
|
<input type="button" onclick="location.href='https://rrtutors.com';" value="View Page" /> |
There is an other way to make button as link using bootstrap classes.
To use Bootstrap classes inside out page we need to add bootstrap css. To make a button as link we will use below code
|
<a class="btn btn-primary" href="">Link</a> |
So here anchor tag acts as button and will open new pages on tap on it.
 |
Example code to make button link in html using bootstrap classes
|
<html>
</body> </html> |
Here are the some of button attributes which will be useful while using the button inside our web pages.
| Attribute | Value | Description |
|---|---|---|
| autofocus | autofocus | specifies that when reading the page, this button receives an auto focus. |
| disabled | disabled | specifies that this button is disabled. |
| shape | form_id | specifies one or more buttons for forms. |
| formation | URL | specifies the URL to which the form information will be sent. |
| formmethod | get post |
specifies the form submission method. |
| name | name | specifies a name for the button. |
| type | button reset submit |
specifies a type for the button. |
| value | text | specifies an initial value for the button. |
Keywords: