tag は多数の HTML タグの 1 つです。 タグ形式は、開始タグ () の 3 つの主要な部分に分かれています。ユーザーは、フォーム内で HTML タグを使用してテキスト領域を作成することにより、複数行にわたってテキストを入力できます。 タグは、多くの文字を保持できるテキスト領域を作成します。
textarea 要素は、cols、rows、またはその両方などの属性を使用して指定された領域またはスペースを作成します。 CSS スタイルと高さと幅のプロパティにより、ルック アンド フィールをフォーマットできます。
構文:
<textarea rows="3" cols="20"> Enter your text here... </textarea>
タグは、他のすべての HTML タグと同様に、他の多くの属性を受け入れます。これらの属性は にも共通です。フォーム要素。それらは以下にリストされています:
テキストエリア要素の働きをさらに理解するには、
コード:
<form> <p>Leave your Comment:</p> <br /> <textarea id="ta" cols="60" rows="5"> Write Here...</textarea></form>
出力:
上記の例は簡単で、
行と列を使用すると、プログラマはテキスト領域のサイズの境界値、つまりテキスト領域が取得する正確なスペースを設定できます。ブラウザのデフォルトは異なる可能性があるため、これらの属性を使用すると、ブラウザ間のサポートと形式の一貫性が向上します。
コード:
<!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>
出力:
上の例は、
最大長属性は HTML5 で追加されました。 HTML はこの属性をサポートしていませんでした。テキスト領域には、「minlength」プロパティで設定された少なくとも 10 文字が必要です。 「required」属性は、有効とみなされて送信されるためには、ユーザーがテキスト領域を空白のままにしてはならないことを示します。これはタグの簡単な検証です。
コード:
<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>
出力:
「Textarea Box 2」テキスト領域は必須のテキスト領域であるのに対し、「Textarea Box 1」は無効になっていることに注目してください。
コード:
<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>
出力:
以下の出力に注目してください。以下のテキストエリア ボックスは「必須」フィールドであり、上記のコードで述べたように、このフィールドはフォーム「Form 2」に関連付けられています。したがって、空のテキスト領域を含むフォームを送信しようとすると、アラートが表示されます。
要素は、