HTML - Formular-Attribute

action

Das action-Attribut gibt die URL oder das serverseitige Skript an, das die Formularübermittlung verarbeitet. Wenn Sie das Formular absenden, werden die Formulardaten zur Verarbeitung an die angegebene URL oder das Skript gesendet. Der Wert des action-Attributs kann eine absolute oder relative URL sein.

<form action="/submit-form.php">
  <!-- Formularelemente -->
</form>

Wenn Sie das Formular absenden, werden die Formulardaten zur Verarbeitung an das "/submit-form.php"-Skript auf dem Server gesendet.

method

Das method-Attribut legt die HTTP-Methode fest, die für die Formularübermittlung verwendet wird. Die zwei häufigsten Werte sind GET und POST.

<form action="/submit-form.php" method="POST">
  <!-- Formularelemente -->
</form>

Die Formulardaten werden beim Absenden des Formulars mit der POST-Methode gesendet.

target

Das target-Attribut gibt an, wo die Antwort nach der Formularübermittlung angezeigt werden soll. Es bestimmt das Zielfenster oder den Rahmen, in dem die Serverantwort geladen wird. Die möglichen Werte sind:

<form action="/submit-form.php" target="_blank">
  <!-- Formularelemente -->
</form>

Wenn Sie das Formular absenden, wird die Serverantwort in einem neuen Fenster oder Tab geöffnet.

enctype

Das enctype-Attribut gibt den Kodierungstyp für Formulardaten an, wenn die POST-Methode verwendet wird. Es zeigt an, wie die Formulardaten kodiert werden sollen, bevor sie an den Server gesendet werden. Die gängigen Werte sind:

<form action="/submit-form.php" method="POST" enctype="multipart/form-data">
  <!-- Formularelemente -->
</form>

Die Formulardaten werden mit dem Kodierungstyp "multipart/form-data" kodiert, was das Einbeziehen von Datei-Uploads in die Formularübermittlung ermöglicht.

required

Das Attribut required zeigt an, dass ein Formularfeld ausgefüllt werden muss, bevor das Formular abgesendet werden kann. Wenn Sie das Attribut required zu einem Eingabefeld hinzufügen, prüft der Browser, ob das Feld einen Wert enthält, bevor er das Absenden des Formulars zulässt. Ist das Feld leer, zeigt der Browser eine Fehlermeldung an und verhindert das Absenden des Formulars.

<form>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" required>
  <input type="submit" value="Absenden">
</form>

Das Feld "Name" ist als erforderlich markiert. Wenn Sie versuchen, das Formular abzusenden, ohne einen Wert in das Feld "Name" einzugeben, zeigt der Browser eine Fehlermeldung an und verhindert das Absenden des Formulars.

min und max

Die Attribute min und max legen die Mindest- und Höchstwerte für numerische Eingabefelder fest, wie z.B. number, range und date Typen. Diese Attribute helfen Ihnen, Grenzen für die erlaubten Werte dieser Felder zu setzen.

<form>
  <label for="quantity">Menge:</label>
  <input type="number" id="quantity" name="quantity" min="1" max="10">
  <input type="submit" value="Absenden">
</form>

Das Feld "Menge" hat einen Mindestwert von 1 und einen Höchstwert von 10. Wenn Sie versuchen, einen Wert außerhalb dieses Bereichs einzugeben, zeigt der Browser eine Fehlermeldung an, wenn Sie das Formular absenden.

minlength und maxlength

Die Attribute minlength und maxlength legen die minimale und maximale Anzahl von Zeichen fest, die in einem Texteingabefeld erlaubt sind. Diese Attribute helfen Ihnen, die Länge der Benutzereingabe zu kontrollieren.

<form>
  <label for="username">Benutzername:</label>
  <input type="text" id="username" name="username" minlength="4" maxlength="10">
  <input type="submit" value="Absenden">
</form>

Das Feld "Benutzername" muss mindestens 4 Zeichen und darf höchstens 10 Zeichen haben. Wenn der eingegebene Wert diese Anforderungen nicht erfüllt, zeigt der Browser eine Fehlermeldung an, wenn Sie das Formular absenden.

pattern

Das Attribut pattern legt ein reguläres Ausdrucksmuster fest, dem der Eingabewert entsprechen muss. Es ermöglicht Ihnen, ein Format oder Muster festzulegen, dem die Benutzereingabe folgen soll. Wenn der eingegebene Wert nicht dem Muster entspricht, zeigt der Browser eine Fehlermeldung an.

<form>
  <label for="phone">Telefonnummer:</label>
  <input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}">
  <input type="submit" value="Absenden">
</form>

Das Feld "Telefonnummer" hat ein Muster, das verlangt, dass die Eingabe im Format von drei Ziffern, gefolgt von einem Bindestrich, drei weiteren Ziffern, einem weiteren Bindestrich und vier Ziffern erfolgt (z.B. 123-456-7890). Wenn die eingegebene Telefonnummer nicht diesem Muster entspricht, zeigt der Browser eine Fehlermeldung an, wenn Sie das Formular absenden.

autocomplete

Das Attribut autocomplete zeigt an, ob eine automatische Vervollständigung für ein Formularfeld aktiviert oder deaktiviert sein soll. Die automatische Vervollständigung schlägt mögliche Werte basierend auf zuvor eingegebenen Werten für dasselbe Feld vor. Standardmäßig ist die automatische Vervollständigung für die meisten Formularfelder aktiviert. Sie können dieses Verhalten jedoch mithilfe des autocomplete-Attributs steuern.

Die möglichen Werte für das autocomplete-Attribut sind:

<form>
  <label for="username">Benutzername:</label>
  <input type="text" id="username" name="username" autocomplete="off">
  <input type="submit" value="Absenden">
</form>

Das Feld "Benutzername" hat die automatische Vervollständigung deaktiviert. Der Browser wird für dieses Feld keine zuvor eingegebenen Werte vorschlagen.

readonly

Das Attribut readonly gibt an, dass ein Formularfeld schreibgeschützt ist und vom Benutzer nicht geändert werden kann. Wenn Sie das Attribut readonly zu einem Eingabefeld hinzufügen, kann der Benutzer den Wert des Feldes zwar sehen, aber nicht ändern. Der Wert des Feldes wird beim Absenden des Formulars mitgesendet.

<form>
  <label for="email">E-Mail:</label>
  <input type="email" id="email" name="email" value="benutzer@beispiel.de" readonly>
  <input type="submit" value="Absenden">
</form>

Das Feld "E-Mail" ist als schreibgeschützt markiert. Der Benutzer kann den Wert des Feldes nicht ändern, aber er wird in die Formularübermittlung einbezogen.

disabled

Das Attribut disabled zeigt an, dass ein Formularfeld deaktiviert ist und vom Benutzer nicht verwendet werden kann. Wenn Sie das Attribut disabled zu einem Eingabefeld hinzufügen, wird das Feld ausgegraut und nicht anklickbar. Der Wert des Feldes wird beim Absenden des Formulars nicht mitgesendet.

<form>
  <label for="country">Land:</label>
  <select id="country" name="country" disabled>
    <option value="DE">Deutschland</option>
    <option value="AT">Österreich</option>
    <option value="CH">Schweiz</option>
  </select>
  <input type="submit" value="Absenden">
</form>

Das Dropdown-Menü "Land" ist deaktiviert. Der Benutzer kann keinen Wert auswählen, und der Wert des Feldes wird nicht in die Formularübermittlung einbezogen.

Die Verwendung der Attribute readonly und disabled kann die Barrierefreiheit verbessern, indem sie den Benutzern visuelle Hinweise zur Interaktivität von Formularfeldern geben. Es ist wichtig, diese Attribute basierend auf den spezifischen Anforderungen Ihres Formulars korrekt zu verwenden.

accept-charset

Das Attribut accept-charset gibt an, welche Zeichenkodierungen der Server für die Formularübermittlung akzeptiert. Es teilt dem Browser mit, welche Zeichenkodierungen der Server verarbeiten kann. Standardmäßig werden die Formulardaten mit der Zeichenkodierung der Seite gesendet, die das Formular enthält.

<form action="/submit-form.php" accept-charset="UTF-8">
  <!-- Formularelemente -->
</form>

Die Formulardaten werden mit der UTF-8-Zeichenkodierung gesendet, wie durch das accept-charset-Attribut festgelegt. Wenn der Server die angegebene Zeichenkodierung nicht unterstützt, kann er die Formulardaten möglicherweise nicht korrekt verarbeiten.

Es ist wichtig zu beachten, dass das accept-charset-Attribut heutzutage selten verwendet wird, da die meisten Server standardmäßig so konfiguriert sind, dass sie die Zeichenkodierung der Seite verarbeiten können. Wenn Sie jedoch eine andere Zeichenkodierung für die Formularübermittlung angeben müssen, können Sie dieses Attribut verwenden.

novalidate

Das Attribut novalidate zeigt an, dass das Formular beim Absenden nicht validiert werden soll. Standardmäßig führen HTML5-Formulare eine clientseitige Validierung durch, bevor die Formulardaten an den Server gesendet werden. Das novalidate-Attribut umgeht diesen Validierungsschritt.

<form action="/submit-form.php" novalidate>
  <label for="email">E-Mail:</label>
  <input type="email" id="email" name="email">
  <input type="submit" value="Absenden">
</form>

Wenn Sie das Formular absenden, führt der Browser keine clientseitige Validierung der Formularfelder durch. Die Formulardaten werden ohne Überprüfung auf gültige Eingaben an den Server gesendet.

Das novalidate-Attribut ist nützlich in Situationen, in denen Sie die Formularvalidierung nur serverseitig durchführen möchten oder wenn Sie Ihre eigene benutzerdefinierte Validierungslogik mit JavaScript implementiert haben.

Beachten Sie, dass die Verwendung des novalidate-Attributs nicht bedeutet, dass Sie die Formularvalidierung komplett überspringen sollten. Es ist nach wie vor wichtig, eine serverseitige Validierung durchzuführen, um sicherzustellen, dass die übermittelten Daten gültig und sicher zu verarbeiten sind. Die clientseitige Validierung ist eine zusätzliche Validierungsebene, die hilft, Eingabefehler frühzeitig zu erkennen und Serverressourcen zu sparen.

Durch die angemessene Verwendung der Attribute accept-charset und novalidate können Sie die Zeichenkodierung und das Validierungsverhalten Ihrer HTML-Formulare steuern, um den Anforderungen Ihrer Anwendung gerecht zu werden.