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

2017年4月21日 1:00

入力欄のつくり方

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

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

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

・ <input>タグ

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

・type属性

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

例をみてみましょう。

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

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

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

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

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

ボタンの設置

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

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

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

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

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

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

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

ご意見・ご感想欄

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

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

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

・rows属性

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

・cols属性

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

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

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

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

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

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

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

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

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

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

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

また何でも聞いてね〜♪

[お知らせ]TechAcademyでは初心者でも8週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。HTMLの基礎から学ぶことができます。
現役エンジニアがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートし、最短4週間でオリジナルWebサービスを開発することが可能です。