New input types in HTML5: email, url, date, range, color
HTML5 scripting language improves the usability of forms and form control validation in web pages and using these new form controls, HTML5 web page forms can be made advanced and fully automated. These new form input controls have been improved by introducing new form controls in the basic form controls to the HTML5 web developer as compared to the HTML4 version.
So, let’s get to know the new form controls in HTML5 better.
HTML5 Email Input Data Type.
In HTML5 web page form, email input data type is used to add or store user input email address field in the existing web page form. Here this email input data type validates the user entered email address where it checks the input email address syntax and proper validation.
HTML5 Email Input Data Type Attributes.
- Email validation attributes – This email attribute checks the user entered email address syntax and format in an existing HTML5 web page form. If the user entered form email address is in the proper syntax, and the entered email is a valid email address, then it stores the entered email address in the system.
- Email keyboard – The email keyboard attribute displays a digital keyboard to enable Internet users to enter email information on portable mobile devices while filling out online forms.
HTML5 Email Input Data Type Attributes example.
<label for=”youremail”> Your Email – </label>
<input type=”email” id=”email” name=”email” placeholder=”emailname@url.com” required>
HTML5 Email Input Data Attributes.
Email Pattern Attributes – Here you can use regular expressions to add a custom email address format to the input email address in the existing form.
Email validation example.
<input type=”email” id=”useremail” name=”useremail” pattern=”[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$” required>
HTML5 url input type.
The URL input type form field is used in HTML5 web page forms to check whether the Internet user can enter a URL website address in the form. It validates the URL input type address entered in the form by the form user whether the email address entered manually by the form user is in the proper syntax and is valid or not.
HTML5 url input type attributes.
- URL validation attributes – These attributes validate the URL domain address entered by the user in the current form whether the URL address entered manually by the form user is a valid and proper website syntax domain address.
- URL keyboard attributes – These attributes display a digital keyboard for the form user to enter the URL address in the portable cellphone device.
Example of HTML5 url input type.
<label for=”website”>Url Domain -</label>
<input type=”url” id=”websitedomain” name=”websitedomain” placeholder=”https://urlname.com” required>
HTML5 date input type.
Date input type in HTML5 web page form form input date selection is used for user dates selection dialog in existing form, it provides different date month year selection dialog window to user in form.
HTML5 date input type attributes.
- Date selector attributes – Date selector provides user interface dialog window for entering date in form in HTML5 web page.
- Date validation attributes – It validates the form date input field validity entered in existing form, where user entered or selected date is properly valid and in proper syntax order or not.
Example of HTML5 date input type.
<label for=”joindate”>joindate – </label>
<input type=”date” id=”joindate” name=”joindate” required>
Other date input attributes.
- Min and Max attributes – You can manually set the minimum and maximum date range for the date entered in the current form.
- Date value attributes – In HTML5 web page forms, the web developer fixes and displays a default date.
Date input range Example.
<input type=”date” id=”start-date” name=”start-date” min=”2025-01-01″ max=”2026-12-31″>
HTML5 Range input type.
Range input type form field in HTML5 web page is used to allow the form user to select a numeric range value in a numbers category. It provides a value range slider user interface to the form user.
HTML5 Range input type attributes.
- Range slider attributes – The form provides slider selection features with a user interface to let the user select the available values in the range.
- Range validation – This form validates the limitation of user entered form range values, where the form indicates the range of user selected values.
HTML5 Range input type attributes.
<label for=”rangelimit”>Range Limit – </label>
<input type=”range” id=”Range Limit” name=”Range Limit” min=”0″ max=”100″ value=”50″ step=”1″>
HTML5 Range input attributes.
- min and max attributes – Set the minimum and maximum numeric range limits in the current range.
- step attributes – Define the interval range values between the minimum and maximum range selections in the form.
- value attributes – Fixes the initial value for a slider for numeric ranges used in the form.
Example of an HTML5 form range.
<label for=”range”>Select range values - </label>
<input type=”range” id=”range” name=”range” min=”0″ max=”100″ value=”70″ oninput=”document.getElementById(‘rangeValue’).textContent = this.value”>
<span id=”rangeValue”>70</span>
HTML5 color input type.
The color input form field type is used in HTML5 web page design forms to select a color category in an existing form. Whereas the form color selection dialog provides the form user with a color selection window in a graphical user interface dialog for the color category selection.
HTML5 color input type attributes.
- Color picker attributes – Provides the form user with a color selection window in a graphical user interface dialog.
- Validation attributes – Sets a valid color code validation for the selected color type values in the form.
- value attributes – Previews the default color set value in the current form.
Example of HTML5 color input type.
<label for=”desirecolor”>Desire color – </label>
<input type=”color” id=”desirecolor” name=”desirecolor” value=”#ff0011″>
Details about HTML5 form new input controls and attributes.
Above you have added new dimensions and controls to the basic HTML form using the existing new form controls in HTML5.
- email input type – Validates and formats user entered email addresses in the existing HTML5 form.
- url input type – Validates and formats user entered URL web addresses in the existing HTML5 form.
- date input type – Provides a user date dialog selection window with a user selected calendar widget in the existing HTML5 form.
- range input type – Provides a graphical slide for the user to select numeric values within a range in an existing HTML5 form.
- color input type – Provides a graphical dialog and window for the user to select a color in an existing HTML5 form.
