Die
Ein Textarea-Element erstellt einen Bereich oder Raum, der mithilfe von Attributen wie Spalten, Zeilen oder beidem angegeben wird. CSS-Stil sowie Höhen- und Breiteneigenschaften können das Erscheinungsbild formatieren.
Syntax:
<textarea rows="3" cols="20"> Enter your text here... </textarea>
Die
Um die Funktion des Textbereichselements besser zu verstehen, sehen Sie sich das folgende Beispiel an, in dem
Code:
<form> <p>Leave your Comment:</p> <br /> <textarea id="ta" cols="60" rows="5"> Write Here...</textarea></form>
Ausgabe:
Das obige Beispiel ist einfach und demonstriert die Funktionen von
Die Zeilen und Spalten ermöglichen es dem Programmierer, die Grenzwerte für die Größe des Textbereichs festzulegen, also den genauen Platz, den der Textbereich einnimmt. Die Verwendung dieser Attribute trägt zur browserübergreifenden Unterstützung und Formatkonsistenz bei, da die Browser-Standardeinstellungen unterschiedlich sein können.
Code:
<!DOCTYPE html> <html> <head> <title> Textarea HTML Tag Demo </title> </head> <body> <form> <p>Fill the Detail:</p> <br /> <textarea rows="5" cols="40" name="demo" maxlength="60" minlength="10" required="required">Enter your name</textarea> <br /> <input type="submit" name="Submit" value="Submit" /> </form> </body> </html>
Ausgabe:
Das obige Beispiel zeigt einen weiteren Satz von Eigenschaften, die neben
Das Attribut „Maximale Länge“ wurde in HTML5 hinzugefügt; HTML unterstützte dieses Attribut nicht. Der Textbereich erfordert mindestens 10 Zeichen, wie durch die Eigenschaft „minlength“ festgelegt. Das „erforderliche“ Attribut gibt an, dass der Benutzer den Textbereich nicht leer lassen darf, um als gültig zu gelten und übermittelt zu werden. Es handelt sich um eine einfache Validierung des Tags.
Code:
<form id="Form1"> <label>Textarea Box 1</label> <br /> <textarea rows="5" cols="40" name="demo" maxlength="60" minlength="10" disabled="disabled"> This is Disabled</textarea> <br /> <label>Textarea Box 2</label> <br /> <textarea rows="5" cols="40" required="required"></textarea> <br /> <label>Textarea Box 3</label> <br /> <textarea rows="5" cols="40" placeholder="This is readonly textarea" readonly="readonly"></textarea> <br /> <input type="submit" name="Submit" value="Submit" /> </form>
Ausgabe:
Beachten Sie, dass der Textbereich „Textarea Box 2“ ein erforderlicher Textbereich ist, während der Textbereich „Textarea Box 1“ deaktiviert ist.
Code:
<form id="label2" action="textareaDemo.html"> <fieldset> <legend><b>Form 2</b></legend> <input type="text" name="FN" value="Name" /> <br /> <input type="submit" name="Submit" value="Submit" /> <br /> </fieldset> </form> <textarea rows="5" cols="40" form="label2" required="required"></textarea> <br /> <p>Above Text Area belongs to 'Form 2'</p>
Ausgabe:
Beachten Sie die Ausgabe unten. Das Textfeld unten ist ein „erforderliches“ Feld, und wie im obigen Code erwähnt, ist dieses Feld mit dem Formular „Form 2“ verknüpft. Wenn wir also versuchen, das Formular mit einem leeren Textbereich abzusenden, wird eine Warnung angezeigt.
Die
Das obige ist der detaillierte Inhalt vonTextArea-Tag in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!