Collect information with forms
Build a form with labels, useful input types and a submit button.
- Group controls in a form
- Connect labels and inputs
- Choose suitable input types
A <form> groups controls that collect information. Every input should have a label. Give an input a unique id, then set the label’s for attribute to the same value so the connection is clear to browsers and assistive technology.
1<form action="/signup" method="post">
2 <label for="email">Email address</label>
3 <input id="email" name="email" type="email" required>
4 <button type="submit">Join the list</button>
5</form>Email address Join the list
The name attribute identifies a value when a form is submitted. Use type="email" for an email address and type="password" for a password. Native attributes such as required give users helpful browser feedback without JavaScript.
Key takeaways
Put related controls inside a form.
Connect each label’s for value to a unique input id.
Choose a useful input type and name.
Lesson quiz
5 questions · pass with 4 correct · up to 50 XP
Passing this quiz completes the lesson and keeps your streak going. Questions you miss come back in review sessions later.
Practice: write HTML
Write the markup, preview it in a sandboxed browser frame, and check the visible text against the requirements.
Event signup form
Make a form with a visible Your name label, a text input with id and name name, a visible Email address label, an email input with id and name email, and a submit button that says Sign up.
- Signup form text
Your markup is previewed in a sandboxed frame. Run tests to check the visible page text.
Questions about this lesson
Stuck? Ask. Figured something out? Share it. Explaining is one of the best ways to learn.
Loading posts…