textareaを使ってフォームを作ろう

textareaタグとは

textareaタグとは、複数行の入力フォームを作成するために用意されたHTMLのタグです。
textareaタグで囲んだ内容は、入力フィールドの初期値として入力欄に表示されます。

入力欄は、textareaに必須の属性であるrow属性とcols属性で高さと幅を指定することができます。
ただし、この属性は表示サイズの設定にすぎないので、文字数の制限などは別で指定する必要があります。

HTMLの問題に挑戦しよう！

以下の問題に挑戦し、実際に手を動かして学習していきましょう。
無事に問題が解けて理解できれば、HTMLマスターへの道の第一歩となるでしょう。

問題13：textareaを使ってフォームを作ろう

textareaタグを用いて複数行の文字を入力できるフォームを作りましょう。
下記全ての条件を踏まえて作成してください。

[条件]
・textareaにはname属性を付与すること(名前:comment)
・rows属性を使って高さを8行分に設定すること
・cols属性を使って1行あたりの最大文字数を40文字とすること
・min・maxlength属性を使って5~200文字の入力制限をかけること

あらかじめエディタに書くコード

                <form>
    
</form>
¥HTML¥
              

期待する画面

解説

まずはtextareaタグを記述し、条件に沿って属性を付与していきます。

name属性で名前を付与した後、
1行あたりの最大文字数を指定するcols属性で40文字を指定します。
入力欄の高さを行数で指定するrows属性を使って8行分を指定します。
最後に最低文字数の設定にminlength属性で5を指定、
最大文字数の設定にmaxlength属性で200を指定すればOKです。

ログインして解答を見る

補足

今回は使用しませんでしたが、textareaに使用できる属性は他にもいくつかあります。

入力した文字の自動的な折り返しルールを決める場合にwrap属性というものがあります。
値には「soft」「hard」「off」が使用できます。
softとhardは自動的に折り返しますが、offは折り返しません。

テキストフォームに必ず入力を促したい場合には、required属性を使えば
未入力時にエラーメッセージを表示することができます。

活動記録をTweetする