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>

document.querySelector("form").addEventListener("submit", (event) => {
  event.preventDefault();
});

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 unterstützt die globalen Attribute.

accept

Eine durch Kommas getrennte Liste der 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 nur den einzelnen Wert "UTF-8" ohne Berücksichtigung der Groß- und Kleinschreibung. Dies spiegelt die weite Verbreitung dieser Kodierung wider (früher 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 der Browser die Werte von Eingabeelementen standardmäßig automatisch vervollständigen darf. autocomplete-Attribute an Formularelementen haben Vorrang vor dem Attribut am <form>-Element. Mögliche Werte:

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

name

Der Name des Formulars. Der Wert darf keine leere Zeichenfolge sein und muss innerhalb der form-Elemente in der zugehörigen Formularsammlung, sofern vorhanden, 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 Annotationen und die Arten von Links, die das Formular erstellt. Zu den Annotationen 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 Werte.

Attribute für die Formularübermittlung

Die folgenden Attribute steuern das Verhalten bei der Übermittlung des Formulars.

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" festgelegt ist.

enctype

Wenn das Attribut method den Wert post hat, gibt enctype den MIME-Typ der Formularübermittlung an. Mögliche Werte:

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

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

method

Die HTTP-Methode, mit der das Formular übermittelt wird. Zulässig sind ausschließlich die folgenden Methoden beziehungsweise Werte (ohne Berücksichtigung der Groß- und Kleinschreibung):

• post: Die Methode POST; die Formulardaten werden als Anfragetext gesendet.
• get (Standardwert): Die Methode GET; die Formulardaten werden mit ? 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 bei der Übermittlung geschlossen und ein submit-Ereignis ausgelöst, ohne Daten zu übermitteln oder das Formular zurückzusetzen.

Dieser Wert wird durch formmethod-Attribute an <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 das Attribut nicht gesetzt ist (und das Formular daher validiert wird), kann dies durch ein formnovalidate-Attribut an 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 wird. Der Wert ist ein Name oder Schlüsselwort für einen Browsing-Kontext (beispielsweise einen Tab, ein Fenster oder ein iframe). Die folgenden Schlüsselwörter haben eine besondere Bedeutung:

• _self (Standardwert): Lädt die Antwort in denselben Browsing-Kontext wie den aktuellen.
• _blank: Lädt die Antwort in einen neuen, unbenannten Browsing-Kontext. Dies bewirkt dasselbe wie das Festlegen von rel="noopener", wodurch window.opener nicht gesetzt wird.
• _parent: Lädt die Antwort in den übergeordneten Browsing-Kontext des aktuellen Kontexts. Wenn es keinen übergeordneten Kontext gibt, verhält sich dieser Wert wie _self.
• _top: Lädt die Antwort in den obersten Browsing-Kontext (also den Browsing-Kontext, der ein Vorfahre des aktuellen Kontexts ist und selbst keinen übergeordneten Kontext hat). Wenn es keinen übergeordneten Kontext gibt, verhält sich dieser Wert wie _self.
• _unfencedTop: Lädt die Antwort eines Formulars innerhalb eines eingebetteten fenced frame in den obersten Frame (also über die Wurzel des fenced frame hinaus, anders als bei anderen reservierten Zielkontexten). Nur innerhalb von fenced frames 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>

document.querySelectorAll("form").forEach((form) => {
  form.addEventListener("submit", (event) => {
    event.preventDefault();
  });
});

Ergebnis

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Leitfaden für HTML-Formulare
• Weitere Elemente, die beim Erstellen von Formularen verwendet werden: <button>, <datalist>, <fieldset>, <input>, <label>, <legend>, <meter>, <optgroup>, <option>, <output>, <progress>, <select>, <textarea>.
• Liste der Elemente im Formular abrufen: HTMLFormElement.elements
• ARIA: Rolle „form“
• ARIA: Rolle „search“