Hauptelemente der Formulare

2.1 Element <input>

Formulare sind ein wichtiger Bestandteil von Webseiten und ermöglichen es Nutzern, Daten einzugeben und zu senden. Die Hauptelemente der Formulare sind <input>, <textarea> und <button>. Diese Elemente erlauben es den Usern, Text einzugeben, Optionen zu wählen, Dateien hochzuladen und andere Aktionen durchzuführen.

Das Element <input> ist eines der meistgenutzten Formularelemente. Es unterstützt viele Datentypen und kann für verschiedene Zwecke genutzt werden, wie Texteingabe, Dateiauswahl, Datumsangabe usw.

Allgemeine Syntax:

    
      <input type="type" name="name" id="id" value="value" placeholder="placeholder" required>
    
  

Attribute von <input>

• type: definiert den Eingabetyp
• name: Name des Formularelements, dient zur Identifikation der Daten auf dem Server
• id: einzigartiger Identifikator des Elements
• value: Anfangswert des Elements
• placeholder: Platzhaltertext, der innerhalb des Elements angezeigt wird, bis Daten eingegeben werden
• required: gibt an, dass das Element erforderlich ist

Beispiel <input>

input-text ermöglicht die Eingabe einzeiliger Texte.

    
      <input type="text" name="username" id="username" placeholder="Benutzernamen eingeben" required>
    
  

2.2 Element <textarea>

Das Element <textarea> wird für die Eingabe von mehrzeiligem Text verwendet. Es unterscheidet sich von <input type="text"> dadurch, dass es die Eingabe von Text erlaubt, der mehrere Zeilen umfasst, und kann in seiner Größe angepasst werden.

Allgemeine Syntax:

    
      <textarea name="name"
        id="id"
        rows="rows" cols="cols"
        placeholder="placeholder" required>
      </textarea>
    
  

Attribute von <textarea>

• name: Name des Formularelements, dient zur Identifikation der Daten auf dem Server
• id: einzigartiger Identifikator des Elements
• rows: Anzahl der Textzeilen
• cols: Anzahl der Zeichen pro Zeile
• placeholder: Platzhaltertext, der innerhalb des Elements angezeigt wird, bis Daten eingegeben werden
• required: gibt an, dass das Element erforderlich ist

Beispielnutzung:

    
      <label for="comments">Kommentare:</label>
      <textarea name="comments"
        id="comments"
        rows="5"
        cols="40"
        placeholder="Gib hier deine Kommentare ein..."
        required>
      </textarea>
    
  

Stilisierung von <textarea>

Das Element <textarea> kann mit CSS gestylt werden, um das Aussehen und die Benutzerfreundlichkeit zu verbessern.

Beispiel für die Stilisierung:

    
      textarea {
        width: 75%;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 4px;
        resize: vertical; /* resize wird nur vertikal möglich sein */
      }
    
  

    
      <label for="comments">Kommentare:</label>
      <textarea name="comments"
        id="comments"
        rows="5" placeholder="Gib hier deine Kommentare ein..." required>
      </textarea>
    
  

2.3 Element <button>

Das Element <button> wird verwendet, um Buttons in Formularen zu erstellen. Im Gegensatz zu <input type="button"> ist das <button>-Element flexibler und erlaubt es, verschiedene HTML-Elemente wie Text, Bilder usw. in die Buttons einzufügen.

Allgemeine Syntax:

    
      <button type="type" name="name" id="id" value="value">Button-Text</button>
    
  

Beispielnutzung:

    
      <button type="submit">Senden</button>
      <button type="reset">Zurücksetzen</button>
      <button type="button" onclick="alert('Button geklickt!')">Klick mich</button>
    
  

Attribute von <button>

1. type: definiert das Verhalten des Buttons. Mögliche Werte:
   • submit: sendet das Formular (Standardwert)
   • reset: setzt das Formular zurück
   • button: beliebiger Button, führt keine Standardaktionen aus
2. name: Name des Formularelements, dient zur Identifikation der Daten auf dem Server.
3. id: einzigartiger Identifikator des Elements.
4. value: Wert, der beim Absenden des Formulars an den Server gesendet wird.

Verschachteltes HTML in <button>

Das Element <button> erlaubt es, verschiedene HTML-Elemente in sich aufzunehmen, um komplexere Buttons zu erstellen.

Beispiel mit verschachteltem HTML:

    
      <button type="type" name="name" id="id" value="value">
        📨Senden
      </button>
    
  

    
      <button type="type" name="name" id="id" value="value">
        <img src="submit_icon.png" alt="Senden">
        Senden
      </button>
    
  

Stilisierung <button>

Das Element <button> kann mit CSS gestylt werden, um das Aussehen und die Benutzerfreundlichkeit zu verbessern.

Beispiel für die Stilisierung:

    
      button {
        background-color: #4CAF50; /* Grüner Hintergrund */
        color: white; /* Weiße Schrift */
        padding: 15px 20px; /* Innenabstand */
        border: none; /* Ohne Rahmen */
        border-radius: 4px; /* Abgerundete Ecken */
        cursor: pointer; /* Zeigercursor */
      }

      button:hover {
        background-color: #45a049; /* Dunkler grüner Hintergrund bei Hover */
      }
    
  

    
      <button type="submit">Senden</button>