問題

13
HTML

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

この問題では、複数行のテキストエリアを作成するためのタグについて学習します。 1行のみのテキストエリアであれば、inputタグのtype属性でtextを指定すれば可能でしたが、複数行では今回学習するtextareaを使用します。inputタグと使い方が異なるので、問題を通して学習していきましょう。

ポイント

textareaタグとは

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

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

HTMLの問題に挑戦しよう!

問題

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

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

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

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

                    <form>
    
</form>
¥HTML¥
                

期待する画面

解答の画像

解答と解説

解説

LINE登録して解答を見る

※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます

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

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

補足

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

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

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

さらにスキルアップしたい方は公式LINEから「HTML」と送信すると動画が見れます。

LINE登録して動画を視聴する
今なら豪華5大特典もらえる! LINE登録でGET