What are some common responsive form patterns and anti-patterns to avoid?

1 Fluid layout

One of the basic principles of responsive web design is to use a fluid layout that adapts to the available viewport width. For forms, this means using relative units such as percentages, ems, or rems, and avoiding fixed widths or heights. You can also use CSS grid or flexbox to create flexible and responsive form layouts that can adjust to different screen sizes and orientations. For example, you can use grid-template-columns and grid-template-rows to define the number and size of columns and rows for your form elements, and use media queries to change them according to the breakpoint.

2 Input types

Another important aspect of responsive forms is to use the appropriate input types for different kinds of data. For example, you can use <input type="email"> for email addresses, <input type="tel"> for phone numbers, <input type="date"> for dates, and so on. These input types provide semantic meaning, validation, and keyboard accessibility for your form fields, and also trigger the native input controls on mobile devices, such as the email keyboard or the date picker. You can also use the pattern attribute to specify a regular expression for validating the input value, and the placeholder attribute to provide a hint or example for the user.

3 Validation and feedback

Validation and feedback are essential for ensuring that the user enters the correct and complete information in your form, and for providing helpful and clear messages in case of errors or success. You can use both client-side and server-side validation for your forms, depending on your needs and preferences. For client-side validation, you can use the HTML5 validation attributes, such as required, minlength, maxlength, or pattern, to enforce some basic rules for your form fields, and use the :invalid and :valid pseudo-classes to style them accordingly. You can also use JavaScript to add custom validation logic and feedback messages for your form fields, and use the aria-invalid and aria-describedby attributes to improve the accessibility of your error messages.

4 Responsive labels

Labels are important for identifying and describing the purpose of your form fields, and for improving the usability and accessibility of your forms. However, labels can also take up a lot of space in your form layout, especially on smaller screens. Therefore, you need to find a balance between visibility and readability for your labels, and use responsive techniques to adjust them according to the screen size. For example, you can use the <label> element with the for attribute to associate your labels with your form fields, and use the display property to position them either above or next to your form fields. You can also use media queries to change the display property or the font size of your labels at different breakpoints.

5 Anti-patterns to avoid

Responsive forms are essential for providing a good user experience and performance. To create forms that are easy to use and fill out on any device and screen size, you should avoid certain anti-patterns. For instance, don't use too many fields or unnecessary fields that can overwhelm or confuse the user. Also, don't use multiple columns or rows for your form fields and don't use fixed or absolute positioning for your form elements. Additionally, make sure to use a minimum font size of 16px for your form fields and labels, and a minimum size of 44px by 44px for your buttons. By following these guidelines, you can create forms that are easy to use and fill out on any device and screen size.

6 Here’s what else to consider

This is a space to share examples, stories, or insights that don’t fit into any of the previous sections. What else would you like to add?