`<form>`: Das Formularelement

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 :valid und :invalid CSS-Pseudoklassen zu verwenden, um ein <form>-Element basierend darauf zu stylen, ob die elements innerhalb des Formulars gültig sind.

Attribute

Dieses Element umfasst die globalen Attribute.

accept Veraltet

Komma-separierte Inhaltstypen, die der Server akzeptiert.

Hinweis: Dieses Attribut ist veraltet und sollte nicht verwendet werden. Stattdessen verwenden Sie das accept-Attribut auf <input type=file>-Elementen.

accept-charset

Die vom Server akzeptierte Zeichenkodierung. Die Spezifikation erlaubt einen einzigen, nicht fallabhängigen Wert von "UTF-8", der die Allgegenwärtigkeit dieser Kodierung widerspiegelt (historisch konnten mehrere Zeichenkodierungen als durch Kommas oder Leerzeichen getrennte Liste angegeben werden).

autocapitalize

Kontrolliert, ob eingegebener Text automatisch großgeschrieben wird und, falls ja, auf welche Weise. Weitere Informationen finden Sie auf der Seite des globalen Attributs autocapitalize.

autocomplete

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

• off: Der Browser darf Einträge nicht automatisch vervollständigen. (Browser neigen dazu, dies bei vermuteten Anmeldeformularen zu ignorieren; siehe Verwalten der automatischen Vervollständigung für Anmeldefelder.)
• on: Der Browser darf Einträge automatisch vervollständigen.

name

Der Name des Formulars. Der Wert darf nicht die leere Zeichenkette sein und muss innerhalb der Formularsammlung, in der er sich befindet, eindeutig sein, sofern vorhanden. Der Name wird eine Eigenschaft der Window-, Document- und document.forms-Objekte, die eine Referenz auf das Formularelement enthält.

rel

Kontrolliert die Annotationen und welche Arten von Links das Formular erstellt. Zu den Annotationen gehören 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 bei der Formularübermittlung.

action

Die URL, die das Formular verarbeitet. Dieser Wert kann durch ein formaction-Attribut 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 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 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 (nicht fallabhängig):

• post: Die POST-Methode; Formulardaten werden als Request-Body gesendet.
• get (Standard): Die GET; Formulardaten werden mit einem ?-Separator an die action-URL angehängt. Verwenden Sie diese Methode, wenn das Formular keine Seiteneffekte hat.
• dialog: Wenn sich das Formular innerhalb eines <dialog> befindet, schließt es das Dialogfeld und löst ein submit-Ereignis beim Übermitteln aus, ohne Daten zu übermitteln oder das Formular zu leeren.

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

novalidate

Dieses boolesche Attribut zeigt an, dass das Formular beim Übermitteln nicht validiert werden soll. Wenn dieses Attribut nicht gesetzt ist (und das Formular wird deshalb validiert), kann es durch ein formnovalidate-Attribut auf einem <button>, <input type="submit"> oder <input type="image"> Element des Formulars ü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 (z.B. Tab, Fenster oder iframe). Die folgenden Schlüsselwörter haben spezielle Bedeutungen:

• _self (Standard): Lädt in denselben Browsing-Kontext wie den aktuellen.
• _blank: Lädt in einen neuen, unbenannten Browsing-Kontext. Dies bietet dasselbe Verhalten wie das Setzen von rel="noopener", das window.opener nicht setzt.
• _parent: Lädt in den übergeordneten Browsing-Kontext des aktuellen. Wenn kein Elternteil vorhanden ist, verhält es sich wie _self.
• _top: Lädt in den obersten Browsing-Kontext (d.h. der Browsing-Kontext, der ein Vorfahre des aktuellen ist und keinen Elternteil hat). Wenn kein Elternteil vorhanden ist, verhält es sich wie _self.
• _unfencedTop: Lädt die Antwort eines Formulars innerhalb eines eingebetteten Fenced Frame in den obersten Frame (d.h. es geht über die Wurzel des Fenced Frame hinaus, im Gegensatz zu anderen reservierten Zielen). Nur innerhalb von Fenced Frames verfügbar.

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

• 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>.
• Abrufen einer Liste der Elemente im Formular: HTMLFormElement.elements
• ARIA: Formularrolle
• ARIA: Suchrolle