How to toggle button and submit form at the same time?-HTML Tutorial-php.cn

How to toggle button and submit form at the same time?

WBOY

Release： 2023-08-31 16:13:03

forward

624 people have browsed it

How to toggle button and submit 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 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>

Copy after login

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>

Copy after login

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>

Copy after login

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!