• Hajipur, Bihar, 844101

☰
❮
❯

HTML

HTML5 Basics

HTML Styling and Design

HTML Links and Media

HTML Layout and Structure

HTML Forms

HTML Graphics

HTML APIs

HTML Advanced Topics

HTML Input Attributes

← Previous Next →

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.

HTML Input Attributes Quiz

Q1: What does the required attribute do?

A. Adds a default value
B. Makes the field optional
C. Makes the field mandatory
D. Auto-submits the form

Q2: Which attribute shows hint text inside a field?

A. title
B. value
C. placeholder
D. label

Q3: What is the use of readonly?

A. Prevents input from being submitted
B. Makes the field editable
C. Displays value without editing
D. Hides the field

Q4: How to restrict number input from 1 to 10?

A. range="1-10"
B. min="1" max="10"
C. step="1"
D. length="1-10"

Q5: Which attribute allows multiple file selection?

A. multiple="true"
B. multiple
C. multi
D. files

Q6: What is the difference between disabled and readonly?

A. Disabled fields are submitted
B. Readonly fields are not shown
C. Disabled fields can’t be submitted
D. Both behave the same

Q7: Which attribute sets the maximum allowed characters?

A. maxlength
B. length
C. limit
D. maxtext

Q8: Which attribute applies regex validation?

A. pattern
B. regex
C. format
D. validate

Q9: Which attribute focuses an input when the page loads?

A. focus
B. active
C. autofocus
D. default

Q10: What does checked do in checkboxes or radio buttons?

A. Enables editing
B. Checks if field is valid
C. Pre-selects the option
D. Prevents changes
← Previous Next →
Login
Go Back Top