Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
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.
HTML Buttons
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.
Syntax
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.
Example
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.
Example
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.
636 Views
