Sposoby wyrównania checkbox’ów w formularzu

Tworzenie stron internetowych zawiera w sobie wiele możliwości. Także jeśli chodzi o projektowanie i tworzenie formularzy, w których zawarte są pola wyboru. Jak podejść do tego typu formularzy i jak je wykonać, by były przyjazne użytkownikowi? Wyrównanie checkbox’ów i sposoby przedstawię w poniższym, krótkim artykule.

Wyrównanie elementów wyboru w formularzu

Szczypta teorii

W formularzu internetowym bardzo często mamy wymóg zaznaczenia zgody lub możliwość zapamiętania hasła do logowania (nie polecam zaznaczać). Z punktu widzenia użytkownika wygląd takiego elementu w formularzu, w większości przypadków, ma małe znaczenie. Jadnak, gdy widzimy stronę internetową przygotowaną „ze smakiem” zwracamy uwagę także na detale. Takimi detalami mogą być poprawnie pozycjonowane pola do zaznaczania.

Wyrównanie checkbox’ów

Przejdę od razu do konkretów. Jest co najmniej kilka sposobów na prezentację i pozycjonowanie pola wyboru w formularzu. Tworząc nowoczesny layout strony i formularza wypadałoby, aby nasz kod również był nowoczesny.

Oczywiście technika tworzenia to flexbox.

dark

Stworzyłem od razu gotowy przykład na sposoby wyświetlania pól wyboru:

  • flex-start – elementy zostaną wyrównane do górnej krawędzi kontenera,
  • center – elementy będą wyśrodkowane w pionie,
  • baseline – elementy zostaną wyrównane względem linii tekstu.

Powyższy przykład pokazuje 3 typowe sposoby na wyrównanie w pionie elementów wyboru.