I'm kicking off a new series I'm calling Today I Learned (TIL). Each post will be a quick look at something I've learned accompanied by a small code example.
Today's experiment shows how you can rely on the browser to validate form inputs using just HTML and CSS. The :invalid selector highlights incorrect fields and disables the submit button until all the requirements are met.
The demo form is embedded below, so you can try it right here on the page:
The core idea is that modern browsers already know how to check things like email addresses or number ranges. By adding attributes such as required, type="email", and min/max, you get validation for free. CSS lets you show friendly error messages and style the submit button based on whether the form is valid.
I love that so much behaviour can be achieved without any JavaScript. It keeps the page simple and easy to maintain—perfect for quick prototypes or small projects.