PR

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

2017年4月21日(金)
TechAcademy

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

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

本記事は、TechAcademyのWebデザインオンラインブートキャンプのHTMLのカリキュラムをもとに執筆しています。

入力欄のつくり方

ネットショッピングで入力する名前・住所の記述欄は<input>タグでつくられています。データの入力方法には一行タイプの短いものや、ご意見・ご感想といった長い文章を入力するもの、また ラジオボタンやチェックボックス など、選択肢を選ぶさまざまなタイプがあります。

今回は名前とパスワード入力、ご意見・ご感想の入力欄のつくりかたについて学んでいきましょう。

input_textareatag

名前欄とパスワード入力欄

・ <input>タグ

テキスト入力や送信ボタンなど、何かを入力(インプット)するときに使います。
type属性を付け足すことで、さまざまなinputの型をつくることができます。

・type属性

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

例をみてみましょう。

<input type>に”text”を設定すると「一行入力のテキスト欄」、
<input type>に”password”を設定すると「パスワード形式の入力欄」をつくることができます。
<input>タグは単独で使うので終了タグはいりません。

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

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

input_tag

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

input_tag2

このように入力項目に応じて変えることができます。

ボタンの設置

「type=”button”」にすると汎用ボタンを作成することができます。nameでボタンに名前をつけ、valueでボタンに表示されるテキストを決めることができるので、ぜひ試してみてください。

<input type="button" value="送信する">

スクリーンショット 2016-05-25 16.29.02


20160620

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

20163020-2

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

20160620

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

20163020-2

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

20160620

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

ご意見・ご感想欄

続いて、ちょっと長めの文章を入力する欄をつくってみましょう。

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

長いテキストの入力欄をつくります。

・rows属性

テキストの高さを行数で指定します。

・cols属性

テキストの幅を文字数で指定します。

表示行数が10行、幅が60文字のご意見・ご感想入力欄をつくりましょう。<textarea>タグの間に文言を入れると、入力欄にあらかじめその文言が記入されるようになります。

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

ブラウザで表示すると、「ここに記入してください」の文言があらかじめ表示されています。これを消して自由に記入してみましょう。

textarea

これでとてもシンプルな名前・パスワード入力欄とご意見・ご感想欄が完成しました。

textarea2

フォームの作成にはこのほかに送信ボタンの作成や、データの送信先の指定などが必要です。用途に応じてカスタマイズしていきましょう。

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

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

20160620

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

20163020-2

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

20160620

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

20163020-2

また何でも聞いてね〜♪

[お知らせ]TechAcademyでは初心者でも8週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。HTMLの基礎から学ぶことができます。

現役エンジニアがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートし、最短4週間でオリジナルWebサービスを開発することが可能です。


TechAcademyマガジンは、オンラインのプログラミングスクールTechAcademyが運営する教育×ITに関するWebメディアです。トレンドや最新情報など役に立つ記事を発信しています。
https://techacademy.jp/magazine/

連載バックナンバー

Think IT会員サービス無料登録受付中

Think ITでは、より付加価値の高いコンテンツを会員サービスとして提供しています。会員登録を済ませてThink ITのWebサイトにログインすることでさまざまな限定特典を入手できるようになります。

Think IT会員サービスの概要とメリットをチェック

他にもこの記事が読まれています