Member-only story
Advanced Forms with Custom Form Elements (Web Components)
Many situations call for custom form elements, which can be easily created with web components. The problem is that wrapping an already-known form element does not automatically make it work with forms.
There are many things that web forms do for us that we probably dont stop to think about:
- Form reset: When a form is reset all its elements automatically clear their values in response;
- Form submit: When a form is submitted, you can create a FormData instance by providing the form element, from which you can read each form element value as long as it has a name attribute.
- Form validation: Each form element keeps a valid state based on many different attribute types and values (pattern, required, etc). This valid state can easily be checked at the element or form level including by the browser to show proper errors to users.
- Form autocomplete: Browsers can remember values and use them to autofill form elements. Each of these form elements needs to be able to accept these values as if the user inputs them.
The last thing you want is to create custom form elements that do not comply with these rules. They can make a huge difference in the developer and user experience. We need to create better forms and that means creating…