
textareaタグとは
textareaタグとは、複数行の入力フォームを作成するために用意されたHTMLのタグです。
textareaタグで囲んだ内容は、入力フィールドの初期値として入力欄に表示されます。
入力欄は、textareaに必須の属性であるrow属性とcols属性で高さと幅を指定することができます。
ただし、この属性は表示サイズの設定にすぎないので、文字数の制限などは別で指定する必要があります。
HTMLの問題に挑戦しよう!
以下の問題に挑戦し、実際に手を動かして学習していきましょう。
無事に問題が解けて理解できれば、HTMLマスターへの第一歩となるでしょう。
問題13:textareaを使ってフォームを作ろう
textareaタグを用いて複数行の文字を入力できるフォームを作りましょう。
下記全ての条件を踏まえて作成してください。
[条件]
・textareaにはname属性を付与すること(名前:comment)
・rows属性を使って高さを8行分に設定すること
・cols属性を使って1行あたりの最大文字数を40文字とすること
・min・maxlength属性を使って5~200文字の入力制限をかけること
下記全ての条件を踏まえて作成してください。
[条件]
・textareaにはname属性を付与すること(名前:comment)
・rows属性を使って高さを8行分に設定すること
・cols属性を使って1行あたりの最大文字数を40文字とすること
・min・maxlength属性を使って5~200文字の入力制限をかけること
あらかじめエディタに書くコード
<form>
</form>
¥HTML¥
期待する画面

解答ソースコード
<form>
<textarea name="comment" cols="40" rows="8" minlength="5" maxlength="200"></textarea>
</form>
¥HTML¥
補足
今回は使用しませんでしたが、textareaに使用できる属性は他にもいくつかあります。
入力した文字の自動的な折り返しルールを決める場合にwrap属性というものがあります。
値には「soft」「hard」「off」が使用できます。
softとhardは自動的に折り返しますが、offは折り返しません。
テキストフォームに必ず入力を促したい場合には、required属性を使えば
未入力時にエラーメッセージを表示することができます。
入力した文字の自動的な折り返しルールを決める場合にwrap属性というものがあります。
値には「soft」「hard」「off」が使用できます。
softとhardは自動的に折り返しますが、offは折り返しません。
テキストフォームに必ず入力を促したい場合には、required属性を使えば
未入力時にエラーメッセージを表示することができます。
#忍者CODE無料問題集で活動を記録しよう
完了にする!
name属性で名前を付与した後、
1行あたりの最大文字数を指定するcols属性で40文字を指定します。
入力欄の高さを行数で指定するrows属性を使って8行分を指定します。
最後に最低文字数の設定にminlength属性で5を指定、
最大文字数の設定にmaxlength属性で200を指定すればOKです。