HTML

⌘K
  2. Home
  4. Docs
  6. HTML
  8. HTML Formulare
  10. HTML Formular Attribute

HTML Formular Attribute

HTML Formular Attribute (engl.: HTML Form Attributs) sind spezifische Eigenschaften, die den Verhalten und die Darstellung von Formularen und deren Eingabefeldern steuern. Diese Attribute ermöglichen es Entwicklern, Formulare anzupassen und sicherzustellen, dass die Eingaben der Benutzer den Anforderungen entsprechen. In diesem Artikel werden die wichtigsten HTML-Formularattribute vorgestellt und erläutert.

1. Wichtige Formularattribute

Hier sind einige der grundlegendsten und am häufigsten verwendeten Attribute, die Sie in HTML-Formularen verwenden können:

1.1. action

  • Beschreibung: Gibt die URL an, an die die Formulardaten gesendet werden.
  • Beispiel:
<form action="/submit" method="post">
    ...
</form>

1.2. method

  • Beschreibung: Bestimmt die HTTP-Methode, die beim Senden der Daten verwendet wird. Die häufigsten Werte sind GET und POST.
  • Beispiel:
<form action="/submit" method="post">
    ...
</form>

1.3. name

  • Beschreibung: Ein eindeutiger Bezeichner für das Formular oder die Eingabefelder. Nützlich, um auf die Daten beim Serverzugriff zuzugreifen.
  • Beispiel:
<form name="contactForm" action="/submit" method="post">
    ...
</form>

1.4. target

  • Beschreibung: Bestimmt, wo die Antwort, die vom Server zurückgegeben wird, angezeigt werden soll. Werte sind _blank, _self, _parent und _top.
  • Beispiel:
<form action="/submit" method="post" target="_blank">
    ...
</form>

1.5. enctype

  • Beschreibung: Definiert den Typ der Codierung, die beim Senden des Formulars verwendet wird. Relevant für Dateiuploads. Häufige Werte sind application/x-www-form-urlencoded, multipart/form-data und text/plain.
  • Beispiel:
<form action="/submit" method="post" enctype="multipart/form-data">
    ...
</form>

1.6. autocomplete

  • Beschreibung: Steuert, ob der Browser die vorherigen Eingaben automatisch ausfüllen soll. Werte sind on oder off.
  • Beispiel:
<form action="/submit" method="post" autocomplete="on">
    ...
</form>

1.7. novalidate

  • Beschreibung: Deaktiviert die HTML-Formularvalidierung, die in modernen Browsern durchgeführt wird.
  • Beispiel:
<form action="/submit" method="post" novalidate>
    ...
</form>

2. Attribute für Eingabefelder

Jedes Eingabefeld in einem HTML-Formular kann zusätzliche Attribute haben, um die Benutzerinteraktion zu steuern:

2.1. required

  • Beschreibung: Kennzeichnet ein Eingabefeld als erforderlich, sodass der Benutzer es ausfüllen muss, bevor das Formular gesendet wird.
  • Beispiel:
<input type="text" name="username" required>

2.2. minlength und maxlength

  • Beschreibung: Bestimmt die Mindest- bzw. Höchstlänge eines Texteingabefelds.
  • Beispiel:
<input type="text" name="password" minlength="8" maxlength="20" required>

2.3. pattern

  • Beschreibung: Definiert ein reguläres Ausdrucksmuster, das die Eingabe des Benutzers erfüllen muss.
  • Beispiel:
<input type="text" name="username" pattern="[A-Za-z0-9]{3,15}" required>

2.4. value

  • Beschreibung: Legt den Standardwert für das Eingabefeld fest.
  • Beispiel:
<input type="text" name="email" value="[email protected]">

2.5. placeholder

  • Beschreibung: Gibt einen Platzhaltertext an, der angezeigt wird, solange das Eingabefeld leer ist.
  • Beispiel:
<input type="text" name="search" placeholder="Suchbegriff eingeben">

3. Beispiel für ein Formular mit Attributen

Hier ist ein Beispiel für ein vollständiges HTML-Formular, das verschiedene Attribute verwendet:

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Beispiel Formular</title>
</head>
<body>
    <h1>Registrierungsformular</h1>
    <form action="/register" method="post" autocomplete="off" enctype="application/x-www-form-urlencoded">
        <label for="username">Benutzername:</label>
        <input type="text" id="username" name="username" required minlength="3" maxlength="15" pattern="[A-Za-z0-9]+" placeholder="Benutzername wählen">
        <br>

        <label for="email">E-Mail:</label>
        <input type="email" id="email" name="email" required>
        <br>

        <label for="password">Passwort:</label>
        <input type="password" id="password" name="password" required minlength="8">
        <br>

        <input type="submit" value="Registrieren">
    </form>
</body>
</html>

Häufig gestellte Fragen

Was ist der Zweck des action-Attributs?

Das action-Attribut gibt die URL an, an die die Formulardaten gesendet werden, wenn das Formular abgeschickt wird.

Wie kann ich sicherstellen, dass ein Feld erforderlich ist?

Sie können das required-Attribut zu dem Eingabefeld hinzufügen, um sicherzustellen, dass der Benutzer es ausfüllt.

Was ist der Unterschied zwischen GET und POST im method-Attribut?

GET sendet die Formulardaten in der URL, während POST die Daten im HTTP-Body sendet. POST wird häufig für sicherere Datenübertragungen verwendet.

Was macht das novalidate-Attribut?

Das novalidate-Attribut deaktiviert die Standard-HTML-Formularvalidierung, die von modernen Browsern durchgeführt wird.

Wie kann ich reguläre Ausdrücke für Eingaben verwenden?

Sie können das pattern-Attribut verwenden, um ein reguläres Ausdrucksmuster festzulegen, das die Eingabe des Benutzers erfüllen muss.

Gegenfeld Team

Das Team von Gegenfeld engagiert sich für die Veröffentlichung allgemein zugänglicher Bildungsinhalte im Bereich Marketing, E-Commerce und Webentwicklung.