ログイン
問題13

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

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

アイコン画像

本のアイコン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¥
              

ブラウザのアイコン期待する画面

解答の見本画像

タグアイコン解答ソースコード

              <form>
  <textarea name="comment" cols="40" rows="8" minlength="5" maxlength="200"></textarea>
</form>
¥HTML¥
            

コメントのアイコン解説

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

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

コメントのアイコン補足

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

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

テキストフォームに必ず入力を促したい場合には、required属性を使えば
未入力時にエラーメッセージを表示することができます。
HTMLを学ぶなら現役エンジニア監修「甲賀コース」
キャンペーン

閉じる