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.