Lessons · HTML and CSS · forms
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">
Write a page and watch it render
The trap
A field with no name. It looks fine, it accepts typing, and it is silently left out of what the form sends.