HTML Mehrzeiliges Eingabefeld Tutorial

Einführung

Das HTML <textarea>-Tag ermöglicht es Benutzern, freien Text in einem Formular einzugeben und abzuschicken. In diesem Lab werden wir ein einfaches HTML-Formular mit einem <textarea>-Eingabefeld erstellen und einige häufig verwendete Attribute anwenden.

Hinweis: Sie können im index.html programmieren und lernen, wie Sie in Visual Studio Code HTML schreiben. Klicken Sie bitte auf 'Go Live' in der unteren rechten Ecke, um den Webdienst auf Port 8080 auszuführen. Anschließend können Sie die Registerkarte Web 8080 aktualisieren, um die Webseite anzuschauen.

Dies ist ein Guided Lab, das schrittweise Anweisungen bietet, um Ihnen beim Lernen und Üben zu helfen. Befolgen Sie die Anweisungen sorgfältig, um jeden Schritt abzuschließen und praktische Erfahrungen zu sammeln. Historische Daten zeigen, dass dies ein Labor der Stufe Anfänger mit einer Abschlussquote von 92% ist. Es hat eine positive Bewertungsrate von 100% von den Lernenden erhalten.

Erstellen eines HTML-Gerüsts

Erstellen Sie eine leere HTML-Datei mit dem Namen index.html und geben Sie den grundlegenden HTML5-Boilerplate-Code ein.

<!doctype html>
<html>
  <head>
    <title>HTML Textarea Tag Tutorial</title>
  </head>
  <body>
    <!-- Ihr HTML-Code hier -->
  </body>
</html>

Fügen Sie ein Formularelement hinzu

Fügen Sie ein <form>-Element in den HTML-Körper ein. Mit diesem Formular werden wir Informationen von dem Benutzer sammeln.

<form>
  <!-- Formularelemente kommen hier -->
</form>

Fügen Sie ein Textarea-Eingabefeld hinzu

Fügen Sie ein <textarea>-Element innerhalb des <form>-Elements hinzu. Sie können die Größe der Textarea durch Festlegen der Attribute rows und cols anpassen.

<form>
  <label for="feedback">Geben Sie Ihre Rückmeldung ein:</label>
  <textarea id="feedback" name="feedback" rows="10" cols="50"></textarea>
</form>

Hier haben wir ein Label hinzugefügt, um das Eingabefeld (Rückmeldung) zu beschreiben, und ein textarea-Eingabefeld mit einem id-Attribut von "feedback". Das name-Attribut wird verwendet, um das Eingabefeld auf serverseitiger Ebene zu identifizieren.

Fügen Sie andere Formularattribute hinzu

Wir können andere HTML-Attribute zu unserem Formular- und Eingabeelementen hinzufügen. Beispielsweise können wir ein required-Attribut hinzufügen, um sicherzustellen, dass der Benutzer einige Text eingibt.

<form>
  <label for="feedback">Geben Sie Ihre Rückmeldung ein:</label>
  <textarea
    id="feedback"
    name="feedback"
    rows="10"
    cols="50"
    required
  ></textarea>
  <input type="submit" value="Submit Feedback" />
</form>

Hier haben wir ein input-Element vom Typ submit hinzugefügt, um es dem Benutzer zu ermöglichen, seine Rückmeldung abzuschicken. Jetzt kann der Benutzer kein leeres Formular abgeben, da das required-Attribut zum textarea hinzugefügt wurde.

Weitere Anpassungen mit CSS

Schließlich können Sie einige CSS-Stile auf das Formular und die Eingabeelemente anwenden, um das Formular visuell ansprechender zu gestalten.

<style>
  form {
    border: 1px solid #ccc;
    padding: 10px;
    margin: 20px auto;
    max-width: 500px;
  }

  label,
  textarea,
  input[type="submit"] {
    display: block;
    margin-bottom: 10px;
    width: 100%;
  }
</style>

Hier haben wir einen Rahmen gesetzt, Padding und Margin hinzugefügt und die maximale Breite des Formulars begrenzt. Wir haben auch das Anzeigeverhalten und die Breite der Label-, Textarea- und Submit-Eingabeelemente angepasst.

Zusammenfassung

In diesem Lab haben wir gelernt, wie man ein einfaches HTML-Formular mit einem <textarea>-Eingabefeld erstellt und übliche Attribute anwendet. Wir haben auch einige CSS-Stile angewendet, um das Aussehen der Formularelemente anzupassen. Sie können das Formular und die Eingabeelemente weiter nach Ihren Anforderungen anpassen.