Buttons in Formularen
Teil des Abschnitts Grundlagen 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-Schaltfläche:
<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": Löscht alle Felder und setzt sie auf ihre Standardwerte zurück.
Aufgabe
EinfachErstelle ein HTML-Dokument, das ein Formular mit verschiedenen Schaltflächentypen enthält. Das Formular sollte die folgenden Elemente haben:
- Ein Texteingabefeld mit dem Namen "message" und einem Platzhalter mit dem Text "Enter your message".
- Füge eine Absenden-Schaltfläche (
<button type="submit">) mit dem Text "Send" hinzu. - Füge eine Zurücksetzen-Schaltfläche (
<button type="reset">) mit dem Text "Clear" hinzu. - Füge eine allgemeine Schaltfläche (
<button>) mit dem Text "Click Me" hinzu.
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 Grundlagen
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Übe selbstständig: Web-Playground