HTML Input Types
Subject: html
๐ HTML Input Types Overview
HTML <input>
elements support various types to handle different kinds of user input. Using the right input type improves form usability, accessibility, and data accuracy.
๐ก Common HTML Input Types
-
Text (
type="text"
)- Default input type.
- Accepts plain text.
- Example use: Name, username, general input.
-
Password (
type="password"
)- Hides typed characters using dots or asterisks.
- Used for login forms or sensitive input.
-
Email (
type="email"
)- Requires a valid email format.
- Shows email keyboard on mobile devices.
-
Number (
type="number"
)- Accepts numeric values only.
- Supports
min
,max
, andstep
attributes.
-
Date (
type="date"
)- Provides a calendar UI for picking dates.
- Ensures valid date format.
-
Checkbox (
type="checkbox"
)- Select one or multiple independent options.
-
Radio (
type="radio"
)- Select a single option from a group (same name).
-
File (
type="file"
)- Allows file upload.
- Use
multiple
to select more than one file. - Restrict formats with
accept=".pdf,.docx"
.
-
URL (
type="url"
)- Accepts only well-formed URLs.
- Good for website or blog links.
-
Tel (
type="tel"
)- Accepts phone numbers.
- Triggers numeric keypad on mobile.
-
Submit (
type="submit"
)- Submits the form to the server.
-
Reset (
type="reset"
)- Resets all fields to their initial values.
๐งช Example: Form with Multiple Input Types
โ Key Takeaway
- Use the correct
type
to enhance form usability and mobile optimization. - Input types trigger appropriate keyboards/UI on different devices.
- Built-in validation with types like
email
,url
,number
saves time. - Pair input types with attributes (
required
,min
,max
,accept
) for better data quality. - Improved UX and accessibility with minimal code.
Advertisement Slot 1
Advertisement Slot 2