問題
13textareaを使ってフォームを作ろう
この問題では、複数行のテキストエリアを作成するためのタグについて学習します。 1行のみのテキストエリアであれば、inputタグのtype属性でtextを指定すれば可能でしたが、複数行では今回学習するtextareaを使用します。inputタグと使い方が異なるので、問題を通して学習していきましょう。
HTMLの問題に挑戦しよう！
問題
「textareaを使ってフォームを作ろう」
textareaタグを用いて複数行の文字を入力できるフォームを作りましょう。
下記全ての条件を踏まえて作成してください。
[条件]
・textareaにはname属性を付与すること(名前:comment)
・rows属性を使って高さを8行分に設定すること
・cols属性を使って1行あたりの最大文字数を40文字とすること
・min・maxlength属性を使って5~200文字の入力制限をかけること
あらかじめエディタに書くコード
<form>
</form>
¥HTML¥
期待する画面
解答と解説（textareaを使ってフォームを作ろう）
解説
※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます
まずはtextareaタグを記述し、条件に沿って属性を付与していきます。
name属性で名前を付与した後、
1行あたりの最大文字数を指定するcols属性で40文字を指定します。
入力欄の高さを行数で指定するrows属性を使って8行分を指定します。
最後に最低文字数の設定にminlength属性で5を指定、
最大文字数の設定にmaxlength属性で200を指定すればOKです。
補足
今回は使用しませんでしたが、textareaに使用できる属性は他にもいくつかあります。
入力した文字の自動的な折り返しルールを決める場合にwrap属性というものがあります。
値には「soft」「hard」「off」が使用できます。
softとhardは自動的に折り返しますが、offは折り返しません。
テキストフォームに必ず入力を促したい場合には、required属性を使えば
未入力時にエラーメッセージを表示することができます。
ポイント
textareaタグとは
textareaタグとは、複数行の入力フォームを作成するために用意されたHTMLのタグです。
textareaタグで囲んだ内容は、入力フィールドの初期値として入力欄に表示されます。
入力欄は、textareaに必須の属性であるrow属性とcols属性で高さと幅を指定することができます。
ただし、この属性は表示サイズの設定にすぎないので、文字数の制限などは別で指定する必要があります。
