Zum Inhalt springen

form

  • Redaktion 
  • Zuletzt aktualisiert am

form

Definiert ein interaktives Formular mit Steuerelementen.

Beispiel:








<form action="/signup" method="post">
  <p>
    <label>Title</label><br>
    <label>
      <input type="radio" name="title" value="mr">
      Mr
    </label>
    <label>
      <input type="radio" name="title" value="mrs">
      Mrs
    </label>
    <label>
      <input type="radio" name="title" value="miss">
      Miss
    </label>
  </p>
  <p>
    <label>First name</label><br>
    <input type="text" name="first_name">
  </p>
  <p>
    <label>Last name</label><br>
    <input type="text" name="last_name">
  </p>
  <p>
    <label>Email</label><br>
    <input type="email" name="email" required>
  </p>
  <p>
    <label>Phone number</label><br>
    <input type="tel" name="phone">
  </p>
  <p>
    <label>Password</label><br>
    <input type="password" name="password">
  </p>
  <p>
    <label>Country</label><br>
    <select>
      <option>China</option>
      <option>India</option>
      <option>United States</option>
      <option>Indonesia</option>
      <option>Brazil</option>
    </select>
  </p>
  <p>
    <label>
      <input type="checkbox" value="terms">
      I agree to the <a href="/terms">terms and conditions</a>
    </label>
  </p>
  <p>
    <button>Sign up</button>
    <button type="reset">Reset form</button>
  </p>
</form>

action

Legt fest, an welche URL die Informationen des Formulars beim Absenden gesendet werden.

"/contact"

Sie können eine relative URL verwenden.

"https://htmlreference.io/contact"

Sie können eine absolute URL verwenden.

method

Legt die HTTP-Methode fest, die beim Absenden des Formulars verwendet wird.

"post"

Die Formularinformationen werden als Teil des Anfragekörpers an den Server gesendet.

"get"

Die Formularinformationen werden als Teil der URL-Parameter an den Server gesendet: /contact?first_name=Alex&last_name=Smith.

name

Der Name des Formulars, wenn es an den Server gesendet wird. Nützlich, wenn mehrere Formulare auf der gleichen Webseite vorhanden sind.

"sign_up_form"

Der Namenswert muss im Kontext der gesamten Webseite eindeutig sein.

Er darf nur alphanumerische Zeichen a-z A-Z 0-9 und einige Sonderzeichen wie - _… aber keine Leerzeichen enthalten.

autocomplete

Bestimmt, ob der Browser alle Steuerelemente des Formulars automatisch vervollständigen kann.

"off"

Der Browser deaktiviert die Funktionen zum automatischen Vervollständigen. Dies kann jedoch für jedes Steuerelement einzeln überschrieben werden.

"on"

Der Browser aktiviert die Funktionen zum automatischen Vervollständigen. Dies kann jedoch für jedes Steuerelement einzeln außer Kraft gesetzt werden.

Versuchen Sie, in dieser Eingabe „nach unten“ zu drücken. Es werden dann die zuvor eingegebenen E-Mail-Adressen angezeigt.

target

Legt fest, in welcher Registerkarte oder welchem Fenster der angeklickte Link angezeigt wird.

"_blank"

Öffnet sich in einem neuen Browser-Kontext, der normalerweise eine neue Registerkarte ist.

"_self"

Öffnet sich in der aktuellen Registerkarte.

"_parent"

Öffnet sich im übergeordneten Browsing-Kontext oder _self, wenn es keinen gibt.

"_top"

Öffnet sich im obersten Browsing-Kontext oder _self, wenn es keinen gibt.

enctype

Legt den MIME-Typ der an den Server gesendeten Informationen fest. Funktioniert nur, wenn die Methode post ist.

"application/x-www-form-urlencoded"

Default.

Der Standard Wert.

"text/plain"

Für HTML5-Text.

"multipart/form-data"

Wird benötigt, wenn Sie ein <input type="file"> Element verwenden.

novalidate

Weist den Browser an, das Formular beim Absenden nicht zu validieren.

No value required.