Stop 02 · HTML5Topics · 2/12

Forms

In short

Login, signup, search, checkout, feedback. Almost every useful thing a user does on a website goes through a form, so getting forms right is daily work.

The `<form>` element and its children collect user input and submit it to a server — the backbone of logins, search bars and checkouts. A well-designed form also needs labels, sensible field names, validation, keyboard accessibility, error messaging, and a clear submission lifecycle.

The jaadu mascot hands a filled reservation slip through a railway ticket counter window.

Think of it like this

The railway reservation slip

Every box on the slip has a clear label: name, age, train number. You fill it and hand it to the counter. An HTML form is the same slip: labelled inputs, and a submit button that hands it to the server.

Watch it happen

What Submit actually sends

You

Browser

Server

clicks Create account

1/5You fill name, email and year, then press the submit button.

The big ideas

What you need to know

action and method

action is where the data goes. method is how: GET puts it in the URL, POST sends it in the request body.

name is the key

Only inputs with a name attribute get sent. The name becomes the key, what the user typed becomes the value.

Every input needs a label

Link them with for and id. Clicking the label focuses the input, and screen readers read it out.

Buttons submit by default

A <button> inside a form submits it. Add type="button" when it should do something else.

See it in code

Walk through the code

html

1<form action="/signup" method="post">2  <label for="name">Full name</label>3  <input id="name" name="name" type="text" required />4 5  <label for="email">Email</label>6  <input id="email" name="email" type="email" required />7 8  <fieldset>9    <legend>Year</legend>10    <label><input type="radio" name="year" value="1" /> 1st</label>11    <label><input type="radio" name="year" value="2" /> 2nd</label>12  </fieldset>13 14  <button type="submit">Create account</button>15</form>

1/4action says where the data goes, method="post" says it travels in the request body.

Radios share one name so only one can be picked. <fieldset> and <legend> group them under a question.

Save yourself the pain

Common mistakes

Oops

Using placeholder text instead of a label.

Do this instead

Placeholders vanish when you type and screen readers may skip them. Always add a visible <label>.

Oops

Sending a password form with method="get".

Do this instead

GET puts the password in the URL and browser history. Use POST for anything private.

Your mission

Build a fest registration form

~25 min

Quick check

An input shows on the page and the user fills it, but its value never reaches the server. What's the most likely reason?

Go deeper

1Build a signup form using labels, fieldsets and proper form structure. Keep the first version small, then add one improvement after the core behavior works.
2Learn the difference between GET and POST form submission. Focus on understanding the underlying reason it works, not only memorizing the definition.
3Practice handling form submission with JavaScript's `preventDefault()`.