HTML Input Attributes


HTML input attributes define the behavior, restrictions, and presentation of <input> fields. These attributes enhance user experience, improve accessibility, and help in form validation.


🔹 Common HTML Input Attributes

Attribute Description
type Defines the input type (text, number, email, etc.)
name Sets the name (used during form submission)
value Sets the default/pre-filled value
placeholder Shows hint text in the input
required Makes the field mandatory before submission
readonly Prevents editing the field but keeps it visible
disabled Disables the field (uneditable and un-submittable)
maxlength Limits the number of characters
min / max Sets minimum and maximum value for number/date inputs
step Defines numeric interval steps
pattern Validates input using regular expressions
autofocus Automatically focuses on the input when the page loads
multiple Allows selecting multiple files or email addresses
checked Sets checkbox or radio button as pre-selected

💻 Example: Input Attributes in Use

<form>
  <input type="text" name="username" placeholder="Enter username" required maxlength="20"><br>
  <input type="email" name="email" value="test@example.com" readonly><br>
  <input type="number" name="age" min="18" max="60" step="2"><br>
  <input type="password" name="password" pattern=".{6,}" title="6 or more characters" required><br>
  <input type="file" name="files" multiple><br>
  <input type="submit">
</form>

🔹 Attribute Highlights

  • required: Ensures user cannot submit the form without filling the field.

  • placeholder: Hint text to show expected input format.

  • maxlength="10": Prevents user from entering more than 10 characters.

  • readonly vs disabled:

    • readonly: Shows field, but user can’t change it.

    • disabled: Field appears dimmed and is not submitted.


Practice Questions

Q1. Use required on a username and password field.

Q2. Create an email field that is readonly.

Q3. Add a placeholder text to a search box.

Q4. Limit a text field to 25 characters using maxlength.

Q5. Set a number input between 10 to 100 using min and max.

Q6. Use pattern="[A-Za-z]{3,}" to accept only alphabetic text (min 3 chars).

Q7. Add a file input that allows selecting multiple files.

Q8. Use autofocus on the first input in the form.

Q9. Create a checkbox that is pre-selected using checked.

Q10. Add a password field with pattern=".{8,}" and a title explaining the rule.


Go Back Top