Validation and Submission

Pattern Hint Input

Constraints Need Guidance

An access-code input combines a regex pattern with placeholder and helper text so users can see the required format.

Program

Pattern constraints are powerful but invisible unless the page gives readers clear examples and helper text.

pattern_hint_input.html
Visuals: captured from real browser rendering
<label for="code">Access code</label>
<input id="code" name="code" pattern="[A-Z]{3}-[0-9]{2}" minlength="6" placeholder="ABC-12">
<small id="code-hint">Format: ABC-12</small>

  1. Label the access code input.

    An Access code label appears.
    The label names the future input.

  2. Declare the code format pattern.

    An access-code input appears with a constraint state.
    The pattern attribute defines the accepted format.

  3. Require a six-character value.

    The input remains visible with length metadata.
    minlength adds a second browser constraint.

  4. Show an example in the field.

    The field shows ABC-12 as a placeholder example.
    Placeholder hints at the expected shape but does not replace helper text.

  5. Add visible helper text.

    A Format: ABC-12 helper note appears below the input.
    Visible text explains the constraint to every reader.
pattern The pattern attribute declares a regular expression that the value must match.
helper text Visible helper text explains a constraint that attributes alone cannot make obvious.