DEV Community

Cover image for What CSS details make forms amazing?
Craig Leontowicz
Craig Leontowicz

Posted on

What CSS details make forms amazing?

I am learning to code on a side project - Percentage Calculator.

What sort of details can level up the forms on mobile and desktop?

Top comments (2)

Collapse
 
dianale profile image
Diana Le

In general, make sure forms are accessible. This means having a label for every corresponding input element (except submit or buttons) and making sure screen readers are able to read it properly. The labels may be hidden visually using CSS based on your calculator example, but make sure they exist in the HTML. Also make sure that it's easy to navigate the form using just a keyboard with tabbing and focus states.

For mobile, make sure that the inputs are big enough that users can click on them easily without accidentally hitting something else. And make sure the input type is correct. For example if your input is for emails specifically, then set the input type attribute correctly so the right keyboard pops up on mobile.

Collapse
 
craigleo profile image
Craig Leontowicz

Thanks for the tips