1ヶ月でWebデザイン・プログラミングスキルをオーダーメイドのカリキュラムで学べるスクール、それがWebCamp。

「数億規模スタートアップのCTO講師」と「エンジニアキャリア専門のポテパン」が贈る、実践型Rubyスクール。

【HTML入門】フォームで使われる各種部品(inputタグ)について

Pocket

HTMLには「フォーム」と呼ばれる仕組みがあります。
このフォームによってユーザが入力した情報がサーバーに送信されます。
(下図のようなページを一度は見たことがあるのではないでしょうか)

フォームで使われるタグには様々なタグがありますが、その中の1つに「input」タグがあります。
inputタグ1つで様々な種類の部品を作成することが出来ます。

inputタグ

「テキストボックス」「ラジオボタン」「チェックボックス」など様々な種類の部品を、inputタグで作成することが出来ます。

サーバーにデータが送信される際、inputタグの「name」属性に設定した値と、入力された(選択された)値を一組としてデータが送信されます。

今回はinputタグの中でも、あらゆる所で使用される・特に使用頻度が高い部品を紹介します。

テキストボックス

1行のテキストボックス(テキスト入力欄)を作成することが出来ます。

例)名前(漢字)の入力欄

ブラウザ上で、下図のように表示されます。

属性 説明
type 値を「text」と設定することで、テキストボックスが作成される
name 部品の名前を設定
size 入力欄の幅を設定
maxlength 入力できる最大文字数を設定

ラジオボタン

複数の選択肢の中から、1つを選択させるような部品を作成することが出来ます。

例)性別の選択

ブラウザ上で、下図のように表示されます。

属性 説明
type 値を「radio」と設定することで、ラジオボタンが作成される
name 部品の名前を設定
複数のラジオボタンに同じ名前を設定することで1つのグループとして扱うことが出来る。
⇒グループの中から1つだけ選択することが出来る。
value (ラジオボタンが選択されている時に)送信される値を設定

チェックボックス

複数の選択肢から、複数を選択させるような部品を作成することが出来ます。

例)希望するメール配信の選択

ブラウザ上で、下図のように表示されます。

属性 説明
type 値を「checkbox」と設定することで、チェックボックスが作成される
name 部品の名前を設定
複数のチェックボックスに同じ名前を設定することで1つのグループとして扱うことが出来る。
⇒グループの中から複数選択することが出来る。
value (チェックボックスが選択されている時に)送信される値を設定
checked 値を「checked」と設定することで、あらかじめ選択された状態に出来る

隠しデータ

ブラウザ上には表示されない、隠しデータを送信することが出来ます。
(ただし、見た目上隠れているだけで実際は完全に隠れているわけではなく、HTMLソース表示すると隠しデータを見ることが可能です)

例)隠しデータ

属性 説明
type 値を「hidden」と設定することで、ブラウザには表示されないデータを設定出来る
name 部品の名前を設定
複数のチェックボックスに同じ名前を設定することで1つのグループとして扱うことが出来る。
⇒グループの中から複数選択することが出来る。
value 送信される値を設定

ボタン

様々な種類のボタンを作成することが出来ます。

例)3種類のボタン作成

ブラウザ上で、下図のように表示されます。

属性 説明
type 値を「reset」と設定することで、リセットボタンが作成される。
フォームでの入力内容がクリアされ、初期状態に戻る。

値を「button」と設定することで、特に機能無しの汎用ボタンが作
成される。主にjavascriptと組み合わせて使用される。

値を「submit」と設定することで、送信ボタンが作成される。
フォームでの内容が送信される。

value ボタンに表示されるテキストを設定
onclick ボタンクリック時に実行する内容を設定

まとめ

inputタグの「type」属性に様々な値を設定することによって、それに対応した様々な種類の部品を設置することができます。

今回紹介した部品(や属性)は、数ある中の一部にすぎません。
見た目上はテキストボックスと同じに見えても、入力した文字がマスク(アスタリスク等に置き換わる)される「password」や、数値を入力する「number」など他にも沢山あります。

気になる方は色々調べて見るといいでしょう。

投稿者:プロスタ編集部

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

おすすめスクール

全国30校舎で展開されるヒューマンアカデミーのWeb講座は修了者数4万人超、講師とカリキュラムの満足度がどちらも9割を超えています。就職や転職に必要なレベルの実務スキルを身に付けられます。

初心者がプログラミングで挫折しない学習方法を無料動画で公開中。オンラインに特化したプログラミングスクール「TechAcademy(テックアカデミー)」が解説。

この記事が気に入ったら
いいね!しよう

プロスタの最新情報をお届けします

あわせて読みたい

関連記事

イチ押しランキング

1リナックスアカデミー

リナックスアカデミー

2システムアーキテクチュアナレッジ

システムアーキテクチュアナレッジ
ページ上部へ戻る