HTML-Kurs / textarea, select, option und button verwenden
Verwenden Sie textarea für mehrzeiligen Text, select mit option für eine vorbereitete Auswahlliste und button für eine explizite Aktion. Diese Elemente haben unterschiedliche Arten, Werte zu behalten und ein Formular zu übermitteln.
Geben Sie mehrere Zeilen mit textarea ein
Der Anfangswert eines textarea wird zwischen seine Öffnungs- und Schließ-Tags gesetzt, anstatt in einem Attribut value. Vergleichen Sie den Anfangsinhalt mit einem verschwindenden Hinweis, indem Sie die Beispiele für Textfelder in Platzhaltertext zu Formularfeldern hinzufügen verwenden.
<label for="message">Ihre Nachricht</label>
<textarea id="message" name="message" rows="5" cols="40"></textarea>rows und cols beeinflussen die anfänglich angezeigte Größe; das CSS kann das Steuerungselement an die verfügbare Breite anpassen. name ist erforderlich, wenn dessen Inhalt übermittelt werden soll. Der Text zwischen den Tags wird zu einem echten Anfangswert. Wenn Sie nur ein Beispiel zeigen möchten, verwenden Sie placeholder als zusätzlichen Hinweis und behalten Sie das Beschriftung bei. Verwenden Sie textarea anstelle einer einzeiligen Eingabe, wenn die Leser eine längere Antwort bearbeiten können sollen.
Bieten Sie Auswahlmöglichkeiten mit select und option an
<label for="topic">Betreff</label>
<select id="topic" name="topic">
<option value="order">Bestellungen</option>
<option value="delivery">Lieferung</option>
<option value="other">Andere</option>
</select>Der Bildschirm zeigt „Bestellungen“ an, aber der übermittelte Wert ist order. id="topic" verbindet die Steuerung mit ihrem Beschriftung, während name="topic" die übermittelten Daten benennt. Wählen Sie die value-Werte der Optionen, die dem entsprechen, was der Server erwartet. Ohne Interaktion ist die erste Option ausgewählt. Wenn Benutzer bewusst wählen müssen, beginnen Sie mit <option value="">Ein Thema auswählen</option> und fügen required zu select hinzu. Wenn es einen vernünftigen Standardwert gibt, kann die erste tatsächliche Option vorzuziehen sein.
Testen Sie die Steuerelemente zusammen in einem Formular
Speichern Sie dieses Dokument unter dem Namen controls.html. Die erste leere Option und das Attribut required bedeuten, dass ein echtes Betreff vor dem Absenden ausgewählt werden muss. Die Schaltfläche zum Zurücksetzen ist für diese Vergleichsübung enthalten.
<!doctype html>
<html lang="de-DE">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Übung zu Formularsteuerelementen</title>
<style>
textarea, select { box-sizing: border-box; max-width: 100%; font: inherit; }
textarea { width: 24rem; }
</style>
</head>
<body>
<h1>Mit den Kontaktfeldern üben</h1>
<form id="controls-form" method="get">
<p><label for="topic-choice">Betreff</label>
<select id="topic-choice" name="topic" required>
<option value="">Ein Thema auswählen</option>
<option value="order">Bestellungen</option>
<option value="delivery">Lieferung</option>
</select></p>
<p><label for="message-text">Nachricht</label>
<textarea id="message-text" name="message" rows="4">Testfrage</textarea></p>
<button type="submit">Eingegebene Werte überprüfen</button>
<button type="reset">Ursprüngliche Werte wiederherstellen</button>
</form>
</body>
</html>- Senden Sie, ohne einen Betreff auszuwählen, um die obligatorische Auswahl zu testen.
- Wählen Sie die Lieferung, ändern Sie die Nachricht und senden Sie ab. Der gesendete Wert ist
delivery, während die sichtbare Beschriftung „Lieferung“ lautet. - Ändern Sie erneut und setzen Sie zurück. Der Betreff kehrt zur ersten Option zurück und die Nachricht kehrt zu ihrem ursprünglichen Text zurück.
Ein Steuerungselement ohne Anfangstext erscheint nach dem Zurücksetzen leer; ein Steuerungselement mit einem Anfangswert kehrt zu diesem Wert zurück. Öffnen Sie die Datei erneut, um ihren Ausgangszustand zu vergleichen.
Referenz zu textarea auf MDN · Referenz zu select auf MDN · Referenz zu button auf MDN
Geben Sie den Typ jedes Buttons an
Innerhalb eines Formulars ist ein button standardmäßig für die Übermittlung bestimmt. Verwenden Sie type="button" für eine andere skriptgesteuerte Aktion, damit das Formular nicht versehentlich abgesendet wird. Beobachten Sie, wie die Namen und Werte in Formularstruktur und GET vs. POST übermittelt werden.
<form method="get">
<label for="note">Hinweis</label>
<textarea id="note" name="note" rows="4"></textarea>
<button type="submit">Senden</button>
<button type="reset">Zurücksetzen</button>
</form>Das Formular verwendet GET und sendet an die aktuelle URL. Auf einer über HTTP oder HTTPS bereitgestellten Seite sehen Sie die Werte nach dem Absenden in der URL. Bei lokal geöffneten file://-Dateien hängt die Verarbeitung vom Browser ab; eine erfolgreiche serverseitige Verarbeitung wird dadurch nicht nachgewiesen. Das Zurücksetzen stellt die Steuerelemente auf ihre ursprünglichen Werte zurück; es macht sie nicht immer leer. Wenn ein textarea mit Text begann, stellt das Zurücksetzen diesen Text wieder her. Eine Zurücksetzen-Schaltfläche kann die Arbeit von jemandem löschen, daher sollten Sie sie in einem echten Formular nur dann einfügen, wenn sie einen klaren Zweck und eine klare Platzierung hat. Siehe die MDN HTML-Elementreferenz für die individuellen Attribute.
type="button" verhindert das Absenden des Formulars, erstellt jedoch keine neue Aktion von selbst. Ohne angeschlossenes Skript bewirkt ein Klick auf diese Schaltfläche nichts. Unterscheiden Sie die integrierten Sende- und Rücksetzaktionen von HTML von den Aktionen, die ein Skript erfordern.
