Improve forms with validation patterns
Use fieldset, legend and native constraints to guide form input.
- Group related controls with fieldset and legend
- Apply required and pattern constraints
- Give users clear label text
Large forms become easier to scan when related controls are grouped. Use <fieldset> and <legend> to name a group, then keep visible labels for each control. Native validation attributes can provide useful guidance without custom JavaScript.
1<form>
2 <fieldset>
3 <legend>Contact details</legend>
4 <label for="phone">Phone</label>
5 <input id="phone" name="phone" pattern="[0-9]{10}" required>
6 </fieldset>
7 <button type="submit">Send</button>
8</form>Contact details Phone Send
Use required for mandatory fields. Use pattern when there is a strict format (for example ten digits). Error messaging and localization can be improved later, but semantic grouping and labels should come first.
Key takeaways
Group related controls with fieldset and legend.
Keep labels visible for each input.
Use native validation attributes for clear constraints.
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.
Group volunteer form fields
Create a form with a fieldset titled Volunteer contact, labels Phone and Email, and a submit button Join. Use required on both inputs and pattern [0-9]{10} on the phone input.
- Volunteer 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…