Native form constraints

Describe a form’s input rules

Lesson 15 of 20 · 12 min · Module 5: Interfaces people can operate

A form can communicate basic input requirements before any JavaScript runs. Labels and native constraints work together to make expectations clearer.

Start this lesson →

Free. No installation: you write and run the code in your browser, and it is checked automatically.

By the end, you’ll be able to…

Express basic input constraints in HTML
Keep labels visible and connected

The idea

Attributes such as required, type, min, and max describe browser-side constraints. They improve input feedback, but a real server still needs to validate any data it receives.

<label for="minutes">Study minutes</label>
<input id="minutes" name="minutes" type="number" min="5" max="120" required>

01Give a field both identity and a data name

id connects the label to the control. name identifies the value during a real form submission. They play different roles even when their text matches.

02Make the allowed values explicit

The minimum and maximum establish an interval. With a minimum of five and a step of five, the permitted increments are 5, 10, 15, and so on.

03Understand the boundary

Browser validation is useful feedback, but clients can bypass it. A production endpoint must independently validate incoming data. This sandbox blocks submission entirely.

Your turn

Create form.enrollment with connected visible labels for email and minutes. Use an email input with id/name email and required. Use a number input with id/name minutes, min 5, max 120, step 5, and required. Add a submit button named Save my plan. This preview does not send a real form.

What the checks look for

Email input has its name, type, and required constraint
Email has a connected visible label
Minutes has the required numeric constraints
Minutes has a connected label
Submit action is clearly named

Try it in the editor →

Take this with you

Use native constraints to describe expectations close to the control.

Go a little further

Add helper text with an id and connect it to the minutes input using aria-describedby.