In recent years, browsers have been adding more functionality for form fields. This includes built-in common practices and styling options to better customize the look of the fields.

It’s helpful to be aware of what browsers have to offer to build on top of instead of wasting time reinventing the wheel. Here are some of the most relevant updates that have wide browser support.

Built-in functionality

Standard usage patterns that have evolved over the years, browsers have decided to build in directly:

• Browser validation - browsers now validate fields, even notifying the user of required fields, which can be done by just adding a required property to fields; no more Javascript needed and it’s fully-accessible!
• Date calendar selection - browsers now include a mini calendar to select a date that comes up when using the input type="date" field; no more complex Javascript or dealing with potential mobile issues!
• Semantic text fields - a text input field can be specified as email, url, or tel, which helps with form validation as well as showing a specific keyboard on mobile devices

Added styling options

And there is more flexibility for the design of individual form fields to better match the overall website design:

• Accent color - define the color of selected radio buttons and checkboxes along with other form fields that have an accent color, by setting a color value for the accent-color CSS property in the :root
• Radio button and checkbox size - you can now set the width and height of a radio button or checkbox to match the size of other fields
• Select dropdown padding - and padding for a select field can also be set to better size and match other fields
• File upload button styling - the button in the type="file" input that can now be styled to match your design (finally!) using input::file-selector-button

For examples of the above, along with other form field options, check out the free Starter theme.

With Blocks Edit, you can make your custom form fields visually editable for your team to drag and drop them to build forms and submit to any platform.