Submit and reset buttons

Hello, students! In this lesson, we will learn about submit and reset buttons.

Forms are used to collect information from the user.

Submit and reset buttons are used to control the behavior of the form.

Topics

• What are submit and reset buttons?
• The submit button
• The reset button
• Code examples

What are submit and reset buttons?

Submit and reset buttons are HTML elements used to control the behavior of the form.

The submit button is used to send the form information to the server.

The reset button is used to clear the form information.

The submit button

The submit button has the type attribute set to submit.

The submit button can also have a value attribute that specifies the text displayed on the button.

Here is an example of code to use the submit button:

<form action="submit.php">
  <input type="text" name="name" placeholder="Name">
  <input type="submit" value="Submit">
</form>

This code will create a form with a name input field and a submit button.

When the user clicks the submit button, the information from the name input field will be sent to the submit.php file.

The reset button

The reset button has the type attribute set to reset.

The reset button can also have a value attribute that specifies the text displayed on the button.

Here is an example of code to use the reset button:

<form action="submit.php">
  <input type="text" name="name" placeholder="Name">
  <input type="reset" value="Clear">
</form>

This code will create a form with a name input field and a reset button.

When the user clicks the reset button, the information from the name input field will be cleared.

Code examples

Here are some code examples to use the submit and reset buttons:

<form action="submit.php">
  <input type="text" name="name" placeholder="Name">
  <input type="submit" value="Submit">
</form>

<form action="submit.php">
  <input type="text" name="name" placeholder="Name">
  <input type="reset" value="Clear">
</form>

<form action="submit.php">
  <input type="text" name="name" placeholder="Name">
  <input type="submit" value="Submit">
  <input type="reset" value="Clear">
</form>

Exercises

• Create a form with a name input field and a submit button.
• Save the document and open it in a browser.

Observe how the browser displays the form.

Try clicking the submit button.

What happens?

Good luck!

Conclusion

Submit and reset buttons are important tools for controlling the behavior of the form.

Understanding how to use submit and reset buttons is essential for creating effective forms.

Ready to learn more?

In the next topic, we will learn about form validation.