Formulare in HTML

1. Einführung in Formulare

Formulare in HTML sind ein wichtiges Werkzeug für die Interaktion von Benutzern mit Webseiten. Sie ermöglichen es, Informationen von Benutzern zu sammeln, sei es Text, eine Auswahl aus einer Liste, Dateien oder andere Daten, die dann an den Server zur Verarbeitung gesendet werden können. In HTML werden Formulare mit einer Vielzahl von Elementen erstellt, wobei jedes für eine bestimmte Art der Dateneingabe vorgesehen ist. Das Hauptelement von Formularen ist <form>, das andere Elemente wie <input>, <textarea>, <button>, <select> und andere enthält.

Wichtige Formularelemente

Formularelemente ermöglichen die Erstellung von Eingabefeldern, Buttons, Dropdown-Listen und anderen UI-Elementen, mit denen der Benutzer Daten eingeben kann. Die grundlegenden Tags, die in Formularen verwendet werden:

• <form> — der Hauptcontainer für alle Formularelemente. Es definiert, wohin und wie die Daten gesendet werden.
• <input> — ein universelles Element zur Erstellung von Eingabefeldern verschiedener Typen (Text, Passwort, Radiobuttons, Checkboxen usw.).
• <label> — ein Element, das mit einem Eingabefeld verknüpft ist und dessen Zweck angibt.
• <textarea> — ein Feld zur Eingabe von mehrzeiligem Text.
• <button> — ein Button zum Senden des Formulars oder zur Ausführung anderer Aktionen.
• <select> und <option> — eine Dropdown-Liste, in der der Benutzer einen oder mehrere Optionen auswählen kann.

Beispiel eines einfachen Formulars

      
    <form action="/submit" method="post">
      <label for="name">Name:</label>
      <input type="text" id="name" name="name">
      
      <label for="email">E-Mail-Adresse:</label>
      <input type="email" id="email" name="email">
      
      <button type="submit">Senden</button>
    </form>
    

          
<form action="/submit" method="post">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
  
  <label for="email">E-Mail-Adresse:</label>
  <input type="email" id="email" name="email">
  
  <button type="submit">Senden</button>
</form>

• action in <form> definiert die URL, an die die Formulardaten gesendet werden.
• method gibt die Methode der Datenübertragung an: post oder get.

HTML <input>

Das Tag <input> ist eines der universellsten Elemente eines Formulars in HTML. Es unterstützt verschiedene Eingabetypen, die jeweils für bestimmte Datentypen geeignet sind.

Syntax des <input>-Tags:

<input type="typ" name="feldname" id="id" value="wert">

<input type="typ" name="feldname" id="id" value="wert">

Attribute, die im <input>-Tag verwendet werden:

• type — der Eingabetyp (z. B. Text, Passwort, E-Mail usw.).
• name — der Name des Feldes, mit dem der Server die Daten identifiziert.
• id — eine eindeutige Kennung, die verwendet wird, um sich mit einem <label> zu verbinden.
• value — der Wert, der standardmäßig im Feld angezeigt wird (z. B. ein Standardtext in einem Textfeld).

Wichtige Eingabetypen <input>

• Textfeld type="text" — zur Eingabe von kleinen Textmengen, z. B. Vorname oder Nachname.
  HTML

        
          <label for="username">Benutzername:</label>
          <input type="text" id="username" name="username">
        
      

  HTML

        
          <label for="username">Benutzername:</label>
          <input type="text" id="username" name="username">