体験を伝える―『ガジェット通信』の考え方

面白いものを探しにいこう 本物を体験し体感しよう 会いたい人に会いに行こう 見たことのないものを見に行こう そしてそれをやわらかくみんなに伝えよう [→ガジェ通についてもっと詳しく] [→ガジェット通信フロアについて]

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

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
1 2 3次のページ
TechAcademyマガジンの記事一覧をみる
  • 誤字を発見した方はこちらからご連絡ください。
  • ガジェット通信編集部への情報提供はこちらから
  • 記事内の筆者見解は明示のない限りガジェット通信を代表するものではありません。