What new HTML5 form features do you want to try?

1 New input types

One of the most noticeable changes in HTML5 forms is the addition of new input types that can handle different kinds of data, such as email, date, color, range, and number. These input types can provide validation, formatting, and UI elements that are native to the browser and the device. For example, if you use <input type="date"> , the browser will display a calendar picker that adapts to the user's locale and preferences. You can also use attributes like min, max, step, and placeholder to control the input range and appearance.

2 New input attributes

Another way to improve your HTML5 forms is to use some of the new input attributes that can modify the behavior and functionality of your inputs. For example, you can use the required attribute to indicate that an input is mandatory and prevent the form from being submitted if it is empty. You can also use the pattern attribute to specify a regular expression that the input value must match, such as a phone number or a password. Other useful attributes include autocomplete, autofocus, multiple, and disabled.

3 New form elements

HTML5 also introduced some new form elements that can help you organize and structure your forms better. For example, you can use the <fieldset> element to group related inputs together and provide a caption with the <legend> element. You can also use the <datalist> element to provide a list of predefined options for an input, which the user can choose from or type in. Another new element is the <output> element, which can display the result of a calculation or a user action within the form.

5 New form events

Finally, you can also take advantage of some of the new form events that HTML5 offers. These are events that are triggered by user actions or changes in the form elements, such as input, change, submit, reset, and invalid. You can use these events to add interactivity and functionality to your forms, such as performing calculations, updating other elements, validating inputs, or preventing default actions. You can also use the event object to access and modify the properties and methods of the target element.

6 New form examples

Now that you have learned some of the new HTML5 form features, why not try them out in your own projects? We have created some simple examples to demonstrate how to use these features. View the source code and the output of these examples by clicking on the links below. You can modify and experiment with them as you like. For instance, Example 1 is a simple contact form with new input types and attributes; Example 2 is a color picker form with a datalist and an output element; and Example 3 is a BMI calculator form with a range input and a FormData object.

7 Here’s what else to consider

This is a space to share examples, stories, or insights that don’t fit into any of the previous sections. What else would you like to add?