ウェブDeBLOG｜トライデントコンピュータ専門学校 Webデザイン学科

2014年10月28日にHTML5仕様がW3C勧告（W3C Recommendation）となりました。HTML5の話が聞かれ始めた当初には、勧告されたら全世界大騒ぎになるのかと思っていましたが、意外と普段通りでしたね。

これでHTML5は一段落ですが、引き続きHTML 5.1が2016年の勧告に向けて策定中であったりしますので、まだまだ進化は進みそうです。

さて本題。前回で最後と書きましたが、さらにform関連の要素や属性に関して具体的に使う場合、どのようなHTMLを書くと何が送られるのかなど、もう少しおさらいしたいと思います。

• form要素、label要素、fieldset要素、legend要素のおさらい（form関連要素編①）
• input要素のおさらい（form関連要素編②）
• textarea要素、option要素、select要素、button要素 他のおさらい（form関連要素編③）

基本はform要素で囲まれた中に書いていきます。form属性を利用するとform要素の外においても関連付けさせることができます。action属性で送信先のURLを指定し、input要素のtype属性がsubmit, imageもしくはbutton要素のtype属性submitで送信することができます。JavaScriptを利用すると他の要素やinput type="button"でも送信できますが、今回は説明しません。

……


送信する

form要素、label要素、fieldset要素、legend要素、input要素

受信するPHPファイルに下記のようなプログラムを記述します。type="file"は送信する画像から受け取るデータが複数あり表示させてあります。

textarea要素、option要素、select要素、output要素、keygen要素、button要素

これで、具体的な利用がイメージできるのではないでしょうか。

前回に引き続き、form要素関連のおさらいです。今回はHTML5になってから属性や値が大幅に進化したinput要素です。

input要素

input要素は、通常、ユーザーがデータを編集できるようにするためのフォームコントロールと、型指定されたデータフィールドを表す。type属性は、要素のデータ型（および関連するコントロール）を制御する。

W3C HTML5 仕様書より

input要素は、type属性（型）を変えることで、様々なデータの入力や送信を可能にするコントロールを作成できます。
type属性の初期値は、type="text"（1行入力欄）です。HTML5から新しく追加された属性値に対応しないブラウザは、デフォルトのtype="text" （1行入力欄）になります。

対応したスマートフォンなど、ソフトウェアキーボードを備えたデバイスでは、type属性値の種類によって、キーボードが適宜、初期表示されたりしますので、フォームをより便利にすることができます。

このtype属性の値によって、データの種類を指定し、さまざまなコントロールを作成することができます。

accept、alt、autocomplete、checked、dirname、formaction、formenctype、formmethod、formnovalidate、formtarget、height、list、max、maxlength、min、minlength、multiple、pattern、placeholder、readonly、required、size、src、step、widthコンテンツ属性、checked、files、valueAsDate、valueAsNumber、およびlistIDL属性、select()メソッド、selectionStart、selectionEnd、およびselectionDirectionIDL属性、setRangeText() and setSelectionRange()メソッド、stepUp() and stepDown()メソッド、inputおよびchangeイベントが、そのtype属性の状態に依存するinput要素に適用する。
各タイプを定義するサブセクションはまた、各タイプにこれらの機能を適用するものと適用しないものを、規範的"簿記"セクションで明瞭に定義する。これらの機能の動作は、それら様々なセクションで定義されるため、それらが適用するかどうかに依存する。

W3C HTML5 仕様書より

type属性値で指定できる属性

※HTML5はHTML5から新しく追加された属性値、属性になります。

type="hidden"

ブラウザ上に表示されない非表示データ（閲覧者の入力に関係なく送るクエリ値）を送信することができます。 隠しデータとも呼ばれますがHTMLソースには記述されています。

■属性

name属性

データが送信される際のクエリ名を指定します。

value属性

初期値を指定します。

disabled属性

入力コントールを無効にします。

form属性

任意のform要素に付与されたid属性値を指定することで関連付けを行います。

※name属性、value属性、disabled属性、form属性は全てのtype属性値に指定できます。

type="text"

1行入力欄が作成されます。name属性は入力欄に名前を付ける属性ですが、formでデータが送信される際、 name属性で指定した名前と入力された値が一組になって送信されます。

■属性

name属性、value属性、disabled属性、form属性

※type="hidden"参照

dirname属性

送信データの書字方向に関するクエリ値のクエリ名を指定します。

autofocus属性

文書読み込み時、自動的にフォーカスさせます。

autocomplete属性

オートコンプリートの有効 / 無効を設定します。HTML5

list属性

入力候補リストを指定します。HTML5

maxlength属性

入力可能な最大字数を指定します。

pattern属性

正規表現による入力チェックを行います。HTML5

placeholder属性

ダミーテキスト（プレースホルダ）を設定します。HTML5

readonly属性

読み込み専用にします。（編集不可）

required属性

入力を必須にします。HTML5

size属性

入力欄のサイズ（文字数）を指定します。

text

type="search"HTML5

検索テキスト入力欄が作成されます。name属性は入力欄に名前を付ける属性ですが、formでデータが送信される際、 name属性で指定した名前と入力された値が一組になって送信されます。

■属性

name属性、value属性、disabled属性、form属性

※type="hidden"参照

dirname属性

送信データの書字方向に関するクエリ値のクエリ名を指定します。

autofocus属性

文書読み込み時、自動的にフォーカスさせます。

autocomplete属性

オートコンプリートの有効 / 無効を設定します。HTML5

list属性

入力候補リストを指定します。HTML5

maxlength属性

入力可能な最大字数を指定します。

pattern属性

正規表現による入力チェックを行います。HTML5

placeholder属性

ダミーテキスト（プレースホルダ）を設定します。HTML5

readonly属性

読み込み専用にします。（編集不可）

required属性

入力を必須にします。HTML5

size属性

入力欄のサイズ（文字数）を指定します。

search

type="tel"HTML5

電話番号の入力欄となります。

■属性

name属性、value属性、disabled属性、form属性

※type="hidden"参照

autofocus属性

文書読み込み時、自動的にフォーカスさせます。

autocomplete属性

オートコンプリートの有効 / 無効を設定します。HTML5

list属性

入力候補リストを指定します。HTML5

maxlength属性

入力可能な最大字数を指定します。

pattern属性

正規表現による入力チェックを行います。HTML5

placeholder属性

ダミーテキスト（プレースホルダ）を設定します。HTML5

readonly属性

読み込み専用にします。（編集不可）

required属性

入力を必須にします。HTML5

size属性

入力欄のサイズ（文字数）を指定します。

Telephone

type="url"HTML5

URL入力欄が作成されます。対応しているブラウザでは、入力された値が「http://」で始まる妥当な絶対URLでは無い場合にエラーを返します。ユーザーは空文字を入力することができます。入力必須にする場合には、required属性を併用します。

■属性

name属性、value属性、disabled属性、form属性

※type="hidden"参照

autofocus属性

文書読み込み時、自動的にフォーカスさせます。

autocomplete属性

オートコンプリートの有効 / 無効を設定します。HTML5

list属性

入力候補リストを指定します。HTML5

maxlength属性

入力可能な最大字数を指定します。

pattern属性

正規表現による入力チェックを行います。HTML5

placeholder属性

ダミーテキスト（プレースホルダ）を設定します。HTML5

readonly属性

読み込み専用にします。（編集不可）

required属性

入力を必須にします。HTML5

size属性

入力欄のサイズ（文字数）を指定します。

Add your homepage

type="email"HTML5

メールアドレスの入力欄となります。対応しているブラウザでは、入力された値にアットマーク（ @ ）を含む妥当なメールアドレスでは無い場合にエラーを返します。
ユーザーは空文字を入力することができます。入力必須にする場合には、required属性を併用します。
multiple属性を指定すると、ユーザーが複数のメールアドレスを選択・入力できるようにすることができます。 この場合、送信される値は半角カンマ（ , ）区切りのリストとなります。

■属性

name属性、value属性、disabled属性、form属性

※type="hidden"参照

autofocus属性

文書読み込み時、自動的にフォーカスさせます。

autocomplete属性

オートコンプリートの有効 / 無効を設定します。HTML5

list属性

入力候補リストを指定します。HTML5

maxlength属性

入力可能な最大字数を指定します。

pattern属性

正規表現による入力チェックを行います。HTML5

placeholder属性

ダミーテキスト（プレースホルダ）を設定します。HTML5

readonly属性

読み込み専用にします。（編集不可）

required属性

入力を必須にします。HTML5

size属性

入力欄のサイズ（文字数）を指定します。

multiple属性

複数メールアドレスの入力を可能にします。HTML5

E-mail

type="password"

パスワードの入力欄となります。ブラウザ上では、入力内容は アスタリスク（ * ） など伏せ字で置き換えられ、画面上では見ることができないようになりますが、入力されたデータが暗号化されて送信されるわけではなく、 送信されたデータを受け取ることができれば内容を見ることができます。

■属性

name属性、value属性、disabled属性、form属性

※type="hidden"参照

autofocus属性

文書読み込み時、自動的にフォーカスさせます。

autocomplete属性

オートコンプリートの有効 / 無効を設定します。HTML5

list属性

入力候補リストを指定します。HTML5

maxlength属性

入力可能な最大字数を指定します。

pattern属性

正規表現による入力チェックを行います。HTML5

placeholder属性

ダミーテキスト（プレースホルダ）を設定します。HTML5

readonly属性

読み込み専用にします。（編集不可）

required属性

入力を必須にします。HTML5

size属性

入力欄のサイズ（文字数）を指定します。

type="datetime"HTML5

UTC（協定世界時）による日時の入力欄が作成されます。
入力された値はグローバル日時を表すことになります。 入力必須にする場合には、required属性を併用します。step属性の単位は秒、初期値は60となります。

ここで言うグローバル日時（global date and time）とは、協定世界時（UTC）をベースに指定する日時のことです。 UTC（Universal Time, Coordinated、協定世界時）とは、世界の公式な標準時刻のことです。 天体観測から決定されるグリニッジ標準時（GMT）とほぼ同じですが、UTCはセシウム原子時計が刻む国際原子時をもとに決定されています。 日本のローカル時刻はUTCに対して9時間進んでいるので、以下の書式でグローバル日時として指定します。

YYYY-MM-DDThh:mm:ssTZD
YYYY	年（4桁）
MM	月（2桁／01～12）
DD	日（2桁／01～31）
T	ここから時間が始まることを表す文字（大文字のT）
hh	時（2桁／00～23）
mm	分（2桁／00～59）
ss	秒（2桁／00～59）
TZD	タイムゾーン（Z,+hh:mm,-hh:mm） Z …… UTCそのものであることを表す文字（大文字のZ） +hh:mm …… UTCよりローカル時刻が進んでいる場合 -hh:mm …… UTCよりローカル時刻が遅れている場合

■属性

name属性、value属性、disabled属性、form属性

※type="hidden"参照

autofocus属性

文書読み込み時、自動的にフォーカスさせます。

autocomplete属性

オートコンプリートの有効 / 無効を設定します。HTML5

list属性

入力候補リストを指定します。

readonly属性

読み込み専用にします。（編集不可）

required属性

入力を必須にします。HTML5

size属性

入力欄のサイズ（文字数）を指定します。

max属性

入力可能な日時の最大値を指定します。HTML5

min属性

入力可能な日時の最小値を指定します。HTML5

step属性

日時の値の精度を秒単位で指定します。初期値は「60」です。HTML5

Birthday (date and time) 

Birthday (date and time)

type="date"HTML5

日付けの入力欄となります。対応するブラウザでは多くは、カレンダーのUIで表示され、選択することで日付けを入力できるようになります。
送信される値は、指定した日付けをyyyy-mm-ddという形式にした、2014-10-11（2014年10月11日） のような形式で送信されます。step属性の単位は日、初期値は1となります。

■属性

name属性、value属性、disabled属性、form属性

※type="hidden"参照

autofocus属性

文書読み込み時、自動的にフォーカスさせます。

autocomplete属性

オートコンプリートの有効 / 無効を設定します。HTML5

list属性

入力候補リストを指定します。

readonly属性

読み込み専用にします。（編集不可）

required属性

入力を必須にします。HTML5

size属性

入力欄のサイズ（文字数）を指定します。

max属性

入力可能な日時の最大値を指定します。HTML5

min属性

入力可能な日時の最小値を指定します。HTML5

step属性

日時の値の精度を秒単位で指定します。初期値は「1」です。HTML5

Birthday 

Birthday

type="month"HTML5

月の入力欄となります。対応するブラウザでは多くは、カレンダーのUIで表示され、選択することで日付けを入力できるようになります。送信される値は、指定した日付けをyyyy-mmという形式にした、2014-10（2014年10）のような形式で送信されます。step属性の単位は日、初期値は1となります。

■属性

name属性、value属性、disabled属性、form属性

※type="hidden"参照

autofocus属性

文書読み込み時、自動的にフォーカスさせます。

autocomplete属性

オートコンプリートの有効 / 無効を設定します。HTML5

list属性

入力候補リストを指定します。

readonly属性

読み込み専用にします。（編集不可）

required属性

入力を必須にします。HTML5

size属性

入力欄のサイズ（文字数）を指定します。

max属性

入力可能な日時の最大値を指定します。HTML5

min属性

入力可能な日時の最小値を指定します。HTML5

step属性

日時の値の精度を秒単位で指定します。初期値は「1」です。HTML5

Birthday (month and year)  

Birthday (month and year)

type="week"HTML5

週の入力欄となります。対応するブラウザでは多くは、カレンダーのUIで表示され、選択することで日付けを入力できるようになります。送信される値は、指定した日付けをyyyy-Wwwという形式にした、2014-W30（2014年第30週 7月21日〜7月27日）のような形式で送信されます。step属性の単位は日、初期値は1となります。

■属性

name属性、value属性、disabled属性、form属性

※type="hidden"参照

autofocus属性

文書読み込み時、自動的にフォーカスさせます。

autocomplete属性

オートコンプリートの有効 / 無効を設定します。HTML5

list属性

入力候補リストを指定します。

readonly属性

読み込み専用にします。（編集不可）

required属性

入力を必須にします。HTML5

size属性

入力欄のサイズ（文字数）を指定します。

max属性

入力可能な日時の最大値を指定します。HTML5

min属性

入力可能な日時の最小値を指定します。HTML5

step属性

日時の値の精度を秒単位で指定します。初期値は「1」です。HTML5

Select a week 

Select a week

type="time"HTML5

週の入力欄となります。対応するブラウザでは多くは、カレンダーのUIで表示され、選択することで日付けを入力できるようになります。
送信される値は、指定した日付けをhh:mm:ssという形式にした、18:30:55（18時30分55秒）のような形式で送信されます。step属性の単位は日、初期値は60となります。

■属性

name属性、value属性、disabled属性、form属性

※type="hidden"参照

autofocus属性

文書読み込み時、自動的にフォーカスさせます。

autocomplete属性

オートコンプリートの有効 / 無効を設定します。HTML5

list属性

入力候補リストを指定します。

readonly属性

読み込み専用にします。（編集不可）

required属性

入力を必須にします。HTML5

size属性

入力欄のサイズ（文字数）を指定します。

max属性

入力可能な日時の最大値を指定します。HTML5

min属性

入力可能な日時の最小値を指定します。HTML5

step属性

日時の値の精度を秒単位で指定します。初期値は「60」です。HTML5

Select a time 

Select a time

type="datetime-local"HTML5

日時の入力欄となります。対応するブラウザでは多くは、カレンダーのUIで表示され、選択することで日付けを入力できるようになります。
送信される日時は閲覧者の現地時間となり、送信される値は、日時を ISO 8601 形式 （yyyy-mm-ddThh:mm:ss） にした2014-10-11T18:30:55（2014年10月11日18時30分55秒）のような形式で送信されます。step属性の単位は日、初期値は60となります。

■属性

name属性、value属性、disabled属性、form属性

※type="hidden"参照

autofocus属性

文書読み込み時、自動的にフォーカスさせます。

autocomplete属性

オートコンプリートの有効 / 無効を設定します。HTML5

list属性

入力候補リストを指定します。

readonly属性

読み込み専用にします。（編集不可）

required属性

入力を必須にします。HTML5

size属性

入力欄のサイズ（文字数）を指定します。

max属性

入力可能な日時の最大値を指定します。HTML5

min属性

入力可能な日時の最小値を指定します。HTML5

step属性

日時の値の精度を秒単位で指定します。初期値は「60」です。HTML5

Birthday (date and time)  

Birthday (date and time)

type="number"HTML5

数値の入力欄となります。対応しているブラウザでは、入力された値に数値以外の入力が送信されようとするとエラーを返します。step属性の初期値は1となります。

■属性

name属性、value属性、disabled属性、form属性

※type="hidden"参照

autofocus属性

文書読み込み時、自動的にフォーカスさせます。

autocomplete属性

オートコンプリートの有効 / 無効を設定します。HTML5

list属性

入力候補リストを指定します。

pattern属性

正規表現による入力チェックを行います。

placeholder属性

ダミーテキスト （プレースホルダ） を設定します。

readonly属性

読み込み専用にします。（編集不可）

required属性

入力を必須にします。HTML5

max属性

入力可能な日時の最大値を指定します。HTML5

min属性

入力可能な日時の最小値を指定します。HTML5

step属性

日時の値の精度を秒単位で指定します。初期値は「1」です。HTML5

Quantity (between 1 and 5) 

Quantity (between 1 and 5)

type="range"HTML5

数値のレンジ入力欄が作成されます。ただし、それほど厳密ではない、音量のボリュームや明るさの調節など大まかな数値の入力となります。
min属性の初期値は0、max属性の初期値は100となります。 また、step属性の初期値は1となります。 ユーザーが指定できる度合いの範囲や刻み方は強制され、ユーザーは空の値を指定することはできません。

■属性

name属性、value属性、disabled属性、form属性

※type="hidden"参照

autofocus属性

文書読み込み時、自動的にフォーカスさせます。

autocomplete属性

オートコンプリートの有効 / 無効を設定します。HTML5

list属性

入力候補リストを指定します。

max属性

入力可能な日時の最大値を指定します。HTML5

min属性

入力可能な日時の最小値を指定します。HTML5

step属性

日時の値の精度を秒単位で指定します。初期値は「1」です。HTML5

type="color"HTML5

RGB カラーの入力欄となります。対応するブラウザでは、色を選択するためのユーザインタフェースが表示され、それを操作することで数値を入力できます。
常に何らかの色が選択された状態となり、 空の値を指定することはできません。

■属性

name属性、value属性、disabled属性、form属性

※type="hidden"参照

autofocus属性

文書読み込み時、自動的にフォーカスさせます。

autocomplete属性

オートコンプリートの有効 / 無効を設定します。HTML5

list属性

入力候補リストを指定します。

Select your favorite color 

Select your favorite color

type="checkbox"

複数用意された選択肢の中から複数の項目を選択できるチェックボックスが作成されます。

■属性

name属性、value属性、disabled属性、form属性

※type="hidden"参照

required属性

入力を必須にします。HTML5

checked属性

あらかじめ選択した状態にします。

AAAAA
BBBBB
CCCCC

• AAA
• BBB
• CCC

type="radio"

用意された選択肢の中からひとつを選択できるラジオボタンが作成されます。

■属性

name属性、value属性、disabled属性、form属性

※type="hidden"参照

required属性

入力を必須にします。HTML5

checked属性

あらかじめ選択した状態にします。

 AAAAA
 BBBBB
 CCCCC

• AAAAA
• BBBBB
• CCCCC

type="file"

ファイル名の入力フィールドと[参照]ボタンが表示され、サーバーへ送信するファイルを選択できるようになります。
HTML5 では、multiple属性が新たに策定されたことによって、複数のファイルを選択して送信することが可能になりました。

■属性

name属性、value属性、disabled属性、form属性

※type="hidden"参照

autofocus属性

文書読み込み時、自動的にフォーカスさせます。

required属性

入力を必須にします。HTML5

accept属性

受け付けるファイルの MIME タイプ、または拡張子を指定します。

multiple属性

複数ファイルの選択を可能にします。HTML5

file 

type="submit"

フォームの送信ボタンを作成します。formaction属性（送信先URL）・formenctype属性（送信するデータの形式）・formmethod属性（送信方法）・formnovalidate属性（入力されたデータの妥当性を確認しない）・formtarget属性（フォーム送信するターゲット先）は、formの属性でも同様の指定をすることができますが、input要素側でこれらの属性を指定すると、formの指定より優先されます。

■属性

name属性、value属性、disabled属性、form属性

※type="hidden"参照

autofocus属性

文書読み込み時、自動的にフォーカスさせます。

required属性

入力を必須にします。HTML5

accept属性

受け付けるファイルの MIME タイプ、または拡張子を指定します。

multiple属性

複数ファイルの選択を可能にします。HTML5

formaction属性

form要素のaction 属性値を上書きします。HTML5

formenctype属性

form要素のenctype 属性値を上書きします。HTML5

formmethod属性

form要素のmethod 属性値を上書きします。HTML5

formnovalidate属性

form要素のnovalidate 属性値を上書きする。HTML5

formtarget属性

form要素のtarget 属性値を上書きします。HTML5

type="image"

画像形式のボタンを作成します。 画像ファイルはsrc属性で指定します。画像ボタンにはalt属性が必須となります。

■属性

name属性、value属性、disabled属性、form属性

※type="hidden"参照

autofocus属性

文書読み込み時、自動的にフォーカスさせます。

src属性（必須属性）

ボタン画像の URI を指定します。

alt属性（必須属性）

ボタン画像の代替テキストを指定します。

width属性

ボタンの表示サイズの横幅（px）を指定します。

height属性

ボタンの表示サイズの高さ（px）を指定します。

formaction属性

form要素のaction 属性値を上書きします。HTML5

formenctype属性

form要素のenctype 属性値を上書きします。HTML5

formmethod属性

form要素のmethod 属性値を上書きします。HTML5

formnovalidate属性

form要素のnovalidate 属性値を上書きする。HTML5

formtarget属性

form要素のtarget 属性値を上書きします。HTML5

type="reset"

フォームに入力した内容のリセットボタンとなります。

■属性

name属性、value属性、disabled属性、form属性

※type="hidden"参照

autofocus属性

文書読み込み時、自動的にフォーカスさせます。

type="button"

汎用ボタンを作成します。イベントハンドラ属性などによって、JavaScriptなどの発動ボタンとしても利用します。

■属性

name属性、value属性、disabled属性、form属性

※type="hidden"参照

autofocus属性

文書読み込み時、自動的にフォーカスさせます。

HTML5から途端に属性が増えたので、ついつい後回しにしてしまいがちなinput要素ですが、CMSやシステムと絡めた制作の場合は、必ず利用するタグになりますので、しっかりと理解しておいて損はありません。ChromeとOperaが先行していますが、他のブラウザも対応が進んでいます。
各type属性値・input属性のブラウザ対応状況は、Mozillaのサイトに掲載、随時更新されているようです。
input 要素 - HTML | MDN 参照
input 要素 | HTML5 タグリファレンス | W3 Watch Reference
HTML5 Input Types｜W3Schools.com
<input>－HTML5タグリファレンス｜HTMLクイックリファレンス
form関連要素は、まだまだありますので残りは次回以降。