Formulare und Schaltflächen in HTML

Hinweis: Der Inhalt dieses Artikels ist derzeit unvollständig, entschuldigen Sie bitte! Wir arbeiten hart daran, den Abschnitt MDN Lernen Webentwicklung zu verbessern, und werden die als unvollständig gekennzeichneten Bereiche ("TODO") bald abschließen.

HTML-Formulare und Schaltflächen sind leistungsstarke Werkzeuge zur Interaktion mit Benutzern — sie werden am häufigsten zum Sammeln von Daten von Benutzern oder zur Steuerung einer Benutzeroberfläche verwendet. In diesem Artikel bieten wir eine Einführung in die Grundlagen von Formularen und Schaltflächen.

Voraussetzungen: Grundkenntnisse in HTML, wie sie in Grundlegende HTML-Syntax behandelt werden. Semantik auf Textebene wie Überschriften und Absätze und Listen. Strukturelles HTML.
Lernziele:
  • Ein Verständnis dafür, dass Formulare und Schaltflächen, zusammen mit Links, die wichtigsten Werkzeuge sind, damit Benutzer mit einer Webseite interagieren können.
  • Die allgemeinen Arten von <button>: button, submit und reset.
  • Gängige <input> Typen: text, number, file, checkbox, radio, password und search.
  • Gängige Attribute wie name und value.
  • Formulare zugänglich machen — korrekte Semantik, das <label>-Element und das for-Attribut.
  • Weitere Steuerungstypen: <textarea>, <select> und <option>.
  • Grundlagen der Client-seitigen Validierung — required, min, max, minlength, maxlength und pattern.
  • Das <form>-Element und die Grundlagen der Formularübermittlung.

Hinweis: Es gibt viele Eingabetypen und Formularfunktionen, die hier nicht explizit erwähnt werden; der Zweck ist, eine gute allgemeine Einführung in Schaltflächen und Formularelemente zu geben und die häufigsten Fälle zu lernen. Die fortgeschrittenen/spezialisierten Fälle können nach Bedarf als Teil des ständigen Lernens eines Webentwicklers im Laufe seiner Karriere studiert werden.

Schaltflächen

TODO

Gängige Eingabetypen

TODO

Zugängliche Formulare

  • Zurückgehend auf das Argument für semantisches HTML (siehe auch 2.2 Gute Dokumentstruktur), sollten Sie verstehen, warum es wichtig ist, das richtige Element für die richtige Aufgabe zu verwenden. Zum Beispiel verwenden Sie ein <button>, um Ihr Formular zu übermitteln, und nicht ein <div>, das programmiert ist, sich wie ein <button> zu verhalten.
  • Verstehen Sie die von Haus aus in <button>s und Formularelementen von Browsern programmierten Funktionen und wie wichtig sie sind. Beispiele sind Tastaturzugänglichkeit, Fokusumrisse und semantische Bedeutung für AT zur Identifizierung der Elemente und zur Kommunikation ihrer Bedeutung.

Andere Steuerungstypen

TODO

Client-seitige Formularvalidierung

Client-seitige Formularvalidierung ist wirklich eine Verbesserung der Benutzerfreundlichkeit, die zusammen mit der serverseitigen Formularvalidierung verwendet werden sollte. Sie ist kein Ersatz dafür.

Das <form>-Element

TODO

Testen Sie Ihre Fähigkeiten!

TODO

Zusammenfassung

Das war's für den Moment. Wir haben Bilder und Bildunterschriften ausführlich behandelt. Im nächsten Artikel gehen wir einen Schritt weiter und betrachten, wie man HTML verwendet, um Video- und Audiodateien in Webseiten einzubetten.

Siehe auch