HTML5 introducing new input element types designed for specific user input. These new types can provide better user interfaces and include built-in validation, reducing the need for extensive JavaScript. Importantly, if a browser doesn’t support a specific new input type, it will fall back to treating it as a standard <input type=”text”>.
Input element types in HTML5
type=”email”
This is used for input fields that should contain an e-mail address. Browsers that support it may provide automatic validation to ensure the entered text is in a valid e-mail format. On touch screen devices, the virtual keyboard might be optimized for entering email addresses, often including the “@” symbol on the main layout.
<form>
<label for="email">Your Email Address:</label>
<input type="email" id="email" name="email" placeholder="example@domain.com" required>
<input type="submit" value="Submit">
</form>The required attribute ensures the user must fill this field, and the placeholder attribute provides a hint.
type=”url”
It is used for input fields contain a URL (web address). Supporting browsers may validate that the input be like a valid URL format. Similar to the email type, some mobile devices might optimize their keyboard for URL entry.
<form>
<label for="website">Website URL:</label>
<input type="url" id="website" name="website" placeholder="http://www.example.com">
<input type="submit" value="Submit">
</form>The placeholder attribute provides guidance on the expected format.
type=”number”
This type confines the input to numerical values. Many supporting browsers will display spinner controls (arrows) to easily increment or decrement the value. You can also use the min, max, and step attributes to set constraints on the acceptable range and increments.
<form>
<label for="quantity">Quantity:</label>
<input type="number" id="quantity" name="quantity" min="1" max="10" step="1" value="1">
<input type="submit" value="Submit">
</form>Here, the user can only enter numbers between 1 and 10, with increments of 1, and the default value is set to 1.
type=”range”
This is used for input fields that should contain a value from a range of numbers, typically displayed as a slider control. Like the number type, it also accepts min, max, and step attributes to define the range and allowed increments.
<form>
<label for="volume">Volume:</label>
<input type="range" id="volume" name="volume" min="0" max="100" step="10" value="50">
<output for="volume" id="volumeValue">50</output>
<input type="submit" value="Submit">
</form>
<script>
const volume = document.getElementById("volume");
const volumeValue = document.getElementById("volumeValue");
volume.addEventListener("input", function() {
volumeValue.textContent = volume.value;
});
</script>This example creates a slider for volume control, ranging from 0 to 100 with steps of 10, initially set at 50. The <output> element can be used to display the current value.
type=”date”
This type provides a control for entering a date (year, month, and day). Browsers with full support typically offer a date picker widget. The value is usually submitted in the ISO 8601 format (YYYY-MM-DD).
<form>
<label for="departure">Departure Date:</label>
<input type="date" id="departure" name="departure">
<input type="submit" value="Submit">
</form>Browser support for this input type can vary.
type=”time”
This allows the user to enter a time (hour, minute, seconds, and fractional seconds). Browsers might provide a time spinner control. The format is defined in RFC 3339 as a partial time (e.g., HH:MM:SS).
<form>
<label for="appt">Appointment Time:</label>
<input type="time" id="appt" name="appt">
<input type="submit" value="Submit">
</form>type=”month”
This type provides a control for selecting a month and year. The input is typically provided as a year and month in ISO 8601 format (YYYY-MM).
<form>
<label for="birthMonth">Birth Month:</label>
<input type="month" id="birthMonth" name="birthMonth">
<input type="submit" value="Submit">
</form>type=”week”
This type allows the user to select a week and year. The value is usually submitted in ISO 8601 format, indicating the year and week number (YYYY-WNN).
<form>
<label for="weekOfYear">Week of the Year:</label>
<input type="week" id="weekOfYear" name="weekOfYear">
<input type="submit" value="Submit">
</form>type=”color”
This type presents a color picker interface to the user. The selected color value is typically returned as a seven-character hexadecimal RGB value (e.g., #FF0000 for red). Browser support for the native color picker varies.
<form>
<label for="favColor">Favorite Color:</label>
<input type="color" id="favColor" name="favColor" value="#0000FF">
<input type="submit" value="Submit">
</form>The value attribute can be used to set a default color.
These new input types in HTML5 to improves the user experience by providing specific controls for different data types and include built-in validation and user interface improvements. While support for these types varies across browsers, they generally degrade gracefully to standard text inputs in older browsers. You can also use attribute features such as autocomplete, autofocus, disabled, and readonly with these input types.