<textarea></textarea>
-Elements für die Multi-Line-Texteingabe Das HTML5 <textarea></textarea>
-Element wurde speziell für das Erstellen von Multi-Line-Texteingabefeldern in Webformen entwickelt. Es ist ein einfaches, aber leistungsstarkes Element, das eine einfache Möglichkeit bietet, dass Benutzer große Mengen an Text eingeben und bearbeiten können. Hier ist ein grundlegendes Beispiel:
<code class="html"><textarea id="myTextarea" name="user_comment" rows="5" cols="30" placeholder="Enter your comment here..."></textarea></code>
Dieser Code erstellt einen Textbereich mit:
id="myTextarea"
: Ein eindeutiger Kennung für das Element, das für die Manipulation von JavaScript nützlich ist.name="user_comment"
: Das Namensattribut, das für die Übermittlung der Daten mit einem Formular unerlässlich ist.rows="5"
: Gibt die Anzahl der sichtbaren Zeilen an. Beachten Sie, dass dies nur ein Hinweis ist; Der Benutzer kann weiterhin mehr Text als Anpassungen in diese Zeilen eingeben, was dazu führt, dass sich die textarea vertikal erweitert.cols="30"
: Gibt die Anzahl der sichtbaren Spalten an. Ähnlich wie rows
ist dies eine visuelle Richtlinie.placeholder="Enter your comment here..."
: Bietet dem Benutzer eine hilfreiche Eingabeaufforderung, bevor ein Text eingegeben wird. Der Platzhaltertext verschwindet, sobald der Benutzer mit dem Eingeben beginnt. Über diese grundlegenden Attribute hinaus unterstützt <textarea></textarea>
Standard -HTML -Attribute wie disabled
, readonly
, required
(zur Formularvalidierung) und autofocus
(um die textarea automatisch zu fokussieren, wenn die Seite geladen wird). Das wrap
-Attribut steuert, wie Text sich umhüllt (typischerweise "weich" oder "hart").
<textarea></textarea>
Größe und Aussehen mit CSS Ja, Sie können die Größe und das Aussehen eines <textarea></textarea>
-Elements mit CSS umfassend steuern. Sie haben die vollständige Freiheit, es so zu stylen, dass sie das Design Ihrer Website entsprechen. Hier sind einige gemeinsame CSS -Eigenschaften:
width
und height
: Überschreiben Sie die von cols
und rows
festgelegten visuellen Abmessungen. Die Verwendung von Prozentsätzen oder em
-Einheiten ermöglicht reaktionsschnelles Design. Zum Beispiel: width: 50%;
oder height: 10em;
padding
, margin
, border
: Steuern Sie den Abstand und die Grenzen rund um den Textbereich.font-family
, font-size
, line-height
: Passen Sie die Schrifteigenschaften des Textes an.resize
: Steuert, ob der Benutzer die Größe des Textbereichs ändern kann. Mögliche Werte sind both
horizontal
als auch vertical
oder none
. Zum Beispiel resize: none;
verhindert die Größenänderung.overflow
: Steuert, wie der Inhalt, der die Dimensionen des Textbereichs überschreitet, behandelt wird (z. B. auto
, scroll
, hidden
).box-shadow
: Fügen Sie einen visuellen Schatteneffekt hinzu.Hier ist ein Beispiel für das CSS -Styling:
<code class="css">textarea { width: 400px; height: 150px; padding: 10px; border: 1px solid #ccc; border-radius: 5px; font-size: 16px; resize: vertical; /* Allow only vertical resizing */ box-shadow: 2px 2px 5px #888888; }</code>
<textarea></textarea>
-Element Die clientseitige Eingabevalidierung innerhalb eines <textarea></textarea>
wird normalerweise mit JavaScript behandelt. Sie können nach verschiedenen Kriterien suchen, z. B.:
Hier ist ein JavaScript -Beispiel mit einer einfachen Längeprüfung:
<code class="javascript">const textarea = document.getElementById("myTextarea"); const submitButton = document.getElementById("submitButton"); submitButton.addEventListener("click", function() { if (textarea.value.length </code>
Denken Sie daran, dass die clientseitige Validierung immer durch serverseitige Validierung ergänzt werden sollte, um die Datenintegrität zu gewährleisten.
<textarea></textarea>
Elemente Die Zugänglichkeit ist für inklusive Webdesign von entscheidender Bedeutung. Hier sind einige wichtige Überlegungen für <textarea></textarea>
Elemente:
<textarea></textarea>
inhärent eine gute Zugänglichkeit aufweist, kann die Verwendung von ARIA -Attributen es weiter verbessern. Beispielsweise kann aria-describedby
die textarea mit dem beschreibenden Text verknüpfen, das einen weiteren Kontext oder Anweisungen liefert.<label></label>
-Elements immer eine klare und prägnante Beschriftung an. Verbinden Sie das Etikett mit dem Textbereich mit dem for
das Attribut auf dem Etikett und des id
-Attributs auf dem Textbereich. Dies ist für Bildschirmleser von entscheidender Bedeutung.aria-invalid
zu verwenden, um Fehler bei assistiven Technologien anzuzeigen. Durch die Befolgen dieser Richtlinien können Sie zugängliche und benutzerfreundliche <textarea></textarea>
-Elemente erstellen, die ein breiteres Publikum richten.
Das obige ist der detaillierte Inhalt vonWie benutze ich den HTML5 & lt; textArea & gt; Element und seine Attribute für Multi-Line-Texteingaben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!