Toolbar-Menu
 
Sie sind hier: Start Komponenten
Theme "lightBlue" erfolgreich aktiviert
Um das Theme zu aktivieren, muss folgende CSS-Datei eingebunden werden:


<!-- CSS link (HTML header), replace with "https://style.brandenburg.de/cdn/bb/css/app.css" -->

<link type="text/css" rel="stylesheet" href="https://style.brandenburg.de/cdn/bb/css/themes/lightBlue.css"/>
5. Komponenten
  1. 5.1 Accordion
  2. 5.2 Pictures
  3. 5.3 Formulare
  4. 5.4 Icons
  5. 5.5 Kalender
  6. 5.6 Listen
  7. 5.7 Mega-Menü
  8. 5.8 Mobile-Menü
  9. 5.9 Meldungen
  10. 5.10 Slider
  11. 5.11 Tabellen
  12. 5.12 Tabs (Horizontal)
  13. 5.13 Tabs (Vertikal)
  14. 5.14 Teaser
  15. 5.15 Tonaufnahmen
  16. 5.16 Videos
  17. 5.17 Externe Inhalte
Platzierung
4.2.1
4.2.2
4.2.3
 
4.2.4
4.2.5
4.3.1
4.3.2
4.3.3
4.4.1
4.4.2
4.4.3
4.4.4

5.3 Formulare

Formulare werden mit Hilfe gängiger Frameworks realisiert. Fokussierte Formularelemente erhalten eine Umrahmung in Grundfarbe. Die Rahmen sollen keine Rundungen aufweisen und initiale Hilfstexte in HELLGRAU abgebildet werden.

.de

  • Quelltext
    Quelltext kopieren 
    <form id="myForm">
    <div class="row">
        <div class="small-12 large-12 columns">
            <label for="input1" title="Pflichtfeld: Vollständigen Namen eintragen">Vollständiger Name
                <small>(Pflichtfeld)</small>
            </label>
            <input id="input1" type="text" title="Pflichtfeld: Vollständigen Namen eintragen"
                required pattern="[a-zA-Z]+" placeholder="Vollständiger Name"/>
        </div>
    </div>
    <div class="row">
        <div class="small-12 large-4 columns">
            <label for="input2" title="Pflichtfeld, erlaubt sind Zahlen: Telefonnummer eintragen">Telefon
                <small>(Pflichtfeld, erlaubt sind Zahlen)</small>
            </label>
            <input id="input2" type="text" title="Pflichtfeld, erlaubt sind Zahlen: Telefonnummer eintragen"
                    required pattern="[0-9]+" placeholder="Telefonnummer"/>
        </div>
        <div class="large-4 small-12 columns">
            <label for="input3" title="E-Mail-Adresse eintragen">E-Mail-Adresse</label>
            <input id="input3" type="text" title="E-Mail-Adresse eintragen" pattern="email"
                   placeholder="E-Mail-Adresse" class="input-group-field"/>
        </div>
        <div class="large-4 small-12 columns">
            <label for="input4" title="E-Mail-adresse ohne Domain Endung eintragen">E-Mail-Adresse Alternativ</label>
            <div class="input-group">
                <input id="input4" type="text" title="E-Mail-adresse ohne Domain Endung eintragen"
                       pattern="[a-zA-Z0-9]+@[a-zA-Z0-9]+" placeholder="E-Mail-Adresse" class="input-group-field"/>
                <span class="input-group-label bb-input-group-label">.de</span>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="large-12 small-12 columns">
            <label for="select1" title="Auswahlfeld Städte">Auswahlfeld Städte</label>
            <select id="select1" title="Dropdown Menü">
                <option title="Cottbus" value="Cottbus">Cottbus</option>
                <option title="Guben" value="Guben">Guben</option>
                <option title="Beelitz" value="Beelitz">Beelitz</option>
                <option title="Angermünde" value="Angermünde">Angermünde</option>
            </select>
        </div>
    </div>
    <div class="row">
        <div class="medium-6 small-12 columns radio-group">
            <label title="Pflichtfeld: Bitte wählen Sie eine Option aus">Bitte wählen Sie eine Option aus
                <small>(Pflichtfeld)</small>
            </label>
            <input type="radio" alt="Radio Button Ja" title="Option Ja" name="radiogroup1" id="yes-btn" value="yes">
            <label title="Option Ja" for="yes-btn">Ja</label>
            <input type="radio" alt="Radio Button Nein" title="Option Nein" name="radiogroup1" id="no-btn" value="no">
            <label title="Option Nein" for="no-btn">Nein</label>

        </div>
        <div class="medium-6 small-12 columns ">
            <label title="Heimatland auswählen">Ihr Heimatland</label>
            <input title="Heimatland: Brandenburg" type="checkbox" alt="Checkbox Mit Getränke" id="checkbox1">
            <label title="Heimatland: Brandenburg" for="checkbox1">Brandenburg</label>
            <input title="Heimatland: Nicht Brandenburg" type="checkbox" alt="Checkbox  MitPommes" id="checkbox2">
            <label title="Heimatland: Nicht Brandenburg" for="checkbox2">Nicht Brandenburg</label>
        </div>
    </div>
    <div class="row">
        <div class="large-12 columns">
            <label title="Bemerkungen eintragen" for="input5">Bemerkungen</label>
            <textarea id="input5" title="Bemerkungen eintragen" alt="Textfeld"></textarea>
        </div>
    </div>
    <div class="row">
        <div class="small-12 large-12 columns">
            <label for="input11" title="Unsichtbares Label" class="hide">Unsichtbares Label</label>
            <input id="input11" title="Eingabefeld Unsichtbares Label" type="text"
                   placeholder="Eingabefeld mit unsichtbarem Label"/>
        </div>
    </div>
    <div class="row">
        <div class="large-12 columns">
            <button title="Senden Button"class="button bb-submit-button" type="submit"
                  alt="Senden Button" value="Submit">Senden</button>
        </div>
    </div>
</form>

  • Benötigtes Javascript

     
    <script type="text/javascript" src="style.brandenburg.de/js/vendor/jquery.min.js"></script>
 <script type="text/javascript" src="style.brandenburg.de/js/vendor/jquery.mobile-events.min.js"></script>
 <script type="text/javascript" src="style.brandenburg.de/js/vendor/what-input.min.js"></script>
 <script type="text/javascript" src="style.brandenburg.de/js/foundation.min.js"></script>
 <script type="text/javascript" src="style.brandenburg.de/js/app.js"></script>
Aufbau
  • Die Feldrahmen sind HELLGRAU und eckig.
  • Die Feld-Label, bzw. -Titel, werden linksbündig ausgerichtet und konventionell über dem Feld platziert.
  • Bestätigen-Buttons werden rechts unter dem Formular platziert.
Spezifische Anforderungen
  • Die Formularfelder besitzen keine Schatten oder Rundungen.
Barrierefreiheit
  • Alle Formularfelder müssen einen Alternativtext und ein Label besitzen.
  • In Pflichtfeldern muss der Alternativtext mit "Pflichtfeld:" beginnen, gefolgt von der Beschreibung der erwarteten Handlung. Beispiel: "Pflichtfeld: Bitte geben Sie Ihren vollständigen Namen ein."
  • Formulare sind so zu gestalten, dass bspw. Screen-Reader erwartungskonform funktionieren.
  • Ein Label darf sichtbar ausgeblendet werden, muss aber stets als HTML-Element vorhanden sein.
Aktionsverhalten
  • Bei technischer Möglichkeit sollten Formularfelder nach dem Verlassen validiert werden.
  • Es sollten stets alle Formularfelder validiert werden, sodass im Fehlerfall alle Korrekturhinweise sofort erfasst und in der Nähe der entsprechenden Formularelemente eingeblendet werden können.
Responsive Design

Für Feldtypen mit standardisierter Funktionalität, wie Datumsfelder, Zahlenformatfelder, Text, Auswahlboxen usw., werden ausschließlich die technisch dafür vorgesehenen Feldtypen verwendet. Damit können bspw. Smartphones die Eingabe typenspezifisch oder plattformabhängig unterstützen.

Seite drucken