Loading...

HTML Input Attributes

Beyond type, inputs accept attributes that describe rules and hints: required fields, placeholders, ranges, and more.

Direct answer

Common helpers: name, id, value, placeholder, required, min, max, step, maxlength, pattern, disabled, and readonly. Use them to guide users and enable basic browser checks — still verify important data on the server later.

📊 Handy input attributes

Attribute Role
placeholder Hint text inside an empty field
required Field must be filled before submit
min / max / step Limits for number/date-like types
maxlength Max characters for text-like types
pattern Regex-like allowed pattern
disabled Control not usable / not submitted
readonly Visible but not editable

Attributes on inputs

html
HTML Code 
<label for="age">Age</label>
<input id="age" name="age" type="number" min="1" max="120" required>

<label for="code">Code</label>
<input id="code" name="code" type="text" maxlength="6" placeholder="ABC123" pattern="[A-Za-z0-9]{6}">

Try it

  1. Make an email field required with a placeholder
  2. Add a number field with min and max
  3. Try submitting empty — observe the browser message
  4. Add maxlength on a short code field

Easy mistakes

  • Relying only on browser checks without server-side checks for real apps
  • disabled fields that users must submit (disabled values are not sent)
  • Over-complex pattern expressions that confuse beginners

Summary

  • Attributes refine input behavior
  • required, ranges, and maxlength are everyday tools
  • Placeholders are hints, not labels
  • Still label every visible field

🧠 Test Your Knowledge

Ready to Start

Test Your Knowledge

Challenge yourself with this interactive quiz and see how well you understand the topic

❓
5
Questions
🎯
70%
To Pass
♾️
∞
Time
🔄
∞
Attempts

📝 Instructions

  • Read each question carefully
  • Select the best answer for each question
  • You can retake the quiz as many times as you want
  • Your progress will be shown at the top
Topic 1 of 1
Html Tutorial