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

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

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が1,000以上あります。

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

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

 

なお本記事は、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

 

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

ご意見・ご感想欄

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

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

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

・rows属性

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

・cols属性

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

 

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

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

 

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

textarea

 

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

textarea2

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

 

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

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

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