SyntaxShelf

Min max

2 snippets in HTML & CSS

HCHTML & CSS

Form Validation Attributes

HC · Forms
Syntax
required | minlength="n" | maxlength="n" | pattern="regex" | min="n" | max="n"
Example
<input type="text" name="zipcode" required pattern="[0-9]{5}" title="Five digit zip code">

<input type="password" name="password" required minlength="8" maxlength="128">

<input type="number" name="age" min="18" max="120">

Note Built-in validation runs on form submission and is bypassed by adding formnovalidate to the submit button or novalidate to the form. The title attribute provides a hint message shown when the pattern fails.

Clamp Function

HC · Responsive Design
Syntax
clamp(minimum, preferred, maximum)
Example
.container {
  width: clamp(320px, 90%, 1200px);
  padding: clamp(16px, 4vw, 48px);
}

h1 {
  font-size: clamp(1.5rem, 2.5vw + 1rem, 3.5rem);
}

Note clamp() eliminates the need for many media queries. It sets a preferred value that flexes between a minimum and maximum. The preferred value usually includes a viewport unit so it scales fluidly. Ideal for typography and spacing.

Frequently asked questions

How does HTML & CSS handle min max?
HTML & CSS covers this with 2 copy-ready snippets on this page. The "Form Validation Attributes" snippet in HTML & CSS uses `required | minlength="n" | maxlength="n" | pattern="regex" | min="n" | max="n"`.
Which code does the HTML & CSS example use?
The "Form Validation Attributes" snippet uses `required | minlength="n" | maxlength="n" | pattern="regex" | min="n" | max="n"`, from the Forms section of the HTML & CSS cheat sheet.
What other HTML & CSS snippets are shown for "min max"?
Besides "Form Validation Attributes", this page also shows "Clamp Function".
Is there anything to watch out for?
Yes. For "Form Validation Attributes": Built-in validation runs on form submission and is bypassed by adding formnovalidate to the submit button or novalidate to the form. The title attribute provides a hint message shown when the pattern fails.

Browse all tasks by intent