HTMLのinputタグとtextareaタグを使ってテキスト入力欄を表示する方法【初心者向け】
HTML初心者向けに【inputタグ】と【textareaタグ】を使ってテキスト入力欄を表示する方法を解説した記事です。実際のフォームを使ってタグの使い方が学べます。名前入力・パスワード入力など簡単に実装可能になります。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
HTMLについて今さら聞けない！という初心者のために、HTMLの基礎を紹介する記事です。
今回は、inputタグとtextareaタグを使ってテキスト入力欄を表示する方法について、初心者の方にも分かりやすく2人のキャラクターを用いて解説しています。
目次
そもそもHTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。
【動画の解説はこちら！クリックで見る！】
今回は、HTMLに関する内容だね！
どういう内容でしょうか？
inputタグとtextareaタグを使ってテキスト入力欄を表示する方法について詳しく説明していくね！
お願いします！
入力欄の作り方
ネットショッピングで入力する名前・住所の記述欄は<input>タグで作られています。
データの入力方法には一行タイプのものや、ご意見・ご感想といった複数の行を入力できるもの、また ラジオボタンやチェックボックス など、さまざまな入力用の部品が用意されています。
今回は、以下の問い合わせフォームの名前とパスワード入力、ご意見・ご感想の入力欄の作り方について学んでいきましょう。
名前欄とパスワード入力欄の作り方
名前欄とパスワード入力欄を作る際、以下の2つのタグと属性を利用します。
- <input>タグ
- type属性
これら2つのタグと属性について解説します。
<input>タグ
<input>タグは、テキスト入力や送信ボタンなど、情報を入力（インプット）するときに使います。
type属性を付け足すことで、さまざまな入力用の部品を作ることが可能です。
type属性
type属性は、要素（ここでは<input>タグ）がどんな形式であるかを指定します。
問い合わせフォームを例に見てみましょう。
<input type>に”text”を設定すると「一行入力のテキスト欄」、<input type>に”password”を設定すると「パスワード形式の入力欄」を作ることができます。
<input>タグは単独で使うので終了タグはいりません。
<input type="text"> <input type="password">
ブラウザで表示しても、一見すると何も変わらない入力欄です。
しかし、テキスト欄に文字を入力してみると、”text”を指定した欄では文字が、”password”を指定した欄では黒丸が表示されました。
このようにtype属性の設定値に応じて、入力内容の表示を変えることができます。
氏名や電話番号のフォームの中に薄いグレーで文字を表示するのはどうやるんですかー？
あれは、inputタグの中に「placeholder=”煌木 太郎”」って書くことで表示されるよ！
・・・そもそもなんで入力されていない時に表示させるんですか？
それはね、例を書くことでヒントになるからだよ！
なるほどっ！そう言われてみればそうですね♪
ご意見・ご感想欄の作り方
つづいて、複数の行になる長めの文章を入力する欄を作ってみましょう。
<textarea>タグ <textarea>〜</textarea>
複数の行が入力できるテキスト欄を作ります。
rows属性
テキスト表示エリアの高さを行数で指定します。
cols属性
テキスト表示エリアの幅を文字数で指定します。
表示行数が10行、幅が60文字のご意見・ご感想入力欄を作りましょう。
<textarea>タグの間に文言を指定すると、あらかじめ入力欄に指定した文言が記入されます。
<textarea rows="10" cols="60">ここに記入してください</textarea>
ブラウザで表示すると、「ここに記入してください」の文言が入力された状態で表示されています。
「ここに記入してください」の文言を消して自由に記入してみましょう。
以下の図のように、シンプルな名前・パスワード入力欄とご意見・ご感想欄が完成しました。
フォームの作成には、この他に送信ボタンの作成や、データの送信先の指定などが必要です。
用途に応じてカスタマイズしていきましょう。
今回はinputタグとtextareaタグを使ってテキスト入力欄を表示する方法についてご紹介しました。
HTMLを使ってフォームをさらにカスタマイズしたい場合は、HTMLでラジオボタンとチェックボックスを表示する方法も合わせてご覧ください。
執筆してくれたメンター
| メンターSS
文系・未経験でIT企業に就職して、9年目。 環境構築から開発・設計・テストまで何でも屋さんをやっていました。 テックアカデミーではJavaコースを担当しています。 |
inputとtextareaってこうやって使い分けるんですね〜！
inputタグは、テキスト入力欄の他にもチェックボックスやファイルを送信できるボタンなども設置できるんだよ！
すごい便利なんですね〜！ありがとうございましたっ！
また何でも聞いてください！
HTMLを学習中の方へ
これで解説は終了です、お疲れさまでした。
- つまずかず「効率的に」学びたい
- 副業や転職後の「現場で使える」知識やスキルを身につけたい
HTMLを学習していて、このように思ったことはありませんか？
テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。
合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を学べます。
まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。
時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
