Zakłócenie

Dobrze zaprojektowane formularze ułatwiają użytkownikom wypełnianie ich i zwiększają współczynniki konwersji. Jedna mała poprawka może przynieść duże korzyści.

Jeśli wolisz poznawać sprawdzone metody w ramach samouczków, zapoznaj się z tymi dwoma: samouczkiem dotyczącym sprawdzonych metod dotyczących formularzy płatności i samouczkiem dotyczącym sprawdzonych metod dotyczących formularzy adresowych.

Oto przykład formy płatności, która spełnia wszystkie sprawdzone metody:

Oto przykład prostego formularza adresu, który zawiera wszystkie sprawdzone metody:

Na przykład poniższy kod HTML określa dane wejściowe dotyczące roku urodzenia w zakresie od 1900 r. do 2020 r. Użycie parametru type="number" ogranicza wartości wejściowe tylko do liczb w zakresie określonym przez parametry min i max. Jeśli spróbujesz wpisać liczbę spoza zakresu, dane zostaną ustawione jako nieprawidłowe.

W tym przykładzie użyto wartości pattern="[\d ]{10,30}", aby zapewnić prawidłowy numer karty płatniczej, zezwalając na spacje:

Nowoczesne przeglądarki przeprowadzają też podstawową weryfikację danych wejściowych typu email lub url.

Układ siatki CSS

Układ siatki CSS umożliwia łatwe tworzenie elastycznych siatek. Jeśli weźmiemy pod uwagę wcześniejszy przykład, w którym kolumny zostały utworzone za pomocą procentów, możemy użyć układu siatki i jednostki fr, która reprezentuje część dostępnej przestrzeni w kontenerze.

.container {
  display: grid;
  grid-template-columns: 1fr 3fr;
}

Użyj siatki, aby utworzyć zwykłe układy siatki z tak dużą liczbą elementów, jaką tylko zmieści się na ekranie. Liczba dostępnych ścieżek będzie się zmniejszać wraz z malejącym rozmiarem ekranu. W tym przykładzie mamy tyle kart, ile mieści się w każdym rzędzie, przy minimalnym rozmiarze 200px.

Więcej informacji o układzie siatki CSS

Układ z wieloma kolumnami

W przypadku niektórych typów układów możesz użyć układu wielokolumnowego (Multicol), który może tworzyć elastyczne liczby kolumn za pomocą właściwości column-width. W prezentacji widać, że kolumny są dodawane, jeśli jest miejsce na kolejną kolumnę 200px.