You are currently viewing How to Add HTML Button Onclick Link
  • Post category:HTML

How to Add HTML Button Onclick Link

HTML Button Onclick Link

Introduction:

  The key to creating a website is the HTML language, and a button is an important tag in that language. You can create a button by opening tag is <button> and closing tag is </button>. Lets set up html button onclick link in two categories. One is <input> tag method and other one is <button> tag method. Using the type attribute in the input tag and give it a value called button. And we can give a lot of attribute to this tag but in this we’ll see about only buttons. You can see more about the button in this article

Types of HTML Buttons

  We use our buttons in four different categories that you can create in HTML normally. First is submit button, the purpose of creating submit html button onclick link is if user clicks on the submit button we know that information filled in form is going to be submitted or sent to the server of processing page. The default text of a submit button is ‘submit query’. Second is reset button and it is used to reset the form back to its normal state.

Third is image button to create an image button we are going to use the same input tag and type we are going to mention is image instead of reset or submit we write image. Image button is exactly same as the submit button the purpose of creating the image button is to submit the form to processing page. But the difference is instead of displaying a button user can display an image according to his requirement. You can use any other attribute that you have learned in image tag. You can set also the border of image button.

READ ALSO  What Does src Stand for in HTML?

And final one is normal button, it is not going to used as a submit button. It is just used to execute some function in a Javascript code to create a normal button we use same input tag. Then we use type attribute value for the type attribute is just button for our slash greater. Normal button is used as I told it is used to execute functions in Javascript or you can say event handlers in Javascript.

HTML Button Onclick Link

Syntax: 
<html>
<head>
<title>Button Onclick</title>
</head>
<body >
/*Button Method*/
<button onclick="window.location.href='https://wonderdevelop.com';">Click Here</button>

/*Input Method*/
<input type="button" value="click" onclick="window.location.href='https://wonderdevelop.com';"name="star">

/*Anchor Tag Method*/
<a href="https://www.google.com"><button>Click here</button></a>
</body>
</html>

  html button onclick link is one of the most important attribute on the button and this attribute that can be linked to other websites. The same can be done with the input tag. There are three methods to create link in button onclick. They are Button method , Input method and Anchor tag method

Button method:

  First type the html basic syntax and then type name for your website or custom in the title section. Create a button tag in between the body section. Enter the name of the button between the opening button tag and the <button> closing button tag </button>.Then create html button onclick link attribute in button tag and type the value of window.location.href=”Your URL”. Save these code and see in your browser the button will appear in left top and click here, the button will goes to your entered URL.

Input method:

 Create input an tag and this tag has no closing tag. Add ‘type’ attribute on input tag and assign the value “button”. Create ‘name’ attribute on input tag and type your button name. The onclick link is asusal of button method syntax. This is very useful to create many button in same time.

READ ALSO  How to Change HTML Table Row Background Color

Anchor tag method:

  You can set up as a hyperlink when you click on the button to do so just around your button element with a pair of <a> tags and onclick attribute. You will set the “href” attribute of the opening button tag to a URL or relative file path of choosing. Anchor tag is a one the most important tag in HTML and it is used for linking to another webpages. Create a normal anchor tag in HTML these tag inside allows all other tag , so we can create anchor tag inside the button tag. Type your URL in ‘href’ attribute of the anchor tag.

Conclusion:

In this article I will tell about html button onclick link method. In this types of methods is very useful for learning or creating button to linking other webpages or websites.

Leave a Reply