HTML Forms: Input Types, Attributes, and Validations
HTML forms are essential for collecting user input. They include various input types, attributes, and built-in validations to ensure data integrity and usability.
Input Types:
Text Input
<input type="text">This input type is used for single-line text input, such as a username or a search query.
Password Input
<input type="password">The password input type hides the entered text, commonly used for sensitive information like passwords or PINs.
Email Input
<input type="email">The email input type validates user input as an email address, ensuring it follows the correct format.
Number Input
<input type="number">This input type restricts user input to numeric values only, useful for fields like age or quantity.
Date Input
<input type="date">Allows users to select a date from a calendar picker, commonly used for birth dates or event dates.
Checkbox
<input type="checkbox">Checkboxes allow users to make multiple selections from a list of options, such as selecting multiple interests.
Radio Button
<input type="radio">Radio buttons allow users to make a single selection from a list of options, commonly used in forms for selecting gender or preferences.
File Input
<input type="file">File input type allows users to upload files from their device, like images or documents.
Submit Button
<input type="submit">The submit button is used to submit form data to the server for processing.
Reset Button
<input type="reset">Attributes:
name
The name attribute identifies form elements when submitting data to the server.
<input type="text" name="username">placeholder
The placeholder attribute provides a hint or example value for input fields.
<input type="email" name="email" placeholder="example@example.com">required
The required attribute makes input fields mandatory, ensuring they must be filled out before submitting the form.
<input type="text" name="fullname" required>min and max
The min and max attributes specify minimum and maximum values for number inputs, defining a range of acceptable values.
<input type="number" name="age" min="18" max="100">pattern
The pattern attribute defines a regular expression pattern for validation, allowing custom validation of input values.
<input type="text" name="zipcode" pattern="[0-9]{5}">disabled
The disabled attribute disables input fields, preventing users from interacting with them.
<input type="text" name="city" disabled>readonly
The readonly attribute makes input fields read-only, allowing users to view but not modify the content.
<input type="text" name="country" value="USA" readonly>autocomplete
The autocomplete attribute controls browser autocomplete behavior for input fields, enabling or disabling autocomplete suggestions.
<input type="text" name="address" autocomplete="off">autofocus
The autofocus attribute sets focus on input fields when the page loads, improving user experience by automatically selecting the first input field.
<input type="text" name="username" autofocus>multiple
The multiple attribute allows multiple file selection in file inputs, enabling users to select multiple files for upload.
<input type="file" name="files" multiple>Validations:
Required Field Validation
Use the required attribute to make fields mandatory, ensuring they must be filled out before submitting the form.
<input type="text" name="fullname" required>Pattern Validation
Use the pattern attribute with a regular expression for custom format validation, allowing you to define specific patterns for input values.
<input type="text" name="zipcode" pattern="[0-9]{5}">Email Validation
Use type="email" input for built-in email validation, ensuring that the entered value is a valid email address.
<input type="email" name="email">Number Validation
Use type="number" input for numeric validation, allowing only numeric input values.
<input type="number" name="age">Min and Max Validation
Set min and max attributes for numeric range validation, specifying the minimum and maximum allowed values for number inputs.
<input type="number" name="age" min="18" max="100">Date Validation
Use type="date" input for built-in date validation, allowing users to select a date from a calendar picker.
<input type="date" name="birthdate">Custom Validation
JavaScript can be used for custom validations beyond HTML's built-in features, allowing for more complex validation logic.
<input type="text" name="customInput" oninput="validateInput(this)">