How To Link Submit Button To Another Page In HTML
Last Updated : Jul 1, 2023
In this tutorial we will show you the solution of how to link submit button to another page in HTML, sometimes we face a problem in which we are unable to link a button to another webpage. Generally as we know, a website is a collection of webpages and webpages are linked together with the help of HTML links.
The links may be of many types, but today we will discuss about linking of webpages with the help of submit button.
As, we want to say that by clicking on submit button user/you are redirected to another webpage.
Step By Step Guide On How To Link Submit Button To Another Page In HTML :-
As here, in this article we learn about how to create submit button that links to another webpage.
In result, we found that submit button is displayed on a webpage and after clicking on this button we are redirected to another webpage or in simple language by clicking on this button another webpage is opened.
A general use of button tag as a link to another webpage with the help of codes is given here...
<!DOCTYPE html> <html> <head> <title> Title of the document<title> </head> <body> <form action="/action_page.html" method="post"> <label for=""> Enter your login id </label> <input type="text" name="" id=""> <br><br> <label for=""> Enter your password </label> <input type="password" name="" id=""> <br><br> <button type="submit"> Submit two </button> </form> <br><br><br><br> <form action="/action_page.html" method="post"> <label for=""> Enter your login id </label> <input type="text" name="" id=""> <br><br> <label for=""> Enter your password </label> <input type="password" name="" id=""> <br><br> <button type="submit" formaction="/action_page2.html"> Submit one </button> </form> </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.
- Thirdly, <body> tag is used to define the webpage body. All the contents to show on website are written here.
- Here, as you see in codes that we create two form tags. Both are same, but with slightly difference. Also, both will work same with some difference which we discuss here.
- In first, we create a form and give it value of action. Inside this we create two input tags and then a submit button.
- As from browser screen, after information filled when you click on submit button. The webpage named action_page1.html gets opened.
- After this we create another form with same as above. But with a difference in submit button.
- The difference is that in button there is an attribute named formaction is used with a value. As you see on browser, when you click on this submit button, you are redirected to action_page2.html not on action_page1.html.
- Because with the help of formaction attribute we override the action of form. Hence, it is another way to link a page with the help of submit button.
- At last, the <body> and <html> tags are closed with </body> and </html> respectively.
At last, here we found that two methods are given in this article to link submit button to another page in html. I hope this tutorial on how to link submit button to another page in HTML helps you.