Buttons in Formularen
Teil des Abschnitts Fundamentals der HTML-Journey von Coddy — Lektion 45 von 60.
Buttons spielen eine Schlüsselrolle in Formularen, wo sie dabei helfen, Daten zu übermitteln oder Felder zurückzusetzen. Schauen wir uns an, wie sie funktionieren:
Absende-Button:
<form>
<input type="text" name="username" placeholder="Enter username">
<button type="submit">Submit</button>
</form>
type="submit": Sendet die Formulardaten an den Server.
Reset-Button:
<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.
Aufgabe
EinfachErstellen Sie ein HTML-Dokument, das ein Formular mit verschiedenen Arten von Schaltflächen enthält. Das Formular sollte die folgenden Elemente enthalten:
- Ein Texteingabefeld mit dem Namen "message" und einem Platzhalter, der "Enter your message" lautet.
- Fügen Sie eine Absendeschaltfläche (
<button type="submit">) mit dem Text "Send" hinzu. - Fügen Sie eine Reset-Schaltfläche (
<button type="reset">) mit dem Text "Clear" hinzu. - Fügen Sie eine allgemeine Schaltfläche (
<button>) mit dem Text "Click Me" hinzu.
Spickzettel
Schaltflächen in Formularen haben verschiedene Typen für spezifische Funktionen:
Submit-Button:
<button type="submit">Submit</button>type="submit": Sendet die Formulardaten an den Server
Reset-Button:
<button type="reset">Reset</button>type="reset": Leert alle Felder und setzt sie auf ihre Standardwerte zurück
Generischer Button:
<button>Click Me</button>- Standard-Button ohne spezifisches Formularverhalten
Probier es selbst
<!DOCTYPE html>
<html>
<body>
<!-- Hier Code schreiben -->
</body>
</html>
Teste dich selbstDiese Lektion enthält ein kurzes Quiz. Starte die Lektion, um es zu beantworten und deinen Fortschritt zu speichern.
Alle Lektionen in Fundamentals
2Text und Formatierung
ÜberschriftenAbsätzeZeilenumbrücheFetter und kursiver TextNochmals fett und kursivWiederholung – Formatierung8Formulare und Eingaben Teil 1
Formular-GrundlagenTexteingabenInput-AttributePasswortfeldLabels für EingabenZusammenfassung – Einfaches Formular11Event-Registrierungsseite
ProjektübersichtHeader-Bereich
Event-Details-BereichRegistrierungsformularFooter-Bereich6Seitenlayout
Bereiche (Divisions)Inline-SpansSemantische TagsSections und ArticlesZusammenfassung – Layout9Formulare und Eingaben Teil 2
Radio-ButtonsCheckboxenDropdownsButtonsButtons in FormularenWiederholung - Formulare #1Wiederholung - Formulare #212Abschlussherausforderungen
Einfache ProfilkarteEvent-EinladungskarteEinfache ArtikelseiteLieblingsbücher-Liste