ガジェット通信 GetNews

見たことのないものを見に行こう

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

DATE:
  • ガジェット通信 GetNewsを≫

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

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

 

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

 

なお、今回の記事の内容は動画でもご覧いただけます。

テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。

 

今回の登場人物

 

20163020-2田島悠介(29)

元エンジニアで、現在は田島アプリスクールのメンター。人の成長を見るのが一番のやりがいになっている。
好きな映画は『トスカーナの休日』

 

20160620

大石ゆかり(24)

若いからという理由で、アパレル会社のIT部門に。業務で必要なためメンターの田島悠介にプログラミングやデザインを教わっている。
Instagramには3つの写真加工アプリで編集してからアップするという。

 

 

入力欄のつくり方

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

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

input_textareatag

 

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

・ タグ

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

 

・type属性

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

 

例をみてみましょう。

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

 

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

input_tag

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

input_tag2

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

 

ボタンの設置

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

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

 

 

20160620

 

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

 

20163020-2

 

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

 

20160620

 

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

 

20163020-2

 

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

 

20160620

 

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

 

 

ご意見・ご感想欄

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

・タグ  〜

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

・rows属性

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

・cols属性

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

 

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

ここに記入してください

 

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

textarea

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

textarea2

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

 

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

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

 

20160620

 

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

 

20163020-2

 

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

 

20160620

 

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

 

20163020-2

 

また何でも聞いてね〜♪

 

 

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

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

カテゴリー : デジタル・IT タグ :
TechAcademyマガジンの記事一覧をみる ▶
  • 誤字を発見した方はこちらからご連絡ください。
  • ガジェット通信編集部への情報提供はこちらから
  • 記事内の筆者見解は明示のない限りガジェット通信を代表するものではありません。