Can be used in forms.

This is an example of a mandatory field with a pattern.

When the value meets the requirement of the input field a green checkmark will be shown.

When the entered value is not empty and invalid then an error message will be shown below the input. (Only supported browsers)

For unsupported browsers the error message is shown upon pressing enter or when trying to the form.

Only the HTML and CSS are necessary to create the input field along with all the interactions. No JavaScript required.

Can be used in forms.

This is an example of a mandatory field with a pattern and a default value.

When the value meets the requirement of the input field a green checkmark will be shown.

When the entered value is not empty and invalid then an error message will be shown below the input. (Only supported browsers)

For unsupported browsers the error message is shown upon pressing enter or when trying to the form.

Only the HTML and CSS are necessary to create the input field along with all the interactions. No JavaScript required.