HTML Forms: The Basic Structure

Learn to build the essential structure for collecting user data with the <form>, <label>, and <input> tags.

📝

Welcome! Let's build our first HTML form to collect user data, step by step.

/* Let's begin... */

The <form> Tag: The Container

The <form> tag is the essential container for all form elements. It wraps around your labels, inputs, and buttons, and its attributes (like action and method) define where and how the collected data is sent to a server.

The <label> Tag: Accessibility and Usability

A <label> provides a caption for a form element. It's crucial for accessibility, as screen readers announce the label when the user focuses on the input. By using the for attribute to link it to an input's id, you also make the label clickable, improving user experience.

The <input> Tag: The Workhorse

The <input> tag is the most versatile form element. Its behavior changes dramatically based on its type attribute. It can be a text field (type="text"), a password field (type="password"), a checkbox (type="checkbox"), or a submit button (type="submit"), among many others.

Practice Zone

Interactive Test 1: Assemble the Form

Drag the pieces to construct a valid HTML form.

Arrastra en el orden correspondiente.

Arrastra las opciones:

</form>

<form

type="text"

for="name"

type="submit"

Completa el código:

______action='/submit'>

______

Unlock with Premium

Interactive Test 2: Fill the Attributes

Rellena los huecos en cada casilla.

<form action="/submit">
  < for="email">Email:</>
  <input type="email" id="email" ="user_email">
  <input ="submit" value="Subscribe">
</form>

Unlock with Premium

Practice Example: Code Editor

Create a complete registration form with a text input for a username and a submit button. Use the correct tags and attributes.

* Write the code below. Correct characters will be shown in green and incorrect ones in red.

<form action="/register" method="post">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username">

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

Unlock with Premium

Knowledge Check

How do you link a <label> to an <input> for better accessibility?

Unlock with Premium

How Form Data Travels

Once a user clicks "Submit," the data begins its journey. The <form> tag's attributes, action and method, control this process.

1. The `action` Attribute: The Destination

The action attribute specifies the URL where the form data should be sent. This is typically a server-side script (like a PHP, Python, or Node.js file) that will process the information.

<form action="/api/register">

2. The `method` Attribute: GET vs. POST

The method attribute defines the HTTP method to use. The two most common are:

GET: Appends the form data to the URL in name/value pairs. Good for search forms, but insecure for sensitive data as it's visible in the URL and browser history.
POST: Sends the form data in the body of the HTTP request. It's more secure and is used for submitting sensitive information like passwords or personal details.


<form action="/login" method="post">


<form action="/search" method="get">

3. The `name` Attribute: The Key

For an input's data to be sent, it must have a name attribute. The server uses this name as the key to retrieve the value the user entered. Without it, the data from that field is ignored.


<input type="email" name="user_email" value="user@example.com">

Practical Takeaway: Think of it like mailing a letter. The action is the address, the method is the type of mail service (public postcard vs. sealed envelope), and the name attribute on each input is the label for each piece of information inside.

HTML Forms Glossary

<form>: The container element for a web form.
<label>: Represents a caption for an item in a user interface.
<input>: An interactive control to accept data from the user. Its type is defined by the `type` attribute.
action: (Attribute) Specifies the URL where the form's data is sent for processing when submitted.
method: (Attribute) Defines the HTTP method (`GET` or `POST`) to be used when submitting the form data.
name: (Attribute) Provides a name for the input field. This name is submitted along with the input's value.
for: (Attribute for `<label>`) Specifies which form element a label is bound to, matching the `id` of that element.
id: (Attribute) A unique identifier for an element, often used by `<label>` tags and JavaScript.