An HTML form is used to collect user input and send it to a server for processing.

<form action="forms/processing.php" method="post">
    <label for="first_name">First name:</label>
    <input type="text" id="first_name" name="first_name">

    <label for="last_name">Last name:</label>
    <input type="text" id="last_name" name="last_name">

    <label for="email">Email:</label>
    <input type="email" id="email" name="email">

    <input type="submit" value="Submit">
</form>

This is what it looks like without any styling.

First name:
Last name:
Email:

The first part of the form is the <form> tag itself, which has an action attribute. The action attribute is usually a PHP document which has the code to process or store the information. The method attribute tells the browser how to send the form content (usually either POST or GET).

GET:

• Appends the form data to the URL, in name/value pairs
• The submitted form data is NOT SECURE as it is visible in the URL
• The length of a URL is limited to 2048 characters
• Useful for form submissions where a user wants to bookmark the result and return to it later (like product searches with filters)

POST:

• Appends the form data inside the body of the HTTP request (the form data is not shown in the URL) which makes it more secure
• POST has no size limitations and can be used to send large amounts of data
• Form submissions with POST cannot be bookmarked as the data is hidden from the URL bar

<form action="forms/processing.php" method="post">

</form>

Inside the form are several sets of labels and corresponding input fields. The label uses a “for” attribute to specify which input it belongs to (the input has a matching #id).

In the example below we have two text inputs to collect the user’s first and then last name. The third input is an email type to collect the user’s email address.

<label for="first_name">First name:</label>
<input type="text" id="first_name" name="first_name">

<label for="last_name">Last name:</label>
<input type="text" id="last_name" name="last_name">

<label for="email">Email:</label>
<input type="email" id="email" name="email">

Finally, we have the submit button (another input type) that, when clicked, will send the contents of the form to the PHP document (form action) for processing and often storage in a database. The value is the button text.

<input type="submit" value="Submit">

The following attributes can be used within the <form> tag.

The following attributes can be used within the <input> tags.

---