Skip to main content
WPFSharp Academy
Syllabus
On this page

HTML Input Attributes (required, placeholder, pattern)

Badar KhalilUpdated September 27, 2026 2 min read
Share X Facebook LinkedIn WhatsApp

HTML Input Attributes (required, placeholder, pattern)

This HTML input attributes tutorial covers the attributes that shape how an input behaves and what data it will accept before a form can even be submitted — the foundation of built-in browser validation.

The required Attribute

Marks a field as mandatory. The browser blocks submission and shows a native error message if the field is empty.

Code
<input type="text" name="username" required>

The placeholder Attribute

Displays light gray hint text inside an empty input. Important: a placeholder is not a replacement for a <label> — it disappears once the user starts typing, which hurts usability and accessibility if used alone.

Code
<input type="text" name="username" placeholder="e.g. john_doe">

Regex-based pattern validation is a trending skill for frontend developers building custom sign-up flows without extra JavaScript libraries. The pattern attribute accepts a regular expression the value must match.

Code
<input type="text" name="zip" pattern="[0-9]{5}" title="Five digit zip code">

Other Key Attributes

  • minlength / maxlength — restrict the number of characters allowed
  • min / max — restrict numeric or date ranges (used with number, range, date types)
  • readonly — value visible but cannot be edited by the user
  • disabled — input is neither editable nor submitted with the form
  • autofocus — automatically focuses the input when the page loads
  • step — defines the increment for number/range inputs

Combining Attributes for Real-World Validation

Real signup forms typically combine several attributes together — for example, a password field might use required, minlength="8", and a pattern requiring at least one number and one letter.

Live Example

Try submitting the form below with an empty username or an invalid zip code to see native browser validation in action.

Try it Yourself HTML
Output

Press Run to execute.

Try it Yourself JAVASCRIPT
Output

Press Run to execute.

Exercise: Add Validation AttributesHTML

The input below needs validation. Add attributes so the field: is required, only accepts 8 to 20 characters, and only accepts letters and numbers (use a pattern with a regular expression).

Try it Yourself HTML
Output

Press Run to execute.

Show expected output 
<input type='text' id='username' name='username' required minlength='8' maxlength='20' pattern='[A-Za-z0-9]+'>

This is a self-check — compare your result with the expected output above.

Was this page helpful?