HTMLスキル - 第4章 Lesson3

<textarea>タグで長文向けフォームを作成する方法

   

テクノロジーとクリエイティブのプロを目指す人のためのオンラインスクール
月額2500円で500以上のレッスンが受けられます

このスキルのデータをダウンロード: Windows Mac

<textarea>タグを使って、複数行入力可能な入力フォームを表示させる方法について解説しています。



この動画で学べること

・<textarea>タグの使い方
・placeholder属性の使い方



<textarea>タグを使って長い文章を入力できるようにしよう

長い文章を入力するのに必要なテキストフィールドを作ってみましょう。
2行以上の長い文章を入力したい場合ば、<input>タグではなく、<textarea>タグを使います。
この<textarea>タグには終了タグが必要なので、気をつけてください。
では、本文を書くための入力部分を前回作ったメールアドレスの下に書いていきましょう。



見本を見てもわかるように、「お問い合せ内容など、自由にお書きください。」の文章が入っていますが、入力を始めると文字が消えます。
このようなものは、placeholder属性を使って表現しています。
では、実際に書いていきましょう。




 <form>
お名前:<input type="text" name="お名前">
メールアドレス:<input type="text" name="メールアドレス">
本文:<textarea name="本文" placeholder="お問い合わせ内容など、自由にお書き下さい。"></textarea>
</form>



保存してブラウザで見てみましょう。
このように、出来上がりました。