【初心者向け】HTMLのtextareaタグでテキストボックスを作成する方法！
textareaタグでテキストボックスを作成したくて、この記事を訪れた方も多いのではないでしょうか？
HTMLでお問い合わせフォームを作成する際、必ずと言っていいほど利用するのがtextareaタグです。
今回WEBCAMP MEDIAでは、HTMLのtextareaタグでテキストボックスを作成する方法について解説します。
- textareaについて
- textareaの使い方
- プレースホルダーを設定する方法
- サイズを固定する方法
以上の項目について解説します。
この記事を読むことで、textareaタグの使い方を理解して、HTMLに文字入力できるテキストボックスを作成できるのでぜひ参考にしてみてくださいね！
＼プログラミングスクールを比較／
|
DMM WEBCAMP |
COACHTECH |
RUNTEQ |
|
|---|---|---|---|
|
|
|
|
| 目指せる姿 | WEBエンジニアへの転職 |
フリーランスエンジニア | WEBエンジニアへの転職 |
| 分割払い | ○ | ○ | ○ |
| 補助金 | ○ | × | ○ |
| 転職保証 | ○ | × | × |
| 受講期間 | 3ヶ月〜 | 3ヶ月〜 | 5ヶ月〜 |
| 特徴 |
【IT業界の転職を一番に考えたい方向け】 大手DMMが運営のプログラミングスクール 転職成功率98.8% 豊富なキャンペーンや補助金制度あり |
【フリーランスを目指したい方向け】 フリーランスのエンジニアを最短で目指す エンジニアと共に実際の案件開発を担当 |
【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強 企業の求める即戦力のWEBエンジニアを目指す |
| 料金 | 329,350円〜 ※給付金適用後 |
42万9,000円~ | 55万円 |
|
公式HP |
公式HP |
公式HP |
textarea(テキストエリア)とは？
textareaとは、ユーザーが情報を複数行入力できるテキストボックスを作成できるHTMLタグです。
Webサイトでは、お問い合わせフォームのようにユーザーの情報を取得するために利用されます。
textareaタグ以外にも、1行のテキストボックスを作成するinputというタグも存在します。
Webサイトのフォーム情報は、主にinputタグとtextareaタグで構成されます。
texareaタグは、HTMLの中でも使用頻度の多いタグなので、この記事をきっかけに覚えておきましょう。
textareaの使い方
textareaタグは下記のように入力します。
<textarea name="test1" cols="30" rows="5"></textarea>name属性に指定した値はtextareaの名前になります。
cols属性は入力欄の幅を数値で指定でき、rows属性は入力欄の高さを数値で指定できます。
上記コードでは、30文字の横幅と高さ5行分のtextareaが作成されます。
実行結果
textareaに初期値を設定して入力時に消す方法
textareaには、placeholderという入力内容の概要を配置できる属性を指定できます。
placeholderを使うと、textareaへ入力する内容がひと目でわかり、文字を入力したら消えるのでユーザーが使いやすくなります。
サンプルコード
<textarea name="comment" placeholder="お問い合わせ内容" cols="30" rows="5"></textarea>実行結果
上記のように、textareaの概要が薄い文字で表示されます。
textareaのサイズを固定する方法
textareaのサイズはcols属性とrows属性で指定できるのですが、ボックスの右下にあるつまみをドラッグするとユーザー側からサイズを変更できます。
上記のようにユーザーがtextareaのサイズを変更できない仕様にするには、CSSのresizeプロパティを利用します。
resizeは、要素のサイズを変更できるかどうか指定できるプロパティです。
resizeプロパティを使ってtextareaのサイズを固定する方法は下記の通り。
CSS
textarea{
resize:none;
}HTML
<textarea name="comment" placeholder="お問い合わせ内容" cols="30" rows="5"></textarea>textareaタグにresize:noneを指定することで、ボックス右下のつまみが消えてサイズ変更不可になります。
まとめ
今回は、HTMLのtextareaタグでテキストボックスを作成する方法について解説しましたが、いかがでしたでしょうか？
textareaタグはHTMLにテキストボックスを作成する役割があり、主にフォーム欄で利用します。
textareaに属性を追加することで、テキストボックスのサイズを変更したりプレースホルダーの設定も可能です。
ぜひ参考にしてみてくださいね！
