HTML-Formularelement <form>

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;
}

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 Attribut accept für <input type=file>-Elemente.

accept-charset

Die vom Server akzeptierte Zeichenkodierung. Die Spezifikation erlaubt einen einzelnen Wert ohne Beachtung der Groß- und Kleinschreibung, "UTF-8", was die weite 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, auf welche Weise. Weitere Informationen finden Sie auf der Seite zum globalen Attribut autocapitalize.

autocomplete

Gibt an, ob Eingabeelemente ihre Werte standardmäßig automatisch durch den Browser vervollständigen lassen können. autocomplete-Attribute auf Formularelementen überschreiben es auf <form>. Mögliche Werte:

• off: Der Browser darf Einträge nicht automatisch vervollständigen. (Browser ignorieren dies bei vermuteten Anmeldeformularen häufig; siehe Autofill für Anmeldefelder verwalten.)
• on: Der Browser darf Einträge automatisch vervollständigen.

name

Der Name des Formulars. Der Wert darf nicht die leere Zeichenkette sein und muss unter den form-Elementen in der Formularsammlung, der es gegebenenfalls angehört, eindeutig sein. Der Name wird zu einer Eigenschaft der Objekte Window, Document und document.forms, die eine Referenz auf das Formularelement enthält.

rel

Steuert die Anmerkungen und welche Arten von Links das Formular erstellt. Zu den Anmerkungen gehören external, nofollow, opener, noopener und noreferrer. Zu den Linktypen gehören help, prev, next, search und license. Der Wert von rel ist eine durch Leerzeichen getrennte Liste dieser aufgezählten Werte.

Attribute für die Formularübermittlung

Die folgenden Attribute steuern das Verhalten bei der Formularübermittlung.

action

Die URL, welche die Formularübermittlung verarbeitet. Dieser Wert kann durch ein Attribut formaction auf 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 Attributs method 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 Attribute formenctype auf <button>-, <input type="submit">- oder <input type="image">-Elementen überschrieben werden.

method

Die HTTP-Methode, mit der das Formular übermittelt wird. Die einzigen erlaubten Methoden/Werte sind (Groß- und Kleinschreibung wird nicht berücksichtigt):

• post: Die Methode POST; Formulardaten werden als Request-Body gesendet.
• get (Standard): Die Methode GET; Formulardaten werden mit einem ? als Trennzeichen an die action-URL angehängt. Verwenden Sie diese Methode, wenn das Formular keine Nebenwirkungen hat.
• dialog: Wenn sich das Formular innerhalb eines <dialog> befindet, wird der Dialog geschlossen und bei der Übermittlung ein submit-Ereignis ausgelöst, ohne Daten zu übermitteln oder das Formular zu leeren.

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

novalidate

Dieses boolesche Attribut gibt an, dass das Formular bei der Übermittlung nicht validiert werden soll. Wenn dieses Attribut nicht gesetzt ist (und das Formular daher validiert wird), kann es durch ein Attribut formnovalidate auf einem zum Formular gehörenden <button>-, <input type="submit">- oder <input type="image">-Element überschrieben werden.

target

Gibt an, wo die Antwort nach der Formularübermittlung angezeigt werden soll. Es ist ein Name/Schlüsselwort für einen Browsing-Kontext (beispielsweise einen Tab, ein Fenster oder ein iframe). Die folgenden Schlüsselwörter haben besondere Bedeutungen:

• _self (Standard): Im selben Browsing-Kontext wie dem aktuellen laden.
• _blank: In einem neuen unbenannten Browsing-Kontext laden. Dies bietet dasselbe Verhalten wie das Setzen von rel="noopener", wodurch window.opener nicht gesetzt wird.
• _parent: Im übergeordneten Browsing-Kontext des aktuellen laden. Wenn kein übergeordneter Kontext vorhanden ist, verhält es sich wie _self.
• _top: Im Browsing-Kontext der obersten Ebene laden (d.h. im Browsing-Kontext, der ein Vorfahr des aktuellen ist und keinen übergeordneten Kontext hat). Wenn kein übergeordneter Kontext vorhanden ist, verhält es sich wie _self.
• _unfencedTop: Die Antwort eines Formulars innerhalb eines eingebetteten Fenced Frame im Frame der obersten Ebene laden (d.h. über die Wurzel des Fenced Frame hinausgehend, anders als bei anderen reservierten Zielen). Nur innerhalb von Fenced Frames verfügbar.

Dieser Wert kann durch ein Attribut formtarget auf 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

• Leitfaden zu HTML-Formularen
• 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 abrufen: HTMLFormElement.elements
• ARIA: Form-Rolle
• ARIA: Suchrolle