Forms

A form collects input and sends it somewhere. Each field has a name the server receives, a label people see, and a button that submits.

Hone is a place to practise programming. This is one of its lessons, written out in full and free to read without an account.

What it is for

Sign-up, search, checkout: every site's money and every user's frustration lives in forms. A labelled, named field is the difference between a form that works for everyone and one that does not.

How to think about it

For each field: an input with a name and an id, a label whose for matches that id, and the right type. Then one button.

Worked example

<form action="/signup" method="post">

Where it sends, and how: post for anything that changes something.

<label for="email">Email</label>

The label names the field; for points at the input's id, so clicking the word focuses the box.

<input id="email" name="email" type="email" required>

name is the key the server receives; type checks the shape; required blocks an empty send.

<button>Sign up</button>

A button inside a form submits it: its default type is submit.

</form>

Close the form.

Your turn

Name the field so the server receives it.

<input id="city" ="city" type="text">

The trap

A field with no name. It looks fine, it accepts typing, and it is silently left out of what the form sends.

Practise forms on HoneA question on it now, a coding challenge where there is one, and it is remembered for review. Free, no email needed.