How HTML Forms Work

HTML forms are used to collect user input on a website. Forms can contain various types of input fields such as text fields, checkboxes, radio buttons, and submit buttons. When a user fills out a form and submits it, the data is sent to the server for processing. This tutorial will teach you how to create a basic form in HTML.

Creating a Form

To create a form in HTML, you need to use the <form> tag. The <form> tag contains all the input fields and buttons that make up the form. Here's an example of a basic form:

<form>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name"><br>
  
  <label for="email">Email:</label>
  <input type="email" id="email" name="email"><br>
  
  <input type="submit" value="Submit">
</form>

In this form, we have input fields for the user's name and email address, as well as a submit button. When the user submits the form, the data will be sent to the server specified in the action attribute of the <form> tag.

Handling Form Data

Once the form is submitted, the data is typically processed by a server-side script (such as PHP or Node.js). The server-side script can access the form data using the $_POST or $_GET superglobals, depending on the HTTP method used to submit the form.

Here's an example of a PHP script that processes the form data from the previous example:

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
  $name = $_POST["name"];
  $email = $_POST["email"];
  
  echo "Name: " . $name . "<br>";
  echo "Email: " . $email;
}
?>

Conclusion

HTML forms are an essential part of web development, allowing users to interact with websites and submit data. By following this tutorial, you should now have a basic understanding of how HTML forms work and how to create and process form data.