HTMLのinputタグとtextareaタグを使ってテキスト入力欄を表示する方法【初心者向け】

HTML初心者向けに【inputタグ】と【textareaタグ】を使ってテキスト入力欄を表示する方法を解説した記事です。実際のフォームを使ってタグの使い方が学べます。名前入力・パスワード入力など簡単に実装可能になります。

TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。

HTMLについて今さら聞けない!という初心者のために、HTMLの基礎を紹介する記事です。

今回は、inputタグとtextareaタグを使ってテキスト入力欄を表示する方法について、初心者の方にも分かりやすく2人のキャラクターを用いて解説しています。

目次

そもそもHTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。

 

【動画の解説はこちら!クリックで見る!】

 

田島悠介

今回は、HTMLに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

inputタグとtextareaタグを使ってテキスト入力欄を表示する方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

入力欄の作り方

ネットショッピングで入力する名前・住所の記述欄は<input>タグで作られています。

データの入力方法には一行タイプのものや、ご意見・ご感想といった複数の行を入力できるもの、また ラジオボタンやチェックボックス など、さまざまな入力用の部品が用意されています。

今回は、以下の問い合わせフォームの名前とパスワード入力、ご意見・ご感想の入力欄の作り方について学んでいきましょう。

input_textareatag

 

名前欄とパスワード入力欄の作り方

名前欄とパスワード入力欄を作る際、以下の2つのタグと属性を利用します。

  • <input>タグ
  • type属性

これら2つのタグと属性について解説します。

 

<input>タグ

<input>タグは、テキスト入力や送信ボタンなど、情報を入力(インプット)するときに使います。

 

type属性を付け足すことで、さまざまな入力用の部品を作ることが可能です。

 

type属性

type属性は、要素(ここでは<input>タグ)がどんな形式であるかを指定します。

 

問い合わせフォームを例に見てみましょう。

<input type>に”text”を設定すると「一行入力のテキスト欄」、<input type>に”password”を設定すると「パスワード形式の入力欄」を作ることができます。

<input>タグは単独で使うので終了タグはいりません。

<input type="text">
<input type="password">

 

ブラウザで表示しても、一見すると何も変わらない入力欄です。

input_tag

 

しかし、テキスト欄に文字を入力してみると、”text”を指定した欄では文字が、”password”を指定した欄では黒丸が表示されました。

input_tag2

このようにtype属性の設定値に応じて、入力内容の表示を変えることができます。

 

大石ゆかり

氏名や電話番号のフォームの中に薄いグレーで文字を表示するのはどうやるんですかー?

田島悠介

あれは、inputタグの中に「placeholder=”煌木 太郎”」って書くことで表示されるよ!

大石ゆかり

・・・そもそもなんで入力されていない時に表示させるんですか?

田島悠介

それはね、例を書くことでヒントになるからだよ!

大石ゆかり

なるほどっ!そう言われてみればそうですね♪

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

ご意見・ご感想欄の作り方

つづいて、複数の行になる長めの文章を入力する欄を作ってみましょう。

<textarea>タグ  <textarea>〜</textarea>

複数の行が入力できるテキスト欄を作ります。

rows属性

テキスト表示エリアの高さを行数で指定します。

cols属性

テキスト表示エリアの幅を文字数で指定します。

 

表示行数が10行、幅が60文字のご意見・ご感想入力欄を作りましょう。

<textarea>タグの間に文言を指定すると、あらかじめ入力欄に指定した文言が記入されます。

<textarea rows="10" cols="60">ここに記入してください</textarea>

 

ブラウザで表示すると、「ここに記入してください」の文言が入力された状態で表示されています。

「ここに記入してください」の文言を消して自由に記入してみましょう。

 

textarea

 

以下の図のように、シンプルな名前・パスワード入力欄とご意見・ご感想欄が完成しました。

 

textarea2

 

フォームの作成には、この他に送信ボタンの作成や、データの送信先の指定などが必要です。

用途に応じてカスタマイズしていきましょう。

 

今回はinputタグとtextareaタグを使ってテキスト入力欄を表示する方法についてご紹介しました。

HTMLを使ってフォームをさらにカスタマイズしたい場合は、HTMLでラジオボタンとチェックボックスを表示する方法も合わせてご覧ください。

執筆してくれたメンター

メンターSS

文系・未経験でIT企業に就職して、9年目。

環境構築から開発・設計・テストまで何でも屋さんをやっていました。

テックアカデミーではJavaコースを担当しています。

 

大石ゆかり

inputとtextareaってこうやって使い分けるんですね〜!

田島悠介

inputタグは、テキスト入力欄の他にもチェックボックスやファイルを送信できるボタンなども設置できるんだよ!

大石ゆかり

すごい便利なんですね〜!ありがとうございましたっ!

田島悠介

また何でも聞いてください!

 

HTMLを学習中の方へ

これで解説は終了です、お疲れさまでした。

  • つまずかず「効率的に」学びたい
  • 副業や転職後の「現場で使える」知識やスキルを身につけたい

HTMLを学習していて、このように思ったことはありませんか?

テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。

合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を学べます。

まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。

時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします!