Barrierefreie Formular-Vorlage

Formulare barrierefrei zu gestalten, ist nicht einfach. Dafür haben wir eine barrierefreie Vorlage erstellt, die ganz oder in ihren einzelnen Feldtypen kopiert werden kann.

Im Roxen fügen Sie den benötigten Code dann mit der RXML-Komponente in die Seite ein.
Weitere Informationen finden sich auf der Roxen Anleitungsseite und der Seite zur Verwendung von Formtools für Nutzer*innen der Universität Bielefeld.

Formular-Beispiel - Kontaktdaten

Anrede:*
Vorname:*
Nachname:*
E-Mail:*
E-Mail wiederholen:*
Anmerkungen:
Welche von diesen ist Ihre Lieblingsstadt?
Lebenslauf:
Wählen Sie eine PDF-Datei auf Ihrem Rechner aus und laden diese hoch.
Geburtsdatum:

Auswahlfeld

Auswahl treffen und Option wählen

Bitte wählen Sie aus:

Auswahl 1
Auswahl 2
Auswahl 3
Auswahl 4

Radio Buttons

Auswahl treffen

Möchten Sie diese Option wählen?

Ja
Nein

2. Auswahl

Ausklappfunktion

Bitte wählen Sie hier aus, welche Art von Anwendung auf Barrierefreiheit hin getestet werden soll:

zusätzliche Angaben Klicken Sie um weitere Angaben zu machen.

Ausklappinhalte

Weiterer Vorname:*
Weiterer Nachname:*

Einwilligungserklärung

*Hiermit stimme ich der in der Datenschutzerklärung beschriebenen Verarbeitung meiner personenbezogenen Daten zu.

Die Einwilligung ist freiwillig und jederzeit mit Wirkung für die Zukunft widerrufbar. Die Datenverarbeitung vor Ihrem Widerruf verbleibt rechtmäßig (wenden Sie sich bitte dafür an die fachliche Ansprechperson - siehe Datenschutzerklärung). Im Falle eines Widerrufs werden die personenbezogenen Daten umgehend gelöscht. Durch den Widerruf entstehen Ihnen keine Nachteile. Gesetzliche Erlaubnistatbestände bleiben von einem Widerruf der Einwilligung unberührt.

Die mit Stern * gekennzeichneten Felder sind Pflichtfelder

HTML-Code kopieren

Dropdown-Felder

<label for="anrede">Anrede:*</label><br />
<select name="anrede" id="anrede">
<option value=" ">Anrede</option>
<option value="Herr">Herr</option>
<option value="Frau">Frau</option>
<option value="ohne">ohne Angabe</option>
</select>

Textfelder / Textarea

<label for="vorname">Vorname:*</label><br />
<input name="vorname" id="vorname" type="text" />

<label for="nachname">Nachname:*</label><br />
<input name="nachname" id="nachname" type="text" />

<label for="email">E-Mail:*</label><br />
<input name="email" id="email" placeholder="nur gültige E-Mail-Adresse eintragen" type="text" />

<label for="email2">E-Mail wiederholen:*</label><br />
<input name="email2" id="email2" placeholder="bitte E-Mail-Adresse wiederholen" type="text" />

<label for="anmerkungen">Anmerkungen:</label><br />
<textarea name="anmerkungen" id="anmerkungen" cols="38" rows="5"></textarea>

Dropdown-Menü mit Gruppierungen

<label for="stadt">Welche von diesen ist Ihre Lieblingsstadt?</label><br />
<select name="stadt" id="stadt">
<optgroup label="Asien">
<option value="Delhi">Delhi</option>
<option value="Hong Kong">Hong Kong</option>
<option value="Mumbai">Mumbai</option>
<option value="Tokio">Tokio</option>
</optgroup>
<optgroup label="Europa">
<option value="Amsterdam">Amsterdam</option>
<option value="Bielefeld">Bielefeld</option>
<option value="London">London</option>
<option value="Moskau">Moskau</option>
</optgroup>
<optgroup label="Amerika">
<option value="Buenos Aires">Buenos Aires</option>
<option value="Los Angeles">Los Angeles</option>
<option value="New York">New York</option>
<option value="Sao Paulo">Sao Paulo</option>
</optgroup>
</select>

Datei-Upload - - - Datumseingabe

<label for="datei">Lebenslauf:</label><br />
Wählen Sie eine PDF-Datei auf Ihrem Rechner aus und laden diese hoch.<br />
<input name="datei" id="datei" type="file" />

<label for="datum">Geburtsdatum:</label>
<input name="datum" type="date" id="datum" />

Checkboxen

<fieldset>
<legend>Auswahl treffen und Option wählen</legend>
<p>Bitte wählen Sie aus:</p>
<label><input type="checkbox" name="auswahl[]" value="auswahl1" /> Auswahl 1</label><br />
<label><input type="checkbox" name="auswahl[]" value="auswahl2" /> Auswahl 2</label><br />
<label><input type="checkbox" name="auswahl[]" value="auswahl3" /> Auswahl 3</label><br />
<label><input type="checkbox" name="auswahl[]" value="auswahl4" /> Auswahl 4</label><br />
</fieldset>

Radio Buttons

<fieldset>
<legend>Auswahl treffen</legend>
<p>Möchten Sie diese Option wählen?</p>
<label><input type="radio" name="option" value="ja" /> Ja</label><br />
<label><input type="radio" name="option" value="nein" /> Nein</label><br />
</fieldset>

<label for="andere_adresse">2. Auswahl </label><br>
<select name="andere_adresse" id="andere_adresse">
<option value="nein">Nein</option>
<option value="ja">Ja</option>
</select>

Ausklappfunktion

<div style="background-color: #f0f0f0">
Bitte wählen Sie hier aus, welche Art von Anwendung auf Barrierefreiheit hin getestet werden soll:
<details>
<summary><strong>zusätzliche Angaben</strong> Klicken Sie um weitere Angaben zu machen.<br /></summary>
<strong>Ausklappinhalte</strong>
<br /><br />
<label for="vorname2">Weiterer Vorname:*</label><br />
<input name="vorname2" id="vorname2" type="text" />

<label for="nachname2">Weiterer Nachname:*</label><br />
<input name="nachname2" id="nachname2" type="text" />

</details>
</div>

Datenschutzhinweis und Checkbox

<label><input name="datenschutzhinweis" type="checkbox" value="bestaetigt" />
*Hiermit stimme ich der in der <a href="https://www.uni-bielefeld.de/...">Datenschutzerklärung</a>
beschriebenen
Verarbeitung meiner personenbezogenen Daten zu.</label>
<br><br> Die Einwilligung ist freiwillig und jederzeit mit Wirkung für die Zukunft widerrufbar.
Die Datenverarbeitung vor Ihrem Widerruf verbleibt rechtmäßig (wenden Sie sich bitte dafür an die fachliche
Ansprechperson - siehe Datenschutzerklärung).
Im Falle eines Widerrufs werden die personenbezogenen Daten umgehend gelöscht. Durch den Widerruf entstehen
Ihnen keine Nachteile. Gesetzliche
Erlaubnistatbestände bleiben von einem Widerruf der Einwilligung unberührt.
</p>

Absende-Button

<input class="float-right" type="submit" value="Formular abschicken" /><br />

Gesamter html-Code inkl. css und Formtools-Code

// an den nachfolgenden Zeilen bitte nichts Ändern
rsv.errorFieldClass = null;
rsv.displayType = "alert-all";
rsv.customErrorHandler = null;
</script>
<form class="flex" action="https://frmtools.uni-bielefeld.de/formtools/process.php" method="post" accept-charset="utf-8"
enctype="multipart/form-data" onSubmit="return rsv.validate(this, rules)">

input[type="text"],
input[type="file"],
input[type="date"],
textarea,
select {
display: block;
width: 100%;
max-width: 500px;
margin-bottom: 2rem;
}

fieldset {
display: block;
width: 100%;
max-width: 300px;
margin-bottom: 2rem;
}

summary {
font-weight: bold;
cursor: pointer;
margin-bottom: 2rem;
}

details fieldset {
padding: 12px;
}
</style>

<h1>Barrierefreie Vorlage Formular</h1>

<h2>Kontaktdaten</h2>