HTML Input Attributes and Types Explained
Common Input Attributes
type
Description: Specifies the type of input control to display.
Common Values:
text: Single-line text input.password: Password input, hides the characters.email: Email input, validates email format.number: Numeric input with optional range.date: Date picker control.checkbox: Checkbox input for binary options.radio: Radio button for selecting one option from a set.file: File upload input.
<input type="text" name="username">
Explanation: The type attribute defines the kind of input control, such as text for a standard text field.
name
Description: Defines the name of the input control, which is used to reference the input when submitting the form.
<input type="text" name="email">
Explanation: The name attribute allows the form data to be identified when sent to the server.
value
Description: Specifies the default value of the input field.
<input type="text" name="username" value="JohnDoe">
Explanation: The value attribute sets the initial value of the input field.
placeholder
Description: Provides a hint to the user about what to enter in the input field.
<input type="text" name="search" placeholder="Search...">
Explanation: The placeholder attribute displays a short hint in the input field when it is empty.
required
Description: Indicates that the input field must be filled out before submitting the form.
<input type="text" name="email" required>
Explanation: The required attribute makes the input field mandatory.
min and max
Description: Define the minimum and maximum values for numeric and date inputs.
<input type="number" name="age" min="18" max="99">
Explanation: The min and max attributes set boundaries for acceptable values.
Input Types
<input type="text">
Description: Creates a single-line text input field.
<input type="text" name="username" placeholder="Enter your username">
<input type="password">
Description: Creates a password input field where characters are hidden.
<input type="password" name="password" placeholder="Enter your password">
<input type="email">
Description: Creates an email input field that validates the email format.
<input type="email" name="email" placeholder="Enter your email">
<input type="number">
Description: Creates a numeric input field with optional range.
<input type="number" name="age" min="18" max="99">
<input type="date">
Description: Creates a date picker input field.
<input type="date" name="birthdate">
<input type="checkbox">
Description: Creates a checkbox input for binary options.
<input type="checkbox" name="subscribe" value="newsletter"> Subscribe to newsletter
<input type="radio">
Description: Creates a radio button for selecting one option from a set.
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
<input type="file">
Description: Creates a file upload input.
<input type="file" name="resume">