Home > Article > Web Front-end > How to toggle button and submit form at the same time?
How to toggle button and submit form at the same time?
- WBOYforward
- 2023-08-31 16:13:03581browse
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 specify where the form data should be transferred to the server. Each button takes us to the same place because the action attribute stores the destination of the data.
HTML button
Clickable buttons are defined by the
grammar
The following is the syntax of HTML
<form action="#" method="post"> <button type="submit">click</button> </form>
To better understand how to toggle the button and submit the form at the same time.
Example
In the example below, we will create a form that submits the form and toggles 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 executes, it will generate an output containing a form containing input fields and click buttons on the web page. When the user clicks the button, the form is submitted and a new page is displayed.
Example
Consider the following example where we will create a form, make a toggle button, and submit 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>
When running the above script, the output window will pop up, showing the drop-down list and submit button. When the user clicks the submit button, the form will be submitted and a new page will be opened at the same time.
The above is the detailed content of How to toggle button and submit form at the same time?. For more information, please follow other related articles on the PHP Chinese website!