Formulare erstellen mit Foundation

Die Foundation-Entwickler haben ein einfaches, leistungsstarkes und vielseitiges Formular-Layoutsystem entwickelt. Eine Kombination aus diesen Formularstilen und dem Foundation-Grid-System bedeutet, dass du fast grenzenlose Möglichkeiten hast.

Das Erstellen eines Formulars in Foundation ist einfach, aber äußerst flexibel. Formulare werden mit einer Kombination aus Standardformularelementen sowie Rasterzeilen und -spalten oder -zellen erstellt.

Die Basics

Texteingabefelder

Diese Eingabe-Typen erzeugen ein Texteingabe-Feld: text, date, datetime, datetime-local, email, month, number, password, search, tel, time, url und week. 

<form>
	<div class="grid-container">
		<div class="grid-x grid-padding-x">
			<div class="medium-6 cell">
			<label>Input Label
				<input type="text" placeholder=".medium-6.cell">
			</label>
			</div>
			<div class="medium-6 cell">
			<label>Input Label
				<input type="text" placeholder=".medium-6.cell">
			</label>
			</div>
		</div>
	</div>
</form>

Eingabefelder für Zahlen

In den meisten Internet-Browsern haben <input type="number">-Elemente in ihnen Aufwärts und Abwärts-Steuerelemente, die die Zahl innerhalb des Felds erhöhen oder verringern. Diese werden Spin-Buttons genannt. 

<form>
	<div class="grid-container">
		<div class="grid-x grid-padding-x">
			<div class="medium-6 cell">
			<label>Wie viele Puppen?
				<input type="number" value="100">
			</label>
			</div>
		</div>
	</div>
</form>

Hilfetext (Zugänglichkeit)

Platzieren Sie den Hilfetext unter einem Feld, um seinen Zweck zu verdeutlichen. Wenn Sie den Hilfetext verwenden, geben Sie dem Text eine eindeutige ID und fügen Sie der Eingabe das Attribut aria-describedby hinzu. Dadurch wird der Eingabe der Hilfstext zugeordnet. Ein Bildschirmleser kann dann den Hilfstext lesen, wenn der Benutzer sich auf die Eingabe konzentriert. 

<form>
	<div class="grid-container">
		<div class="grid-x grid-padding-x">
			<div class="medium-6 cell">
			<label>Passwort
				<input type="password" aria-describedby="passwordHelpText">
			</label>
			<p class="help-text" id="passwordHelpText">Dein Passwort muss mindestens 10 Zeichen lang sein und eine Zahl enthalten.</p>
			</div>
		</div>
	</div>
</form>

Dein Passwort muss mindestens 10 Zeichen lang sein und eine Zahl enthalten.

Positionierung des Labels

Manchmal möchtest du ein Formular mit Beschriftungen links vom Eingabefeld haben. Das ist kein Problem! Du kannst das Label in eine andere Zelle oder Spalte links neben das Eingabefeld einfügen. Verwende dann die Klasse .text-right oder .float-right (oder füge text-align hinzu: wie du möchtest), um die Beschriftung neu auszurichten.

In einer Umgebung von rechts nach links verwendest du stattdessen .float-left. 

<form>
	<div class="grid-x grid-padding-x">
		<div class="small-3 cell">
		<label for="right-label" class="text-right">Label</label>
		</div>
		<div class="small-9 cell">
		<input type="text" id="right-label" placeholder="Rechtsbündige Texteingabe">
		</div>
	</div>
</form>

Füge die .middle-Klasse hinzu, um das Label mit dem Eingabefeld vertikal mittig auszurichten. 

<form>
	<div class="grid-x grid-padding-x">
		<div class="small-3 cell">
		<label for="middle-label" class="text-right middle">Label</label>
		</div>
		<div class="small-9 cell">
		<input type="text" id="middle-label" placeholder="Rechtsbündig und mittig ausgerichtete Texteingabe">
		</div>
	</div>
</form>

Inline-Labels und Buttons

Um zusätzlichen Text oder Steuerelemente an die linke oder rechte Seite eines Eingabefelds anzuhängen, betten Sie die Elemente in einen .input-group-Container ein und fügen Sie dann folgende Klassen den Elementen darin hinzu:

  • .input-group-field im Textfeld.
  • .input-group-label für das Textlabel.
  • .input-group-button für die Schaltfläche. Platzieren Sie den Button in diesem Wrapper.

<div class="input-group">
	<span class="input-group-label">$</span>
	<input class="input-group-field" type="number">
	<div class="input-group-button">
	<input type="submit" class="button" value="Submit">
	</div>
</div>

$

Buttons für Uploads

Verwende <input type="file">, um eine Dateiupload-Schaltfläche zu erstellen. Aus Sicherheitsgründen lassen die meisten Browser eine Stil-Anpassung der Dateiupload-Schaltfläche nicht zu. Um das zu umgehen, können wir ein Label als Schaltfläche formatieren und auf den <input> verweisen. Um die Eingabe ordnungsgemäß zu maskieren, wird die Klasse .show-for-sr hinzugefügt. 

<label for="exampleFileUpload" class="button">Upload File</label>
<input type="file" id="exampleFileUpload" class="show-for-sr">

Benutzerdefinierte Steuerelemente (Eingabehilfen)

Benutzerdefinierte Formularsteuerelemente wie Datumsauswahl, Bereichsschieberegler oder Schalter benötigen zusätzliche Aufmerksamkeit, die zugänglich gemacht werden muss. Unsere benutzerdefinierten Eingaben, wie der Bereichsschieberegler und der Schalter, erledigen das meiste für Sie.

Bei benutzerdefinierten Eingaben mit Beschriftungen oder Hilfetexten müssen die Attribute aria-labelledby und aria-describedy hinzugefügt werden, damit Screen Reader das Steuerelement richtig interpretieren können. 

<label id="ageLabel">Age</label>
<div class="slider" aria-labelledby="ageLabel" aria-describedby="ageHelpText" data-slider data-initial-start="50" data-end="200">
	<span class="slider-handle" data-slider-handle role="slider" tabindex="1"></span>
	<span class="slider-fill" data-slider-fill></span>
	<input type="hidden">
</div>
<p id="ageHelpText">How old are you?</p>

How old are you?