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でラジオボタンとチェックボックスを表示する方法も合わせてご覧ください。
コスパとタイパ、両方結果的に良くなる良くなる学び方とは？
「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。
もちろん、時間も費用もかかることは間違いありません。
ただ
結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。
コスパ・タイパ最適化の参考として、
テックアカデミー卒業生がスクールを選んだ理由
をご紹介します。
- ・困ったときに、質問や相談できる相手がいるため挫折しなかった
- ・プロとして必要なスキルのみを深く学べたので無駄がなかった
- ・副業案件の提供と納品までのサポートがあったので目的を達成できた
安価・短期間で広く浅く学んでも意味がありません。
本当に自分の目的が達成できるか、それが重要です。
自分にどのスキルや学び方が合っているか、どんな学習方法かなど、お気軽に
無料相談
に参加してみませんか？
カウンセラー・現役のプロへ、何でも気軽に無料相談可能。
30分か60分お好きな時間が選べて、かつ3回まで
すべて無料で
ご利用できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
執筆してくれたメンター
| メンターSS
文系・未経験でIT企業に就職して、9年目。 環境構築から開発・設計・テストまで何でも屋さんをやっていました。 テックアカデミーではJavaコースを担当しています。 |
inputとtextareaってこうやって使い分けるんですね〜！
inputタグは、テキスト入力欄の他にもチェックボックスやファイルを送信できるボタンなども設置できるんだよ！
すごい便利なんですね〜！ありがとうございましたっ！
また何でも聞いてください！
HTMLを学習中の方へ
これで解説は終了です、お疲れさまでした。
- つまずかず「効率的に」学びたい
- 副業や転職後の「現場で使える」知識やスキルを身につけたい
HTMLを学習していて、このように思ったことはありませんか？
テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。
合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を学べます。
まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。
時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
