Einfache HTML-Formulare erstellen

Worum geht´s?

In diesem Tutorial lernen wir, einfache HTML-Formulare zu erstellen: das HTML-Formular selbst und zwei notwendige Input-Felder. Welche Input-Felder es in HTML noch gibt, wird in einem weiteren Tutorial behandelt.

Aber alles der Reihe nach: Was ist überhaupt ein HTML-Formular?

1. Was sind HTML-Formulare?

Grundsätzlich sind HTML-Formulare eine bestimmte Art von HTML-Tag, nämlich das <form>-Tag. Innerhalb von diesem <form>-Tag sind meist eine Reihe von <input>-Tags aufgereiht, wie etwa ein Textfeld oder ein Submit-Button, der das Formular zur weiteren Verarbeitung abschickt.

Klassische Beispiele für HTML-Formulare wären z.B. ein Login-Formular oder ein Kontakt-Formular. Aber auch wenn du z.B. bei einem Webshop etwas bestellst, füllst du üblicherweise ein HTML-Formular aus, um deine Daten einzugeben.

Zusammengefasst kann man sagen: Immer dort, wo der Benutzer Daten eingeben soll, wird dir mit großer Wahrscheinlichkeit ein HTML-Formular begegnen.

Aber wie kann man so ein HTML-Formular erstellen?

2. Einfache HTML-Formulare erstellen

Ein einfaches HTML-Formular besteht aus drei Dingen:

• Ein Text-Feld, wo der Benutzer etwas eingeben soll
• Einen Submit-Button, der das Formular abschickt
• Das Formular selbst

Lass uns so ein einfaches HTML-Formular mal erstellen:

<form>
     <input type="text" name="userInput"
     <input type="submit">
</form>

Das wäre in etwa eines der kleinstmöglichen funktionierenden HTML-Formulare. Es sieht so aus:

Man hat ein Textfeld, in das man etwas eingeben kann. Einen Button, um das Formular abzuschicken. Und wenn man ihn klickt, wird der eingegebene Text an die aktuelle URL mit einem Fragezeichen angehängt. Man sieht das in der Adresszeile des Browsers:

Das Formular schickt die eingegebenen Daten also an sich selbst, lädt die Seite neu und hat die eingegebenen Daten dann in der URL gespeichert.

Nun lass uns unser Formular etwas verbessern und erweitern!

3. Bessere HTML-Formulare erstellen

In unser <form>-Tag können wir zwei relevante Attribute schreiben:

• action: bestimmt, wo die Daten hingesendet werden sollen
• method: bestimmt, ob die Daten mit der Methode GET oder POST geschickt werden

3.1 Das action-Attribut bei HTML-Formularen

Wenn dieses Attribut nicht gesetzt wird, schickt das Formular die eingegebenen Daten an die Unterseite, auf der es selbst ist. Wenn das Formular also auf index.html zu finden ist, dann schickt es die Daten an index.html weiter.

Sollen die Daten an eine andere Datei geschickt werden, muss das action-Attribut gesetzt werden. Das geht z.B. mit action=“auswertung.php“.

3.2 Das method-Attribut bei HTML-Formularen

Wird dieses Attribut nicht gesetzt, wird automatisch GET als Methode ausgewählt.

Was genau bedeutet GET und POST jetzt eigentlich?

• GET hängt die eingegebenen Daten einfach an die URL dran
• POST schickt sie „geheim“ und für den Nutzer unsichtbar weiter

In den meisten Fällen ist GET keine gute Idee, vor allem wenn es um sensible Daten geht. Wer freut sich schon darüber, wenn seine Kreditkarten-Daten über potentiell leicht überwachbare URLs verschickt werden? Da wird meistens POST die bessere Methode sein.

Und doch gibt es Fälle, wo GET Sinn macht. Beispielsweise wenn ein Passwort-zurücksetzen-Link per Email an Benutzer verschickt wird. Da ist meistens ein sehr langer Code am Ende der URL angehängt, der dann mit Hilfe von GET via PHP ausgelesen wird.

Aber wie das alles funktioniert, wirst du in den PHP-Tutorials früher oder später noch lernen.

3.3 Unser verbessertes <form>-Tag

Unser verbessertes <form>-Tag könnte nun im HTML-Code z.B. so aussehen:

<form method="post" action="auswerten.php">
    <input type="text" name="userInput">
    <input type="submit">
</form>

Nun werden die eingegebenen Daten via POST-Methode verschickt, was in den meisten Fällen sicherer ist.

Und die Auswertung der Daten erfolgt durch die auswerten.php, was schon realistischer ist.

Gleich vorweg: Mit HTML alleine kannst du eigentlich die eingegebenen Daten aus Formularen nicht wirklich auswerten oder irgendetwas damit machen. Da brauchst du dann PHP, bzw. geht es eingeschränkt auch mit JavaScript. Ein Grund mehr, auch diese beiden Programmiersprachen früher oder später zu lernen!

3.4 Unser eigener Text für den Submit-Button

„Daten absenden“ ist zwar durchaus ein akzeptabler Name für unseren Absenden-Button, aber da geht noch mehr.

Wenn wir ihm einen anderen Text geben wollen, geht das sehr einfach. Wir müssen einfach nur das value-Attribut des input-Elements mit dem type=“submit“ entsprechend setzen. Etwa so:

<input type="submit" value="Jetzt einloggen">

3.5 Ein Placeholder-Text für unser Text-Feld

Bevor der Benutzer einen Text in das Textfeld eingibt, können wir einen beschreibenden Text in hellgrau in das Textfeld setzen, um ihm zu helfen.

Diesen Text nennt man „placeholder“, und du kannst ihn wieder über ein Attribut setzen:

<input type="text" placeholder="Hier Text einfügen" name="userInput">

Warum war es eigentlich wichtig, das name-Attribut zu setzen?

Weil über das name-Attribut die Daten im Formular verschickt werden. Darum stand bei der angehängten URL am Ende vorher „?userInput=dfff“.

Wie sieht unser Formular nun mittlerweile aus?

Mit Hilfe von einem eingefügten <p>-Tags (=Absätzen) so:

4. War das alles zum HTML-Formulare erstellen?

Natürlich nicht! Aber weil es so viele Input-Möglichkeiten gibt, sind diese in ein eigenes Tutorial ausgelagert. Alles, was Styling usw. betrifft, kommt dann in den Tutorials über CSS vor.

Und wirklich nützlich werden HTML-Formulare natürlich erst dann, wenn wir die eingegebenen Daten auch auswerten und verwenden können.

Freu dich auf PHP und JavaScript – da wirds dann erst so richtig interessant!

Diskussion zum Tutorial