Dobrze zaprojektowane formularze pomagają użytkownikom i zwiększają współczynniki konwersji. Jedna mała poprawka może mieć duże znaczenie!
Oto przykład prostej formy płatności, który obejmuje wszystkie sprawdzone metody:
Oto przykład prostego formularza adresowego, który obejmuje wszystkie sprawdzone metody:
Na przykład ten kod HTML określa rok urodzenia pomiędzy 1900 a 2020. Opcja type="number"
ogranicza wartości wejściowe tylko do liczb w zakresie określonym przez min
i max
. Jeśli spróbujesz wpisać liczbę spoza zakresu, wartość zostanie ustawiona na nieprawidłowy stan.
W tym przykładzie użyto parametru pattern="[\d ]{10,30}"
, aby sprawdzić, czy numer karty płatniczej jest prawidłowy (z uwzględnieniem spacji):
Nowoczesne przeglądarki również przeprowadzają podstawową weryfikację danych wejściowych typu email
lub url
.
Układ siatki CSS
Układ siatki CSS umożliwia proste tworzenie elastycznych siatek.
Jeśli weźmiemy pod uwagę wcześniejszy przykład kreacji pływającej, zamiast tworzyć kolumny z wartościami procentowymi, możemy użyć układu siatki i jednostki fr
, która odpowiada części dostępnego miejsca w kontenerze.
.container { display: grid; grid-template-columns: 1fr 3fr; }
Siatka może też służyć do tworzenia regularnych układów siatki z dowolną liczbą elementów.
Liczba dostępnych ścieżek będzie zmniejszana w miarę zmniejszania się rozmiaru ekranu.
W poniższej wersji demonstracyjnej znajduje się tyle kart, ile zmieści się w każdym wierszu. Minimalny rozmiar to 200px
.
Więcej informacji o układzie siatki CSS
Układ wielokolumnowy
W przypadku niektórych typów układów możesz użyć układu wielokolumnowego, który umożliwia tworzenie elastycznych liczb kolumn za pomocą właściwości column-width
.
W poniższej prezentacji widać, że kolumny zostały dodane, jeśli jest miejsce na kolejną kolumnę 200px
.