<form> HTML-Formular-Element

Probieren Sie es aus

<form action="" method="get" class="form-example">
  <div class="form-example">
    <label for="name">Enter your name: </label>
    <input type="text" name="name" id="name" required />
  </div>
  <div class="form-example">
    <label for="email">Enter your email: </label>
    <input type="email" name="email" id="email" required />
  </div>
  <div class="form-example">
    <input type="submit" value="Subscribe!" />
  </div>
</form>

form.form-example {
  display: table;
}

div.form-example {
  display: table-row;
}

label,
input {
  display: table-cell;
  margin-bottom: 10px;
}

label {
  padding-right: 10px;
}

Es ist möglich, die CSS :valid und :invalid Pseudoklassen zu verwenden, um ein <form>-Element basierend darauf zu stylen, ob die elements innerhalb des Formulars gültig sind.

Attribute

Dieses Element enthält die globalen Attribute.

accept

Durch Kommas getrennte Inhaltstypen, die der Server akzeptiert.

Hinweis: Dieses Attribut ist veraltet und sollte nicht verwendet werden. Verwenden Sie stattdessen das accept-Attribut für <input type=file>-Elemente.

accept-charset

Die von dem Server akzeptierte Zeichenkodierung. Die Spezifikation erlaubt einen einzelnen, nicht großgeschriebenen Wert von "UTF-8", der die allgemeine Verbreitung dieser Kodierung widerspiegelt (historisch konnten mehrere Zeichenkodierungen als durch Kommas oder Leerzeichen getrennte Liste angegeben werden).

autocapitalize

Steuert, ob eingegebener Text automatisch großgeschrieben wird und, falls ja, in welcher Weise. Weitere Informationen finden Sie auf der globalen Attributseite für autocapitalize.

autocomplete

Gibt an, ob Eingabefelder standardmäßig automatisch von dem Browser vervollständigt werden können. autocomplete-Attribute an Formularelementen überschreiben es in <form>. Mögliche Werte:

• off: Der Browser sollte Eingaben nicht automatisch vervollständigen. (Browser neigen dazu, dies bei vermuteten Anmeldeformularen zu ignorieren; siehe Verwalten des Autofills für Anmeldefelder.)
• on: Der Browser kann Eingaben automatisch vervollständigen.

name

Der Name des Formulars. Der Wert darf nicht leer sein und muss innerhalb der Formulare in der Formsammlung eindeutig sein, falls vorhanden. Der Name wird zu einer Eigenschaft des Window-, Document- und document.forms-Objekts, welche eine Referenz auf das Formularelement enthält.

rel

Steuert die Annotationen und welche Art von Links das Formular erstellt. Annotationen umfassen external, nofollow, opener, noopener und noreferrer. Linktypen umfassen help, prev, next, search und license. Der rel-Wert ist eine durch Leerzeichen getrennte Liste dieser enumerierten Werte.

Attribute für die Formularübermittlung

Die folgenden Attribute steuern das Verhalten während der Formularübermittlung.

action

Die URL, die die Formularübermittlung verarbeitet. Dieser Wert kann durch ein formaction-Attribut an einem <button>, <input type="submit"> oder <input type="image">-Element überschrieben werden. Dieses Attribut wird ignoriert, wenn method="dialog" gesetzt ist.

enctype

Wenn der Wert des method-Attributs post ist, ist enctype der MIME-Typ der Formularübermittlung. Mögliche Werte:

• application/x-www-form-urlencoded: Der Standardwert.
• multipart/form-data: Verwenden Sie dies, wenn das Formular <input>-Elemente mit type=file enthält.
• text/plain: Nützlich für Debugging-Zwecke.

Dieser Wert kann durch formenctype-Attribute an <button>, <input type="submit"> oder <input type="image">-Elementen überschrieben werden.

method

Die HTTP-Methode zur Übermittlung des Formulars. Die einzig erlaubten Methoden/Werte sind (groß-/kleinschreibungsunabhängig):

• post: Die POST-Methode; Formulardaten werden als Anforderungskörper gesendet.
• get (standardmäßig): Die GET-Methode; Formulardaten werden mit einem ?-Separator an die action-URL angehängt. Verwenden Sie diese Methode, wenn das Formular keine Nebenwirkungen hat.
• dialog: Wenn sich das Formular in einem <dialog> befindet, schließt es den Dialog und löst bei Übermittlung ein submit-Ereignis aus, ohne Daten zu übermitteln oder das Formular zu leeren.

Dieser Wert wird durch formmethod-Attribute an <button>, <input type="submit"> oder <input type="image">-Elementen überschrieben.

novalidate

Dieses Boolean-Attribut gibt an, dass das Formular beim Absenden nicht validiert werden soll. Wenn dieses Attribut nicht gesetzt ist (und daher das Formular validiert wird), kann es durch ein formnovalidate-Attribut an einem <button>, <input type="submit"> oder <input type="image">-Element, das zu dem Formular gehört, überschrieben werden.

target

Gibt an, wo die Antwort nach dem Absenden des Formulars angezeigt werden soll. Es ist ein Name/Schlüsselwort für einen Browsing-Kontext (z.B. Registerkarte, Fenster oder iframe). Die folgenden Schlüsselwörter haben spezielle Bedeutungen:

• _self (standardmäßig): In den gleichen Browsing-Kontext wie den aktuellen laden.
• _blank: In einen neuen, unbenannten Browsing-Kontext laden. Dies ermöglicht das gleiche Verhalten wie das Setzen von rel="noopener", das window.opener nicht setzt.
• _parent: In den übergeordneten Browsing-Kontext des aktuellen laden. Wenn kein übergeordneter Kontext vorhanden ist, verhält es sich wie _self.
• _top: In den obersten Browsing-Kontext laden (d.h. den Browsing-Kontext, der ein Vorfahre des aktuellen ist und keinen übergeordneten Kontext hat). Wenn kein übergeordneter Kontext vorhanden ist, verhält es sich wie _self.
• _unfencedTop: Lädt die Antwort aus einem Formular innerhalb eines eingebetteten abgegrenzten Rahmens in den obersten Rahmen (d.h. über die Wurzel des abgegrenzten Rahmens hinausgehend, anders als andere reservierte Ziele). Nur innerhalb von abgegrenzten Rahmen verfügbar.

Dieser Wert kann durch ein formtarget-Attribut an einem <button>, <input type="submit"> oder <input type="image">-Element überschrieben werden.

Beispiele

<!-- Form which will send a GET request to the current URL -->
<form method="get">
  <label>
    Name:
    <input name="submitted-name" autocomplete="name" />
  </label>
  <button>Save</button>
</form>

<!-- Form which will send a POST request to the current URL -->
<form method="post">
  <label>
    Name:
    <input name="submitted-name" autocomplete="name" />
  </label>
  <button>Save</button>
</form>

<!-- Form with fieldset, legend, and label -->
<form method="post">
  <fieldset>
    <legend>Do you agree to the terms?</legend>
    <label><input type="radio" name="radio" value="yes" /> Yes</label>
    <label><input type="radio" name="radio" value="no" /> No</label>
  </fieldset>
</form>

Ergebnis

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

• HTML Formular-Leitfaden
• Andere Elemente, die beim Erstellen von Formularen verwendet werden: <button>, <datalist>, <fieldset>, <input>, <label>, <legend>, <meter>, <optgroup>, <option>, <output>, <progress>, <select>, <textarea>.
• Eine Liste der Elemente im Formular erhalten: HTMLFormElement.elements
• ARIA: Formularrolle
• ARIA: Suchrolle