- Trending Categories
- Data Structure
- Operating System
- MS Excel
- C Programming
- Social Studies
- Fashion Studies
- Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to Toggle the Buttons and Submit A Form At The Same Time?
Every HTML form has an action attribute that interacts with the server-side. When a form is submitted, the HTML action Attribute is used to designate where the form's data should be transmitted to the server. Every button will take us to the same place because the action attribute stores the destination of our data.
A clickable button is defined by the <button>tag. You can insert text (as well as tags like <i> <b>, <strong>, <br>, and <img>, etc.) inside a <button> element. With a button made with the <input> element, that is not feasible.
Following is the syntax for HTML <button>.
<form action="#" method="post"> <button type="submit">click</button> </form>
For getting better understanding on how to toggle the buttons and submit a form at the same time.
In the following example we are creating a form which submits the form and toggle the button at the same time.
<!DOCTYPE html> <html> <body> <form action="https://www.tutorialspoint.com/index.htm" method="post"> Username:<br> <input type="text" name="username"> <br> Password:<br> <input type="password" name="password"> <br><br> <button type="submit" formaction="https://www.tutorialspoint.com/index.htm"> Signin </button> </form> </body> </html>
When the script gets executed, it will generate an output consisting of a form consisting of input fields along with a click button on the webpage. When the user clicks the button, the form is submitted and a new page is displayed.
Consider the following example, where we are creating a form, making the toggle button, and submitting the form at the same time.
<!DOCTYPE html> <html> <body style="background-color:#D5F5E3 ;"> <form action="https://www.tutorialspoint.com/index.htm" method="post"> <label for="courses">Choose Courses:</label> <select name="courses" id="courses"> <option value="HTML">HTML</option> <option value="Java">Java</option> <option value="Python">Python</option> <option value="CSS">CSS</option> </select> <br><br> <input type="submit" value="Submit"> </form> </body> </html>
On running the above script, the output window will pop up, displaying the drop-down list along with a submit button. When the user clicks the submit button, the form gets submitted and opens a new page at the same time.
Kickstart Your Career
Get certified by completing the courseGet Started