Über 42 Generatoren mit Live-Vorschau, Copy- und Download-Button. Klick dich durch die Optionen, der HTML-Code wird sofort erzeugt.
Formulareingaben (Input)
- Text Mit diesem Generator erzeugst du ein einzeiliges Texteingabefeld (<input type="text">) – inklusive aller HTML5-Attribute wie placeholder, maxlength, pattern oder required.
- URL Erzeugt ein Eingabefeld speziell für URLs (<input type="url">). Browser validieren die Eingabe automatisch auf eine gültige URL.
- Passwort Sicheres Passwort-Eingabefeld. Die Eingabe wird durch Punkte verdeckt.
- E-Mail Eingabefeld speziell für E-Mail-Adressen mit automatischer Validierung des Formats.
- Search Eingabefeld für Suchanfragen. Browser zeigen einen kleinen X-Button zum Leeren.
- Color Öffnet einen nativen Farbwähler des Betriebssystems. Liefert Hex-Werte (z.B. #3366ff).
- Time Eingabe einer Uhrzeit (Stunden:Minuten, optional Sekunden via step).
- Telefon Eingabe einer Telefonnummer. Mobile Browser zeigen ein Ziffern-Keypad.
- Number Eingabe einer Zahl mit Auf-/Ab-Pfeilen und optionalen Grenzen.
- Range (Slider) Schieberegler-Eingabe für numerische Werte zwischen min und max.
- Checkbox Eine an-/abwählbare Checkbox – ideal für Mehrfachauswahlen.
- Radio Button Radio Buttons gruppieren mehrere Optionen, von denen genau eine gewählt werden kann (gleicher name).
- Textarea Mehrzeiliges Texteingabefeld mit anpassbarer Größe.
- File Upload Datei-Upload-Feld mit optionaler Filterung der Dateitypen.
- Date Native Datumsauswahl mit Kalender-Popup im Browser.
- Submit Button Klickbarer Button, der ein Formular absendet.
- Select / Dropdown Klassisches Dropdown-Menü zur Auswahl einer Option.
Medien
Text-Formatierung
- Bold / Fett Hebt Text fett hervor. <strong> ist semantisch (Wichtigkeit), <b> rein optisch.
- Italic / Kursiv Stellt Text kursiv dar. <em> betont semantisch, <i> nur optisch (z.B. Fachbegriffe, Fremdsprache).
- Underlined / Unterstrichen Unterstreicht Text – sparsam einsetzen, da unterstrichener Text leicht mit Links verwechselt wird.
- Strikethrough / Durchgestrichen Streicht Text durch. <s> = nicht mehr zutreffend, <del> = gelöscht (mit Versionierung).
- Heading / Überschrift Überschriften strukturieren Inhalte – pro Seite genau ein <h1>, untergeordnete h2-h6 hierarchisch.
- Abkürzung (abbr) Markiert eine Abkürzung. Beim Hover wird der vollständige Text als Tooltip angezeigt.
- Sup / Sub Für mathematische, chemische oder typografische Notation.
- Marked / Highlight Hebt Text wie mit einem Textmarker hervor – z.B. Suchtreffer.
- Cite / Werktitel Markiert den Titel eines Werks (Buch, Film, Song …). Wird kursiv dargestellt.
- Zitat (quote/blockquote) Zitate können inline (<q>) oder als Block (<blockquote>) ausgezeichnet werden.
- Code-Styled Mehrere Tags für Code-, Tasteneingabe- und Programm-Output.
- BDO / Laufrichtung Erzwingt die Schreibrichtung (z.B. RTL für arabisch, LTR-Ausnahme).
Struktur & Listen
- Liste (UL) Aufzählungsliste mit Bullet-Points (Punkte). Pro Zeile ein Eintrag.
- Liste (OL) Sortierte Liste mit Nummerierung – auch römisch oder mit Buchstaben.
- Definitionsliste (DL) Ideal für Glossare, Metadaten oder Frage-Antwort-Paare.
- Tabelle Einfache Daten-Tabelle. Spalten getrennt mit Pipe (|), Zeilen getrennt mit Zeilenumbruch.
- Button Flexibler als <input type="submit">: erlaubt Icons + Text, mehrere Zeilen Inhalt.
- Details / Summary Natives Akkordeon-Element ohne JavaScript. Klick auf das <summary> öffnet/schließt den Inhalt.
- Iframe Bettet eine externe Seite (z.B. YouTube, Google Maps) ein.
- Progress Bar Native Fortschrittsanzeige – z.B. Upload, Download, Aufgaben.
- Meter Anders als <progress> für absolute Messwerte mit definiertem Min/Max-Bereich.