Forms and inputs
Collect information with labelled, validated and accessible form controls.
What you will be able to do
- Connect labels to inputs
- Use the right input type
- Add built-in validation
Forms are where users do things: sign in, search, enrol, pay. Every control needs a label, and every label should be connected to its field.
<form action="/register" method="post">
<label for="name">Full name</label>
<input id="name" name="name" type="text" autocomplete="name" required>
<label for="email">Email address</label>
<input id="email" name="email" type="email" autocomplete="email" required>
<label for="track">Preferred track</label>
<select id="track" name="track">
<option value="web">Web development</option>
<option value="python">Python</option>
</select>
<button type="submit">Create account</button>
</form>| Input type | Best for |
|---|---|
| Email addresses — validates format and opens the right keyboard. | |
| password | Masked secret entry. |
| number | Numeric values with min, max and step. |
| date | A calendar picker and a standard value format. |
| search | Search fields, with a clear affordance in some browsers. |
Your turn
MediumAdd an email field
Add a labelled email input to the form, make it required and give it a helpful autocomplete value.
HTML · starter
<form>
<label for="name">Name</label>
<input id="name" type="text">
<!-- add email here -->
</form>Check your understanding before moving on.
Knowledge checkQuestion 1
Which attribute connects a <label> to an <input>?
Select an answer to continue
Study tools
Make it yours.
Keep a private note for this lesson, then turn the key ideas into flashcards you can revisit.
Sign in to save notes and flashcards.Both are private to your account and stay with your progress.
Sign inFinished reading?
Lock in what you just learned.
0%
Mark this lesson complete to save your place and move one step closer to the certificate.