Erstellen von Schaltflächen mit HTML-Eingabe-Tags in Formularen

Erstellen Sie anpassbare Textschaltflächen in HTML Verwendung der Eingang Etikett. Das Eingang Element wird innerhalb von a. verwendet bilden Element.

Durch Einstellen der AttributArt to "button", erzeugt eine einfache anklickbare Schaltfläche. Sie können den Text definieren, der auf der Schaltfläche angezeigt wird, z. B. "Senden", indem Sie die Wert Attribut. Beispielsweise:


Das Eingang -Tag sendet kein HTML-Formular; du musst einschließen JavaScript um die Formulardatenübermittlung abzuwickeln. Ohne JavaScript onclick Ereignis erscheint die Schaltfläche anklickbar, aber es passiert nichts, und Sie haben Ihre Leser frustriert.

Die 'Button'-Tag-Alternative

Obwohl die Eingang Tag zum Erstellen einer Schaltfläche funktioniert für seinen Zweck, es ist eine bessere Option, das zu verwenden use Taste -Tag, um die HTML-Schaltflächen Ihrer Website zu erstellen. Das Taste -Tag ist flexibler, da Sie Bilder für die Schaltfläche verwenden können (was Ihnen hilft, die visuelle Konsistenz zu bewahren, wenn Ihr Website hat ein Designthema) und kann als Schaltfläche zum Senden oder Zurücksetzen definiert werden, ohne dass zusätzliche Elemente erforderlich sind JavaScript.

instagram viewer

Geben Sie die Schaltfläche an Art Attribut in jedem Taste Stichworte. Es gibt drei verschiedene Arten:

  • Taste:Die Schaltfläche hat kein inhärentes Verhalten, wird jedoch in Verbindung mit clientseitig ausgeführten Skripten verwendet, die an die Schaltfläche angehängt und beim Klicken ausgeführt werden können.
  • zurücksetzen: Setzt alle Werte zurück.
  • einreichen: Die Schaltfläche sendet Formulardaten an den Server (dies ist der Standardwert, wenn kein Typ definiert ist).

Weitere Attribute sind:

  • Name: Gibt der Schaltfläche einen Referenznamen.
  • Wert: Gibt einen Wert an, der der Schaltfläche anfänglich zugewiesen werden soll.
  • deaktivieren: Schaltet die Taste aus.

Mit Knöpfen weiter gehen

HTML5 fügt dem. zusätzliche Attribute hinzu Taste Tag, das seine Funktionalität erweitert.

  • Autofokus: Wenn die Seite geladen wird, legt diese Option fest, dass diese Schaltfläche der Fokus ist. Auf einer Seite kann nur ein Autofokus verwendet werden.
  • bilden: Ordnet die Schaltfläche einem bestimmten Formular innerhalb desselben HTML-Dokuments zu, wobei der Bezeichner des Formulars als Wert verwendet wird.
  • Formation: Nur verwendet mit type="senden" und einer URL als Wert gibt er an, wohin Formulardaten gesendet werden. Oft ist das Ziel ein PHP-Skript oder ähnliches,
  • Formentyp: Nur verwendet mit type="senden" Attribut. Definiert, wie Formulardaten beim Senden an den Server codiert werden sollen. Die drei Werte sind application/x-www-form-urlencoded (Standard), mehrteilige/Formulardaten, und Text/einfach.
  • formmethode: Nur verwendet mit type="senden" Attribut. Dies gibt an, welche HTTP-Methode beim Senden von Formulardaten verwendet werden soll, entweder erhalten oder Post.
  • formnovalidate: Nur verwendet mit type="senden" Attribut. Formulardaten werden beim Senden nicht validiert.
  • Formularziel: Nur verwendet mit type="senden" Attribut. Dies gibt an, wo die Site-Antwort angezeigt werden soll, wenn Formulardaten gesendet werden, z. B. in einem neuen Fenster usw. Die Wertoptionen sind entweder_leer, _selbst, _Elternteil, _oben, oder einen bestimmten Rahmennamen.

Lesen Sie mehr über Erstellen von Schaltflächen in HTML-Formularen, und wie Sie Ihre Website benutzerfreundlicher machen.