Menu
CoddyTech
Jetzt lernen

Buttons in Formularen

Teil des Abschnitts Grundlagen der HTML-Journey von Coddy. Lektion 45 von 60.

Schaltflächen spielen in Formularen eine wichtige Rolle, da sie dabei helfen, Daten zu übermitteln oder Felder zurückzusetzen. Sehen wir uns an, wie sie funktionieren:

Schaltfläche „Senden“:

<form>
	<input type="text" name="username" placeholder="Enter username">
	<button type="submit">Submit</button>
</form>
  • type="submit": Sendet die Formulardaten an den Server.

Zurücksetzen-Schaltfläche:

<form>
	<input type="text" name="name" value="John Doe">
	<button type="reset">Reset</button>
</form>
  • type="reset": Leert alle Felder und setzt sie auf ihre Standardwerte zurück.
challenge icon

Aufgabe

Einfach

Erstelle ein HTML-Dokument mit einem Formular, das verschiedene Schaltflächentypen enthält. Das Formular sollte die folgenden Elemente haben:

  1. Ein Texteingabefeld mit dem Namen "message" und einem Platzhalter mit dem Text "Enter your message".
  2. Füge eine Senden-Schaltfläche (<button type="submit">) mit dem Text "Send" hinzu.
  3. Füge eine Zurücksetzen-Schaltfläche (<button type="reset">) mit dem Text "Clear" hinzu.
  4. Füge eine Schaltfläche (<button>) mit dem Text "Click Me" und ohne type-Attribut hinzu. Innerhalb eines Formulars sendet eine Schaltfläche ohne type das Formular ebenfalls ab.

Probier es selbst

<!DOCTYPE html>
<html>
    <body>
        <!-- Schreibe hier Code -->
    </body>
</html>
quiz iconTeste dich selbst

Diese Lektion enthält ein kurzes Quiz. Starte die Lektion, um es zu beantworten und deinen Fortschritt zu speichern.

Alle Lektionen in Grundlagen

1HTML-Grundlagen

Was ist HTML?Grundstruktur von HTMLTags und ElementeVerschachtelung und schließende TagsKommentare in HTML

4Rezeptkarte

ProjektübersichtRezepttitel und BeschreibungProjekt-LektionZutatenProjekt-LektionSchritteProjekt-Lektion

7Persönliche Profilseite

ProjektübersichtHeader-BereichProjekt-LektionProfilbildProjekt-LektionÜber-mich-BereichProjekt-LektionSocial LinksProjekt-Lektion

10Tabellen

Tabellen-GrundlagenBeschriftungen hinzufügenZeilen und Spalten verbindenZusammenfassung - Tabellen

2Text und Formatierung

ÜberschriftenAbsätzeZeilenumbrücheFetter und kursiver TextNochmals fett und kursivWiederholung – Formatierung

5Inhalte hinzufügen

HTML-AttributeLinksLinks zu neuen SeitenBilderBild-Attribute

8Formulare und Eingaben Teil 1

Formular-GrundlagenTexteingabenInput-AttributePasswortfeldLabels für EingabenZusammenfassung – Einfaches Formular

11Event-Registrierungsseite

ProjektübersichtHeader-BereichProjekt-LektionEvent-Details-BereichProjekt-LektionRegistrierungsformularProjekt-LektionFooter-BereichProjekt-Lektion

3Arbeiten mit Listen

Ungeordnete ListeGeordnete ListeVerschachtelte ListenZusammenfassung – Listen

6Seitenlayout

Bereiche (Divisions)Inline-SpansSemantische TagsSections und ArticlesZusammenfassung – Layout

9Formulare und Eingaben Teil 2

Radio-ButtonsCheckboxenDropdownsButtonsButtons in FormularenWiederholung - Formulare #1Wiederholung - Formulare #2

12Abschlussherausforderungen

Einfache ProfilkarteEvent-EinladungskarteEinfache ArtikelseiteLieblingsbücher-Liste

Übe selbstständig: Web-Playground