HTML ändern · Anleitung

HTML Textfeld erstellen — input und textarea

Ein Feld, richtig gebaut

<label for="vorname">Vorname</label>
<input type="text" id="vorname" name="vorname" required>

Mehrzeilig

<label for="nachricht">Deine Nachricht</label>
<textarea id="nachricht" name="nachricht" rows="5"></textarea>

Zwei Fallstricke auf einmal: <input> wird nicht geschlossen — es gibt kein </input>. <textarea> muss geschlossen werden, und zwar direkt: Alles zwischen den Tags erscheint als vorhandener Inhalt im Feld. Ein Zeilenumbruch dazwischen ergibt eine leere Zeile im Feld.

label ist keine Zierde

Die Verknüpfung läuft über zwei Angaben, die denselben Wert haben müssen: for am Label und id am Feld. Das bringt drei Dinge:

• Screenreader lesen den Feldnamen vor. Ohne Label hört jemand nur „Eingabefeld" und weiß nicht, was hineingehört.
• Ein Klick auf den Text setzt den Cursor ins Feld. Das vergrößert die Trefffläche erheblich — besonders auf dem Handy.
• Die Bezeichnung bleibt sichtbar, auch wenn schon etwas im Feld steht.

Der Platzhalter ist kein Ersatz dafür

<!-- schlecht: Bezeichnung nur im Platzhalter -->
<input type="text" placeholder="Vorname">

<!-- gut: Label sichtbar, Platzhalter als Beispiel -->
<label for="tel">Telefon</label>
<input type="tel" id="tel" name="tel" placeholder="030 12345678">

Ein Platzhalter verschwindet beim Tippen. Wer nach der Hälfte unterbrochen wird, sieht nicht mehr, was in das Feld gehörte. Dazu ist er meist hellgrau und damit kontrastschwach.

Die Regel: Das Label sagt, was gebraucht wird. Der Platzhalter zeigt ein Beispiel für das Format. Er ersetzt das Label nie.

Der Feldtyp entscheidet über die Handy-Tastatur

Das ist der am meisten unterschätzte Punkt bei Formularen. type ändert, welche Tastatur auf dem Handy erscheint:

Nimm type="email", wo eine E-Mail-Adresse hingehört. Der Browser prüft dann grob das Format, und auf dem Handy erscheint eine Tastatur mit @-Zeichen. Das kostet nichts und senkt die Abbruchquote.

type="number" nicht für Telefonnummern. Es akzeptiert nur echte Zahlen und wirft führende Nullen weg — aus „030…" wird „30…". Für Telefonnummern ist type="tel" richtig, denn eine Nummer ist keine Zahl, mit der man rechnet.

Pflichtfelder und Prüfung ohne JavaScript

<label for="mail">E-Mail</label>
<input type="email" id="mail" name="mail"
       required
       maxlength="254"
       autocomplete="email">

autocomplete ist ein echter Gewinn. Mit autocomplete="email", "name" oder "tel" füllt der Browser das Feld mit einem Tipp aus den gespeicherten Daten. Auf dem Handy ist das der Unterschied zwischen einem Tipp und dreißig.

Prüfung im Browser ist Bequemlichkeit, keine Sicherheit. required und pattern lassen sich umgehen. Wer Daten entgegennimmt, muss sie auf dem Server erneut prüfen. Für ein Formular bei einem Dienstleister — Newsletter-Tool, Formular-Anbieter — übernimmt das der Anbieter.

Wohin gehen die Daten?

Ein Feld allein sammelt nichts. Es braucht ein <form> darum und eine Stelle, die die Daten annimmt:

<form action="https://anbieter.example/annehmen" method="post">
  <label for="mail">E-Mail</label>
  <input type="email" id="mail" name="mail" required>
  <button type="submit">Anmelden</button>
</form>

Und hier die ehrliche Einordnung: Eine reine HTML-Datei kann keine Daten entgegennehmen. Sie braucht immer einen Dienst, der das übernimmt — dein Newsletter-Tool, ein Formular-Anbieter, eine Buchungssoftware.

Der einfachere Weg für Solo-Selbstständige: Nimm den fertigen Einbettungs-Code deines Newsletter-Tools statt ein Formular selbst zu bauen. Dann kümmert sich der Anbieter um Annahme, Bestätigungsmail und Speicherung. Wie das Einbetten geht, steht auf iframe einbetten.

name ist entscheidend, nicht id. Gesendet wird nur, was ein name-Attribut hat. Die id dient der Verknüpfung mit dem Label. Fehlt name, ist das Feld beim Empfänger einfach nicht da — ein Fehler, der lange unbemerkt bleibt, weil das Formular scheinbar funktioniert.

Felder ansehnlich machen

input, textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #ddd;
  border-radius: 10px;
  font-size: 16px;        /* wichtig, siehe unten */
  font-family: inherit;   /* sonst nimmt der Browser eine andere Schrift */
}
input:focus, textarea:focus {
  outline: 2px solid #7c5cff;
  outline-offset: 1px;
}
textarea { resize: vertical; }

font-size: 16px ist kein Geschmack, sondern nötig. Bei kleinerer Schrift zoomt Safari auf dem iPhone beim Antippen automatisch in die Seite hinein — das Layout springt, und der Besucher muss zurückzoomen. Ab 16 Pixel passiert das nicht.

Und outline beim Fokus nicht entfernen. Wer mit der Tastatur navigiert, sieht ohne diese Markierung nicht, in welchem Feld er ist. Ersetzen ist in Ordnung, weglassen nicht.

Und ohne Code?

Hier gilt eine klare Grenze, die ich offen sage: Formulare zu bauen ist nicht PageFix' Aufgabe. Ein neues Feld, ein neues Formular, die Verbindung zum Newsletter-Tool — das baut deine KI in einem Prompt, oder du nimmst den Einbettungs-Code deines Anbieters.

PageFix ist ein deutschsprachiger Web-Editor für KI-gebaute HTML-Seiten: Texte, Schriften, Farben, Bilder, Links, Videos und die Reihenfolge von Abschnitten. Einmalzahlung von 49 €, kein Abo.

Häufige Fragen

Zuletzt aktualisiert: 12. September 2026

← Zurück zur Startseite und PageFix ansehen