HTML: Formular erstellen - So gehts

Ein Formular ermöglicht es den Benutzern, Informationen einzugeben und an einen Server zu senden. Wir werden das Formularelement und verschiedene Formularelemente wie Textfelder, Auswahllisten und Schaltflächen verwenden. Also lass uns gleich loslegen!

Schritt 1: HTML-Grundstruktur erstellen
Öffne deinen bevorzugten HTML-Editor und erstelle ein neues HTML-Dokument. Beginne mit der Grundstruktur, indem du den HTML- und den Body-Tag öffnest und schließt.

<!DOCTYPE html>
<html>
<head>
    <title>Mein Formular</title>
</head>
<body>
</body>
</html>

Schritt 2: Formular-Element hinzufügen
Innerhalb des Body-Tags fügen wir das Formular-Element hinzu. Das Formular-Element wird verwendet, um alle Formularelemente zu gruppieren und dem Benutzer die Eingabe von Daten zu ermöglichen. Wir setzen die „action“ auf „#“ und die „method“ auf „POST“, damit das Formular an die aktuelle Seite gesendet wird.

<!DOCTYPE html>
<html>
<head>
    <title>Mein Formular</title>
</head>
<body>
    <form action="#" method="POST">
    </form>
</body>
</html>

Schritt 3: Textfeld hinzufügen
Innerhalb des Formular-Elements fügen wir nun ein Textfeld hinzu. Textfelder ermöglichen es dem Benutzer, Text einzugeben. Wir verwenden das „input“-Element mit dem Attribut „type“ auf „text“.

<!DOCTYPE html>
<html>
<head>
    <title>Mein Formular</title>
</head>
<body>
    <form action="#" method="POST">
        <input type="text" name="vorname" placeholder="Vorname">
    </form>
</body>
</html>

Schritt 4: Auswahlliste hinzufügen
Nun fügen wir eine Auswahlliste hinzu, mit der der Benutzer eine Option aus einer Dropdown-Liste auswählen kann. Wir verwenden das „select“-Element und fügen „option“-Elemente für jede Option hinzu.

<!DOCTYPE html>
<html>
<head>
    <title>Mein Formular</title>
</head>
<body>
    <form action="#" method="POST">
        <input type="text" name="vorname" placeholder="Vorname">
        <select name="land">
            <option value="de">Deutschland</option>
            <option value="at">Österreich</option>
            <option value="ch">Schweiz</option>
        </select>
    </form>
</body>
</html>

Schritt 5: Schaltfläche hinzufügen
Zum Schluss fügen wir eine Schaltfläche hinzu, mit der der Benutzer das Formular absenden kann. Wir verwenden das „input“-Element mit dem Attribut „type“ auf „submit“ und geben ihm einen entsprechenden Wert für den Button-Text.

<!DOCTYPE html>
<html>
<head>
    <title>Mein Formular</title>
</head>
<body>
    <form action="#" method="POST">
        <input type="text" name="vorname" placeholder="Vorname">
        <select name="land">
            <option value="de">Deutschland</option>
            <option value="at">Österreich</option>
            <option value="ch">Schweiz</option>
        </select>
        <input type="submit" value="Absenden">
    </form>
</body>
</html>

Ergebnis

Mein Formular

Herzlichen Glückwunsch! Du hast erfolgreich ein Formular in HTML erstellt. Denke daran, dass dies nur ein grundlegendes Beispiel ist und du weitere Formularelemente und Validierungen hinzufügen kannst, um das Formular an deine spezifischen Anforderungen anzupassen. Viel Spaß beim Coden!

Über Mich

Domi

Hi ich bin’s Dominik. Auf Blogseite.com findest du alles was mich interessiert. Mag Games, liebe SEO, programmiere gerne und möchte dir mit verschiedenen Themen die mich begeistern einen Mehrwert liefern. Viel Spaß auf meiner Seite

html formular