Form Basics
Today we build a tiny form: the form tag, a label paired with a text input, and a submit button that sends the name field.
- 1
What a form is
Last lesson we filled the document head. Today people type into the page. A form is the sheet that collects answers and sends them somewhere.
The outer tag is
<form>. Inside it we place a<label>, a text<input>, and a submit<button>. That is the whole first form lesson. - 2
Beyond Static Pages: Gathering and Transmitting User Data
Static pages only show content; they cannot accept an account registration, collect user feedback, or place an e-commerce order.
HTML solves this with the
<form>envelope. Inside,<label>provides clear accessible context,<input>captures user data, and<button type="submit">dispatches the payload to a backend server. - 3
How the Browser Packages and Submits Form Payloads
When a user clicks a submit button, the browser scans the form for every control with a
nameattribute. It creates key-value pairs (likeusername=alex).The browser then dispatches this payload to the destination specified in
actionusing the HTTP verb specified inmethod(eitherGETin the URL query string orPOSTin the request body). - 4
Hands-On: Connecting Inputs, Accessible Labels, and Submit Buttons
Read the interactive form below. Notice how clicking the label text focuses the input box automatically due to matching
forandidattributes. - 5
Core Principles: Explicit Names and Strict Label Binding
Match
forandidexactly. Give every answer field aname. Usetype="submit"on the button that should send the form.
Appends form fields visibly to the URL. Ideal for search bars and filter queries where results can be bookmarked and shared. Never use for passwords.
Transmits data privately inside the HTTP request body. Essential for logins, sensitive credentials, payments, and uploading files.
What you'll learn
- 1A form collects and sends answers
- 2label asks the question
- 3text input is the blank to fill
- 4name is the key that gets submitted
- 5submit button sends the form
Line by line
<form action="#" method="post">Starts the form.
actionis where data goes.method="post"sends it in the request body.<label for="name">Name</label>The visible question.
for="name"links to the input whoseidisname.<input id="name" name="name" type="text">The blank.
idpairs with the label.nameis submitted.type="text"is a normal text field.<button type="submit">Submit</button>Sends the form. Without
type="submit", a button may not submit by default in every case — be explicit.
Try it yourself
Build a form with one labelled text field for city and a Submit button. Connect for and id, and set name="city" on the input.
Hint: Wrap everything in <form>. Match for/id. Give the input a name.
Common mistakes
- 1.Inputs without a real
<label>. A placeholder is not a label — it disappears when you type. - 2.Forgetting
nameon the input. That field will not be sent with the form.
Interview prep
Q: Why is pairing <label for="..."> with an input id essential?↓
It associates the descriptive label with the input field programmatically. Screen readers announce the label when the field is focused, and clicking the label text focuses or checks the input, drastically expanding the clickable touch target.
Q: What happens if an <input> is missing the name attribute?↓
The browser ignores it during submission. The field's value will not be packaged into the HTTP request payload and the backend server will receive nothing for that control.
Q: When should you choose POST over GET?↓
Use POST whenever submitting sensitive credentials (passwords, payment cards), submitting large data payloads, or performing actions that modify server state (creating accounts, placing orders). Use GET for idempotent read-only search filters.