-
Hajipur, Bihar, 844101
Hajipur, Bihar, 844101
HTML5 Basics
HTML Introduction
HTML Editors
HTML Basic
HTML Elements
HTML Attributes
HTML Headings
HTML Paragraphs
HTML Styles
HTML Formatting
HTML Quotations
HTML Comments
HTML Styling and Design
HTML Links and Media
HTML Layout and Structure
HTML Tables
HTML Lists
HTML Block & Inline
HTML Div
HTML Classes
HTML Id
HTML Head
HTML Layout
HTML Responsive
HTML Computercode
HTML Semantics
HTML Forms
HTML Forms
HTML Form Attributes
HTML Form Elements
HTML Input Types
HTML Input Attributes
Input Form Attributes
HTML Graphics
HTML APIs
HTML Advanced Topics
HTML input attributes define the behavior, restrictions, and presentation of <input>
fields. These attributes enhance user experience, improve accessibility, and help in form validation.
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 |
<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>
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.
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.
HTML5 Basics
HTML Introduction
HTML Editors
HTML Basic
HTML Elements
HTML Attributes
HTML Headings
HTML Paragraphs
HTML Styles
HTML Formatting
HTML Quotations
HTML Comments
HTML Styling and Design
HTML Links and Media
HTML Layout and Structure
HTML Tables
HTML Lists
HTML Block & Inline
HTML Div
HTML Classes
HTML Id
HTML Head
HTML Layout
HTML Responsive
HTML Computercode
HTML Semantics
HTML Forms
HTML Forms
HTML Form Attributes
HTML Form Elements
HTML Input Types
HTML Input Attributes
Input Form Attributes
HTML Graphics
HTML APIs
HTML Advanced Topics