Forms Introduction

What is a Form?

So far, all the HTML we have learned has been a one-way street: the server sends data to the browser, and the user reads it.

HTML Forms make the web interactive. They allow the user to send data back to the server.

Every time you log in to a website, search for a product, post a comment, or send a message, you are using an HTML form!

How to Create a Form in HTML

One of the most foundational skills in web development is learning how to create a form in HTML. To create a form, we use the <form> tag. This tag acts as a container for all the input fields (like text boxes and buttons) that the user will interact with.

<form>
  <!-- Input fields go here -->
</form>

By itself, the <form> tag is invisible on the screen. It is simply a structural wrapper that tells the browser, “All the input fields inside me belong together.”

How Forms Work

Conceptually, a form works like mailing a physical letter:

1. The Envelope (The <form> tag): Holds everything together and has an address telling the post office where to send it.
2. The Letter (The inputs): The actual information the user types in (like their name and password).
3. The Mailbox (The submit button): The action that finalizes the process and sends the data away.

Form Action and Method

The <form> tag uses two critical attributes to know where and how to send data: action and method.

• action: This is the URL (the “mailing address”) where the data should be sent.
• method: This tells the browser how to send the data. The most common methods are GET (for retrieving data, like a search bar) and POST (for sending sensitive data, like a login or registration).

<!-- Sends data securely to the /login URL -->
<form action="/login" method="post">
  <!-- Inputs go here -->
</form>

Key Takeaways

• Forms are used to collect user input and send it to a server.
• The <form> tag is an invisible container for input elements.
• The action attribute dictates where the data is sent.
• The method attribute (like POST or GET) dictates how the data is sent.