Forms & User Input›Core· 45 min read

Form Basics

Forms are how websites collect information — logins, sign-ups, searches, checkouts. Where the web becomes interactive.

What you will learn

Build a form with <form>
Collect text with <input> and label it correctly
Add a submit button

How a form works, start to finish

Before the tags, here is the whole journey a form takes:

You wrap your fields in a <form> — the container that collects everything.
The visitor types into the fields (each field has a name).
They click a submit button.
The browser gathers every field as name=value pairs.
It sends that data to a back-end (a server program) for processing — for example to save a new account.
The server replies, and the browser shows the result page.

Note: Steps 5–6 need a back-end (PHP/Laravel or Node), which you learn later. In this lesson you build steps 1–4: the interface that collects the data.

The form container

Everything that collects input goes inside a <form> tag. Inside it, the workhorse is <input> — a single, self-closing field.

A minimal form: one field + a button

<form>
  <input type="text" name="username">
  <button type="submit">Sign Up</button>
</form>

Live preview

The <form> is the container. Inside it, <input type="text" name="username"> is a one-line text box, and name="username" is the label its value will be sent under. The <button type="submit"> is what the visitor clicks to send the form.

Note: Output: A single text box with a “Sign Up” button beside (or below) it.

Labels: never skip them

Every field needs a <label>. Connect them by giving the input an id and pointing the label’s for at that id. Bonus: clicking the label then focuses the field.

label "for" matches input "id"

<form>
  <label for="email">Email address</label>
  <input type="email" id="email" name="email">
  <button type="submit">Subscribe</button>
</form>

Live preview

The link is the matching pair: the input has id="email" and the label has for="email". Because they match, clicking the words “Email address” jumps focus into the box. Screen readers also read the label aloud when the field is focused, so the user knows what to type.

Watch out: The name attribute is essential. On submit, each field is sent as name=value. A field with no name is ignored — its data never arrives. Always add a name.

A complete sign-up form

<form>
  <label for="fullname">Full name</label><br>
  <input type="text" id="fullname" name="fullname" placeholder="Asha Rao"><br><br>

  <label for="mail">Email</label><br>
  <input type="email" id="mail" name="email" placeholder="you@email.com"><br><br>

  <label for="pass">Password</label><br>
  <input type="password" id="pass" name="password"><br><br>

  <button type="submit">Create account</button>
</form>

Live preview

This puts the whole pattern together: three labelled fields — a text name, an email, and a password (which shows dots instead of letters) — each paired with its label and each carrying a name so its value can be sent. The placeholder shows faint hint text, the <br> tags just stack the fields, and the submit button gathers it all.

Note: Output: A stacked sign-up form: Full name, Email and Password fields (the password masked as dots), with a “Create account” button at the bottom.

Note: Right now the form does not send data anywhere — that needs a back-end (PHP/Laravel or Node), which you will learn later. Today we build the interface that collects the data.

Q. Why must every input have a name attribute?

Answer: On submit, each field is sent as name=value. With no name attribute, the field’s data is not sent at all.

✍️ Practice

Build a login form with email, password and a submit button — each field with a proper <label>.
Add placeholder hints to each field.

🏠 Homework

Create a “Contact Us” form with name, email and a message field, plus a Send button.