Basic Forms

The form tag

Everything a user fills out and submits goes inside a <form> tag.

Label and input

<input> creates a field for the user to type into. <label> gives that field a visible name. Connect them using for on the label and a matching id on the input.

What does it mean?

• id="username" on the input matches for="username" on the label — this links them together, so clicking the label focuses the input.
• name="username" is what identifies this field when the form is submitted.
• type="text" makes it a plain text field. Other common types: email, password, number.

Placeholder

placeholder shows a light hint inside the field before the user types anything.

More field types

Not everything is a single-line <input>. A few other common fields:

What does it mean?

• <textarea> is for longer, multi-line text — unlike <input>, it has an opening and closing tag, and whatever’s typed goes between them.
• type="checkbox" gives a box the user can tick on or off, useful for yes/no choices.

Radio buttons

Checkboxes let the user pick any number of options. Radio buttons let them pick only one.

Dropdown menus

<select> creates a dropdown list. Each choice goes inside an <option>.

Required fields

Add required to a field and the browser will not submit the form until it is filled in.

Submit button

<button type="submit"> submits the form when clicked.

Putting it together

A form usually has more than one field, and a button to submit it. Here’s a simple sign-up form using everything above.

Try it yourself

Add another field for phone number, with its own label, id, name, and placeholder.