• Popraw dostępność swojego serwisu
    Popraw dostępność swojego serwisu
  • Stwórz dostępny serwis
    Stwórz dostępny serwis
  • Dołącz do Klubu Dostępnych Stron
    Dołącz do Klubu Dostępnych Stron
  •  Zostań Rzecznikiem Dostępności
    Zostań Rzecznikiem Dostępności

Nowiny Kuźni Dostępnych Stron

Widok strony startowej pakietu JKultura

WWW ośrodka kultury zgodnie z WCAG 2.0

Stworzenie dostępnej strony internetowej może kosztować miejski dom kultury czy gminny ośrodek kultury 0 złotych. Wystarczy skorzystać z pakietów startowych udostępnionych przez projekt Kuźnia Dostępnych Stron. Publikujemy przedostatni już komplet...

Widok strony startowej pakietu JSzkoła

Szkolna witryna zgodna z WCAG 2.0

Pobierz i zainstaluj najnowszy startowy pakiet instalacyjny witryny szkoły zgodnej z wymogami WCAG 2.0. Przekonaj się, że strona Twojej szkoły może być atrakcyjna, nowoczesna, bogata w treści i dostępna dla...

Widok strony startowej pakietu JPrzedszkole

Dostępny serwis www i BIP dla przedszkola

Czy Twoje przedszkole ma stronę internetową? Czy ta strona jest dostępna? A może szukasz rozwiązania serwisu www przedszkola z Biuletynem Informacji Publicznej? Projekt Kuźnia Dostępnych Stron udostępnia kolejny komplet startowych pakietów...

Pomagamy poprawić dostępność i użyteczność serwisów internetowych

Chcemy wspólnie stworzyć w polskim Internecie modę na dostępność

Chcemy uczynić strony instytucji publicznych wzorcami dostępności

Strony internetowe i aplikacje mobilne podmiotów publicznych powinny spełniać wymagania WCAG 2.1, z uwzględnieniem poziomu AA.

- Ustawa o dostępności cyfrowej… z dnia 4 kwietnia 2019 roku

Potęgą Sieci jest jej uniwersalność.
Istotnym aspektem jest dostęp do Sieci dla wszystkich
bez względu na rodzaj niepełnosprawności.

Tim Berners-Lee,Dyrektor W3C i twórca World Wide Web

Formatowanie formularzy

Elastyczny HTML i CSS

Najlepsza strona formularzy w Bootstrapie jest to, że wszystkie pola i kontrolki wyglądają świetnie, bez względu na to, w jaki sposób opisano je znacznikami. Wymagany jest niezbędny kod HTML, ale dla wymaganych znaczników zapewnione jest stylizowanie.

Cztery dołączone układy

Bootstrap wspiera cztery typy układów formularzy:

  • Pionowy (Vertical, domyślny)
  • Wyszukiwarka (Search)
  • Śródliniowy (Inline)
  • Poziomy (Horizontal)

Różne typy układów formularzy wymagają pewnych zmian w znacznikach, ale kontrolki pozostaja i zachowują się tak samo.

Kontrolki stanu i nie tylko

Formularze Bootstrapa obejmują style dla wszystkich podstawqowych pól formularza, takich jak pola tekstowe, obszary tekstowe, czy pola wyboru i inne. Ponadto Bootstrap wyposażony jest w szereg niestandardowych komponentów, takich jak ???? załączonych i dołączanych pola tekstowe oraz wsparcie dla list wyboru.

Stany takie jak bład, ostrzeżenie i powodzenie są interpretowane przez wszystkie kontrolki formularzy. Ponadto dołaczono style do wyłączonych kontrolek.

Cztery typy formularzy

Bootstrap zapewnia proste znaczniki i style dla czterech typowych układów formularzy.

NazwaKlasaOpis
Pionowy (domyślny).form-vertical (niewymagane)Ułożone w stos, wyrównane do lewej strony etykiety nad kontrolkami
Śródliniowy (Inline).form-inlineEtykiety wyrównane do lewej i śródliniowy blok kontrolek w stylu kompaktowym
Wyszukiwarka (Search).form-searchZaokrąglone narożniki zwiększające estetykę pole wyszukiwarki
Poziomy (Horizontal).form-horizontalUmieszczone po lewej, ale wyrównane do prawej etykiety w tej samej linii co kontrolki

Przykłady formularzy używajacych tylko standardowych kontrolek bez dodatkowych znaczników

Podstawowy formularz

Domyślny - inteligentny i lekki bez dodatkowych znaczników.

Tutaj przykładowy blok pomocy.

<form class="well">
  <label>Nazwa etykiety</label>
  <input type="text" class="span3" placeholder="Wpisz coś…">
  <span class="help-block">Tutaj przykładowy blok pomocy.</span>
  <label class="checkbox">
    <input type="checkbox"> Zaznacz mnie
  </label>
  <button type="submit" class="btn">Wyślij</button>
</form>

Formularz Szukaj

Dodaj .form-search do znacznika formularza oraz .search-query do znacznika input.

<form class="well form-search">
  <input type="text" class="input-medium search-query">
  <button type="submit" class="btn">Szukaj</button>
</form>

Formularz śródliniowy

Dodaj .form-inline, by uzyskać finezyjne wyrównanie w pionie i odstępy między pólami formularza.

<form class="well form-inline">
  <input type="text" class="input-small" placeholder="E-mail">
  <input type="password" class="input-small" placeholder="Hasło">
  <label class="checkbox">
    <input type="checkbox"> Pamiętaj mnie
  </label>
  <button type="submit" class="btn">Zapisz się</button>
</form>

Formularz poziomy

Po prawej są wszystkie domyślne wspierane kontrolki formularzy. Oto ich lista:

  • pole tekstowe (tekst, hasło, email, etc)
  • pole zaznaczenia
  • pole opcji (radio)
  • lista wyboru
  • lista możliwości
  • wstawianie pliku
  • obszar tekstowy

Oprócz tekstu o nieregularnym kształcie, każde pole tekstowe HTML5 tak wygląda.

Przykłady znakowania

Given the above example form layout, here's the markup associated with the first input and control group. The .control-group, .control-label, and .controls classes are all required for styling.

<form class="form-horizontal">
  <fieldset>
    <legend>Legend text</legend>
    <div class="control-group">
      <label class="control-label" for="input01">Text input</label>
      <div class="controls">
        <input type="text" class="input-xlarge" id="input01">
        <p class="help-block">Supporting help text</p>
      </div>
    </div>
  </fieldset>
</form>

Stan kontrolek formularza

Bootstrap features styles for browser-supported focused and disabled states. We remove the default Webkit outline and apply a box-shadow in its place for :focus.


Walidacja formularzan

It also includes validation styles for errors, warnings, and success. To use, add the error class to the surrounding .control-group.

<fieldset
  class="control-group error">
  …
</fieldset>
Jakaś wartość tutaj
Coś może pójść nie tak
Proszę poprawić błąd
Świetnie!
Świetnie!

Rozszerzenia kontrolek formularzy

Prepend & append inputs

Input groups—with appended or prepended text—provide an easy way to give more context for your inputs. Great examples include the @ sign for Twitter usernames or $ for finances.


Pola zaznaczenia i wyboru

Up to v1.4, Bootstrap required extra markup around checkboxes and radios to stack them. Now, it's a simple matter of repeating the <label class="checkbox"> that wraps the <input type="checkbox">.

Inline checkboxes and radios are also supported. Just add .inline to any .checkbox or .radio and you're done.


Śródwierszowe formularze z wartością dodaną przed (dołączoną) i doklejoną za

To use prepend or append inputs in an inline form, be sure to place the .add-on and input on the same line, without spaces.


Tekst pomocy w formularzu

To add help text for your form inputs, include inline help text with <span class="help-inline"> or a help text block with <p class="help-block"> after the input element.

Use the same .span* classes from the grid system for input sizes.

You may also use static classes that don't map to the grid, adapt to the responsive CSS styles, or account for varying types of controls (e.g., input vs. select).

@

Tutaj tekst pomocy

.00
Tutaj tekst pomocy
$.00

Uwaga: Etykiety otaczają wszystkie opcje dla znacznie większych obszarach Kliknij i bardziej użytecznej formularza.

Działania Kuźni Dostępnych Stron

Kogo zapraszamy?

urzędy, instytucje, organizacje, które:

  • wydają serwis oparty na CMS Joomla!
  • chcą stworzyć nowy dostępny serwis
  • chcą poprawić dostępność swojego serwisu

Jakie zadania przed nami?

  • szerzyć wiedzę o dostępności
  • promować dostępne strony
  • dostarczać wydawcom dobre rozwiązania
  • kreować społeczność rzeczników dostępności
  • pomagać rozwiązywać problemy z dostępnością
Ministerstwo Administracji i Cyfryzacji Spółdzielnia FADO Fundacja PCJ Otwarte Źródła

Projekt współfinansowany ze środków Ministerstwa Administracji i Cyfryzacji