HTML Forms 101

How do websites get information from you?

When you log in to Instagram, search on Google, or buy something on Amazon, you are using a Form. Forms are the primary way users interact with web applications.

1. The Basic Structure

Every form starts with the <form> tag. Inside it, we place elements that allow users to enter data.

Basic Form Demo

HTML

<form>
  <!-- A simple text box -->
  <input type="text" placeholder="Type something here...">
  
  <!-- A button to submit -->
  <button>Send!</button>
</form>

Preview

2. Input Types

The <input> tag is magical. By changing its type attribute, it transforms into different controls.

Type	Description
`text`	Standard one-line text box (default).
`password`	Hides the characters (dots or asterisks).
`email`	Validates that text looks like an email on mobile keyboards.
`number`	Only allows numeric input.

Try Different Input Types

HTML

<form>
  <p>Username: <input type="text"></p>
  <p>Password: <input type="password"></p>
  <p>Age: <input type="number"></p>
  <p>Color: <input type="color"></p>
  <button>Sign Up</button>
</form>

Preview

3. Labels (Don't Forget Them!)

Imagine a form with 10 empty boxes and no text telling you what goes where. Nightmare, right? The <label> tag tells the user what an input is for.

Pro Tip: Use the for attribute on the label and match it to the id of the input. This lets you click the text to focus the input!

Connecting Labels to Inputs

HTML

<form>
  <!-- Click the word "Email" in the preview -->
  <label for="user-email">Email Address:</label>
  <br>
  <input type="email" id="user-email" placeholder="you@example.com">
</form>

Preview

4. Guided Challenge: Space Club Signup

Mission: Create a registration form for the "Mars Explorer Club". It needs:

A text input for "Astronaut Name"
A number input for "Mission Count"
A password input for "Access Code"
A submit button that says "Launch!"

Mission Control Editor

HTML

<!-- Build your form here -->
<form>
  
  
</form>

Preview

Great job! Ready to make sure users type the right stuff?

Next: Learn Form Validation →