Well-designed forms help users and increase conversion rates. One small fix can make a big difference!
Here is an example of a simple payment form that demonstrates all of the best practices:
Here is an example of a simple address form that demonstrates all of the best practices:
For example, the following HTML specifies input for a birth year between
1900 and 2020. Using type="number" constrains input values to numbers only, within the range
specified by min and max. If you attempt to enter a number outside the range, the input will be
set to have an invalid state.
The following example uses pattern="[\d ]{10,30}" to ensure a valid payment card number, while
allowing spaces:
Modern browsers also do basic validation for inputs with type email or url.
CSS Grid Layout
CSS Grid Layout allows for the straightforward creation of flexible grids.
If we consider the earlier floated example,
rather than creating our columns with percentages,
we could use grid layout and the fr unit,
which represents a portion of the available space in the container.
.container {
display: grid;
grid-template-columns: 1fr 3fr;
}
Grid can also be used to create regular grid layouts,
with as many items as will fit.
The number of available tracks will be reduced as the screen size shrinks.
In the below demo, we have as many cards as will fit on each row,
with a minimum size of 200px.
Read more about CSS Grid Layout
Multiple-column layout
For some types of layout you can use Multiple-column Layout (Multicol),
which can create responsive numbers of columns with the column-width property.
In the demo below, you can see that columns are added if there is room for another 200px column.