Wie fügt man Fragen zu einem Formular hinzu?
- Einführung
- Formularstruktur erstellen
- Fragen als Formularelemente hinzufügen
- Beispiel für eine Frage
- Weitere Eingabetypen für unterschiedliche Fragen
- Das Abschicken des Formulars
- Gesamtes Beispiel des Formulars
Einführung
Ein Formular dient dazu, dass Benutzer Informationen eingeben und an Sie senden können. Um Fragen hinzuzufügen, müssen Sie verschiedene Eingabefelder in das Formular einbauen. Diese Felder können beispielsweise Textfelder, Auswahlfelder oder Checkboxen sein, je nachdem, welche Art von Antwort Sie von den Benutzern erwarten.
Formularstruktur erstellen
Ein Formular beginnt mit dem <form>-Tag. Innerhalb dessen fügen Sie verschiedene Eingabeelemente hinzu. Diese Eingabefelder sind dafür da, dass der Benutzer die Antworten auf Ihre Fragen eingeben kann. Wichtig ist es, jedem Eingabefeld eine sinnvolle Beschriftung zu geben, damit der Benutzer weiß, welche Information eingegeben werden soll.
Fragen als Formularelemente hinzufügen
Um eine Frage in das Formular einzufügen, verwenden Sie ein Label-Element, welches die Frage beschreibt, und ein dazugehöriges Eingabefeld. Das Eingabefeld kann vom Typ "text" sein, um eine kurze Antwort zu erhalten, oder "textarea" für längere Antworten. Für Optionen, die ausgewählt werden müssen, etwa bei Multiple-Choice-Fragen, verwenden Sie Radio-Buttons oder Dropdown-Menüs.
Beispiel für eine Frage
Ein einfaches Beispiel besteht darin, eine Eingabe für einen Namen zu erstellen:
<label for="name">Wie heißen Sie?</label><input type="text" id="name" name="name" />Hierbei sorgt das Label-Element dafür, dass der Benutzer weiß, welche Information erwartet wird. Die Attribute "id" und "for" sind verbunden, sodass ein Klick auf die Beschriftung das Eingabefeld aktiviert.
Weitere Eingabetypen für unterschiedliche Fragen
Falls Sie eine Auswahl anbieten möchten, bei der der Benutzer genau eine Option auswählen kann, verwenden Sie Radio-Buttons:
<fieldset> <legend>Welches ist Ihre Lieblingsfarbe?</legend> <input type="radio" id="rot" name="farbe" value="rot" /> <label for="rot">Rot</label> <input type="radio" id="blau" name="farbe" value="blau" /> <label for="blau">Blau</label></fieldset>Für Auswahlmöglichkeiten aus einer Dropdown-Liste nutzen Sie das <select>-Element:
<label for="land">In welchem Land wohnen Sie?</label><select id="land" name="land"> <option value="de">Deutschland</option> <option value="at">Österreich</option> <option value="ch">Schweiz</option></select>Das Abschicken des Formulars
Damit das Formular abgesendet werden kann, sollte ein Button vom Typ "submit" integriert werden. Dieser löst das Abschicken der eingegebenen Daten aus:
<button type="submit">Absenden</button>Gesamtes Beispiel des Formulars
Hier ist ein vollständiges Beispiel, das alle genannten Fragen enthält:
<form action="/submit" method="post"> <label for="name">Wie heißen Sie?</label> <input type="text" id="name" name="name" required /> <fieldset> <legend>Welches ist Ihre Lieblingsfarbe?</legend> <input type="radio" id="rot" name="farbe" value="rot" /> <label for="rot">Rot</label> <input type="radio" id="blau" name="farbe" value="blau" /> <label for="blau">Blau</label> </fieldset> <label for="land">In welchem Land wohnen Sie?</label> <select id="land" name="land"> <option value="de">Deutschland</option> <option value="at">Österreich</option> <option value="ch">Schweiz</option> </select> <button type="submit">Absenden</button></form>Mit dieser Struktur können Sie beliebig viele Fragen hinzufügen und das Formular entsprechend Ihren Anforderungen gestalten.