Forms & Validation

Form Elements

100

Which element is used to group related form controls together?

<fieldset>

200

Which element provides a caption for a fieldset?

<legend>

300

Which element provides an autocomplete options list to an <input>?

<datalist>

400

Which element represents a scalar measurement like a score or skill level?

<meter>

500

Which element is used to display the result of a calculation in a form?

<output>

Input Types

100

Best input type for an email address

type="email"

200

Best input type for picking a date from a calendar.

type="date"

300

Best input type for a password field.

type="password"

400

Best input type for picking a color value.

type="color"

500

Best input type for entering a whole number like “age”.

type="number"

Validation Attributes

100

Attribute that makes sure a field cannot be left blank.

required

200

Attribute that sets the minimum value for a number input.

min

300

Attribute that sets the maximum allowed length of text.

maxlength

400

Attribute that uses a regex to check the format of input.

pattern

500

Attribute that shows example text inside an input before the user types.

placeholder

Patterns & Logic

100

In regex, \d represents what?

A digit (0–9)

200

Pattern \d{5} matches what?

Exactly 5 digits

300

Why would you use pattern even if you already have type="email"?

To enforce a stricter or custom format

400

If a field must start with a letter, would you use HTML alone or regex?

Regex / pattern attribute

500

Why should you not rely only on client-side validation?

It can be bypassed; server-side validation is also needed for security.

Fix My Form

100

<input type="text" required="false">

Why is this wrong?

required is boolean; you either include it or not. required="false" still means required.

200

<input type="email" required>

What kind of validation does the browser provide automatically?

Checks for a basic email format like name@domain

300

<input type="number" min="18" max>

What’s wrong?

max is missing a value.

400

<input list="colors">

but you forgot something. What element is missing?

<datalist id="colors">...</datalist>

500

<form>

  <input id="age" type="text" min="18">

</form>

Why doesn’t min="18" work here?

min only works with numeric/date input types, not type="text".