7.1 Text Field
HTML gives you a lot of input types for form elements, letting users enter data in different formats like text, email, dates, and so much more. Let's dive into various input types and how to use them.
The <input type="text"> element is used to enter single-line text. It's the most basic and commonly used input type.
Usage Example:
<label for="name">Name:</label>
<input type="text" id="name" name="name">
Attributes
maxlength: limits the max number of charactersplaceholder: a placeholder text that appears inside the input field until the user starts typingrequired: indicates the field is required to be filled out
Example with Attributes:
<label for="username">Username:</label>
<input type="text" id="username" name="username" maxlength="20" placeholder="Enter your username" required>
7.2 Number Fields
The <input type="number"> element is used for entering numeric values. It restricts input to numbers only and might include arrows for incrementing/decrementing the value.
Usage Example:
<label for="quantity">Quantity:</label>
<input type="number" id="quantity" name="quantity" min="1" max="10" step="1" value="1">
Attributes
min: sets the minimum allowed valuemax: sets the maximum allowed valuestep: defines the value increment stepvalue: sets the starting value
7.3 Email Fields
The <input type="email"> element is designed for entering email addresses. It checks if the input matches the email address format.
Usage Example:
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="example@example.com">
Attributes
multiple: allows entering multiple email addresses separated by commaspattern: sets a regex for additional input validation
Example with Attributes:
<label for="emails">Email addresses (comma-separated):</label>
<input type="email" id="emails" name="emails" multiple placeholder="example1@example.com, example2@example.com">
7.4 Phone Number Fields
The <input type="tel"> element is used for entering phone numbers. It doesn't validate the format of the number, but you can set an input mask using the pattern attribute.
Usage Example:
<label for="phone">Phone:</label>
<input type="tel" id="phone" name="phone" placeholder="+1 (XXX) XXX-XX-XX">
Attributes
pattern: sets a regex to validate the entered number format.
Example with Attributes:
<label for="phone">Phone:</label>
<input type="tel" id="phone" name="phone" pattern="[+][0-9]{1,3} [0-9]{1,4} [0-9]{3,4} [0-9]{4}" placeholder="+1 123 456 7890">
7.5 Date Fields
The <input type="date"> element is for entering dates. Supported browsers show a calendar widget for easy date selection.
Usage Example:
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday">
Attributes
min: sets the earliest allowed datemax: sets the latest allowed date
Example with Attributes:
<label for="appointment">Appointment Date:</label>
<input type="date" id="appointment" name="appointment" min="2023-01-01" max="2024-12-31">
7.6 Time Fields
The <input type="time"> element is used for entering time. Supported browsers show a time selection widget.
Usage Example:
<label for="meeting_time">Meeting Time:</label>
<input type="time" id="meeting_time" name="meeting_time">
Attributes
min: sets the earliest allowed timemax: sets the latest allowed timestep: defines the time increment step
Example with Attributes:
<label for="alarm">Alarm:</label>
<input type="time" id="alarm" name="alarm" min="06:00" max="22:00" step="300">
7.7 URL Fields
The <input type="url"> element is used for entering web addresses (URLs). It checks if the input matches the URL format.
Usage Example:
<label for="website">Website:</label>
<input type="url" id="website" name="website" placeholder="https://example.com">
Attributes
pattern: sets a regex for additional input validation.
Example with Attributes:
<label for="personal_website">Personal Website:</label>
<input type="url" id="personal_website" name="personal_website" pattern="https://.*" placeholder="https://example.com">
7.8 Password Fields
The <input type="password"> element is used for entering passwords. The entered data is hidden, replaced by symbols like asterisks or dots.
Usage Example:
<label for="password">Password:</label>
<input type="password" id="password" name="password">
Attributes
maxlength: limits the max number of charactersplaceholder: placeholder textrequired: indicates the field is required to be filled out
Example with Attributes:
<label for="new-password">New Password:</label>
<input type="password" id="new_password" name="new_password" maxlength="20" placeholder="Enter password" required>
7.9 Range Input Fields
The <input type="range"> element is for entering values within a specific range. It's displayed as a slider.
Usage Example:
<label for="volume">Volume:</label>
<input type="range" id="volume" name="volume">
Attributes
min: sets the minimum allowed valuemax: sets the maximum allowed valuestep: defines the value increment stepvalue: sets the starting value
Example with Attributes:
<label for="brightness">Brightness:</label>
<input type="range" id="brightness" name="brightness" min="0" max="100" step="1" value="75">
7.10 Color Picker Fields
The <input type="color"> element is used to pick a color. A color picker widget appears in supported browsers.
Usage Example:
<label for="favcolor">Choose your favorite color:</label>
<input type="color" id="favcolor" name="favcolor" value="#ff0000">
Attributes
value: sets the initial color.
7.11 Search Fields
The <input type="search"> element is used for search queries. Most browsers have built-in styles and functionality for clearing entered text.
Usage Example:
<label for="search">Search:</label>
<input type="search" id="search" name="search" placeholder="Enter your search query">
GO TO FULL VERSION