HTML Button Onclick Redirect
Last Updated : Mar 11, 2024
IN - HTML jQuery | Written & Updated By - Riya
In this tutorial we will show you the solution of HTML button onclick redirect and today we will learn about how we are able to make a button in html in which when we click on button it redirects us to another webpage.
We hope that you know how to make a button in html if you don’t know then you must visit to our page in which we talk about how to make a button in html.
Step By Step Guide On HTML Button Onclick Redirect :-
Now, here we will show you an html code in which we make a button.
And help you to that how we can applies redirect option on it. Mainly there are many ways. Now, let us understand them one by one.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>home page</title>
<script src="js/jquery.js"></script>
</head>
<body>
<div class="main">
<div class="inner">
<form action="demo.html" method="post">
<input type="submit" value="Submit">
</form>
<button type="submit" id="click">
Click here
</button>
</div>
</div>
<script>
$('document').ready(function () {
$('#click').click(function() {
window.location.href='demo.html';
});
});
</script>
</body>
</html>
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As above now <head> tag is used to contain information about web page. In this tag a <title> tag is used which helps us to specify a webpage title.
- Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
- Here, we create a body tag which is a paired tag. All the content that is showed on webpage in written here.
- Here, in body we create a div that is main and under this one more div named as inner. Inside this we create two buttons, first one is created with the help of form tag and other is create with the help of button tag. Now, let us understand them one by one.
- In first case, where form tag is used. Inside form we use action attribute and its value is the page where we want to redirect. Inside form a button with the help of input type submit is created.
- And when user click on that button form comes in action and user redirected to webpage specified in action attribute.
- In second case, we create a button with the help of button tag and id click. Here, we use jQuery codes. So, before this you must have to include jQuery file inside head tag.
- Here, we apply jQuery on button, the code is as $('#click').click(function() {window.location.href='demo.html';});
- Here, when we click on any tag having id click, script comes in action. And user gets redirected to the page specified under window.location.href this is inbuilt function of jQuery you have to give name of webpage after = sign.
- At last, the <body> and <html> tags are closed with </body> and </html> respectively.
Conclusion :-
In conclusion, here we can say that with the help of this article we are able to create a button in html that redirects on click. I hope this tutorial on HTML button onclick redirect helps you
About Riya
