input 要素入力コントロールを表示する

フォームにおける入力コントロール (入力欄) を表します。type 属性の値に入力コントロールの種別を与えることで、様々な入力コントロールを表示させることができます。

type 属性に指定できる値と入力コントロールの機能は下記の通りです。

type 属性値 機能
hidden 閲覧者には表示しないデータです。
text 1行テキストの入力欄です。 (初期値)
search 検索ワードの入力欄です。
tel 電話番号の入力欄です。
url URI の入力欄です。
email メールアドレスの入力欄です。
password パスワードの入力欄です。
date 日付けの入力欄です。
month 月の入力欄です。
week 週の入力欄です。
time 時間の入力欄です。
datetime-local 現地時間の入力欄です。
number 数値の入力欄です。
range 数値の入力欄です。 (ただし厳格でない大まかな数値)
color RGB カラーの入力欄です。
checkbox チェックボックスです。 (複数選択可能)
radio ラジオボタンです。 (1つだけ選択可能)
file 送信するファイルの選択が可能です。
submit 送信ボタンです。
image 画像形式の送信ボタンです。
reset 入力内容のリセットボタンです。
button スクリプト言語起動用のボタンです。

さらに詳細な説明を見る

サンプルソースを見る

input 要素の仕様

カテゴリ
  • type 属性値が hidden でない場合はインタラクティブ・コンテンツ
  • type 属性値が hidden でない場合はパルパブル・コンテンツ
  • type 属性値が hidden でない場合はリスト、ラベル付け、サブミット、リセット可能なフォーム関連要素
  • type 属性値が hidden の場合はリスト、サブミット、リセット可能なフォーム関連要素
コンテンツモデル
この要素を使用できる文脈

フレージング・コンテンツが期待される場所

この要素で使用できる属性
DOM インタフェース
interface HTMLInputElement : HTMLElement {
  attribute DOMString accept;
  attribute DOMString alt;
  attribute DOMString autocomplete;
  attribute boolean autofocus;
  attribute boolean defaultChecked;
  attribute boolean checked;
  attribute DOMString dirName;
  attribute boolean disabled;
  readonly attribute HTMLFormElement? form;
  readonly attribute FileList? files;
  attribute DOMString formAction;
  attribute DOMString formEnctype;
  attribute DOMString formMethod;
  attribute boolean formNoValidate;
  attribute DOMString formTarget;
  attribute unsigned long height;
  attribute boolean indeterminate;
  attribute DOMString inputMode;
  readonly attribute HTMLElement? list;
  attribute DOMString max;
  attribute long maxLength;
  attribute DOMString min;
  attribute long minLength;
  attribute boolean multiple;
  attribute DOMString name;
  attribute DOMString pattern;
  attribute DOMString placeholder;
  attribute boolean readOnly;
  attribute boolean required;
  attribute unsigned long size;
  attribute DOMString src;
  attribute DOMString step;
  attribute DOMString type;
  attribute DOMString defaultValue;
  [TreatNullAs=EmptyString] attribute DOMString value;
  attribute object? valueAsDate;
  attribute unrestricted double valueAsNumber;
  attribute unsigned long width;

  void stepUp(optional long n
 = 1);
  void stepDown(optional long n
 = 1);

  readonly attribute boolean willValidate;
  readonly attribute ValidityState validity;
  readonly attribute DOMString validationMessage;
  boolean checkValidity();
  boolean reportValidity();
  void setCustomValidity(DOMString error
);

  [SameObject] readonly attribute NodeList labels;

  void select();
  attribute unsigned long selectionStart;
  attribute unsigned long selectionEnd;
  attribute DOMString selectionDirection;
  void setRangeText(DOMString replacement
);
  void setRangeText(DOMString replacement
, unsigned long start
, unsigned long end
, optional SelectionMode selectionMode
 = "preserve");
  void setSelectionRange(unsigned long start
, unsigned long end
, optional DOMString direction
);
};

詳細説明

type 属性値ごとの詳細

type 属性値として下記の値は HTML5 で新たに策定されました。

  • search
  • tel
  • url
  • email
  • date
  • month
  • week
  • time
  • datetime-local
  • number
  • range
  • color

これら属性値に対応しないブラウザでは、type="text" と同様の 1行入力欄になりますので、非対応のブラウザから場合によっては指定以外のデータが送信されることを想定して、それを受け取るサーバ側での処理を考えておく必要があります。

対応したブラウザでは、値に応じた入力コントロールの表示がされるほか、スマートフォンなど、ソフトウェアキーボードを備えたデバイスでは、入力コントロールの種類に応じて、適切なキーボードが初期表示されたりしますので、用途にあわせて type 属性値を適切に設定すれば、フォームをより便利にすることが可能です。

input type="hidden"

type="hidden" が指定された input 要素は、閲覧者には表示させないで送信されるデータとなります。例えば閲覧者の入力に関係なく必ず送信するクエリ値などを指定するなどの用途で利用できます。

ただし、HTML ソース上に記述されるため、見られてはいけない値の送信には適しません。

type="hidden" が指定された input 要素で使用できる属性は下記の通りです。

属性 役割
name 属性 データが送信される際のクエリ名を指定します。
value 属性 初期値を指定します。
disabled 属性 入力コントールを無効にします。
form 属性 任意の form 要素に付与された id 属性値を指定することで関連付けを行います。

input type="text"

type="text" が指定された input 要素は、1行テキストの入力欄となります。type 属性が省略された場合もこの値が指定されたものとして扱われます。

type="text" が指定された input 要素で使用できる属性は下記の通りです。

属性 役割
name 属性 データが送信される際のクエリ名を指定します。
value 属性 初期値を指定します。
disabled 属性 入力コントールを無効にします。
form 属性 任意の form 要素に付与された id 属性値を指定することで関連付けを行います。
dirname 属性 送信データの書字方向に関するクエリ値のクエリ名を指定します。
autofocus 属性 文書読み込み時、自動的にフォーカスさせます。
autocomplete 属性 オートコンプリートの有効 / 無効を設定します。
list 属性 入力候補リストを指定します。
maxlength 属性 入力可能な最大字数を指定します。
pattern 属性 正規表現による入力チェックを行います。
placeholder 属性 ダミーテキスト (プレースホルダ) を設定します。
readonly 属性 読み込み専用にします。 (編集不可)
required 属性 入力を必須にします。
size 属性 入力欄のサイズ (文字数) を指定します。

実際の表示サンプル

対応するブラウザでは下記に実際の入力コントロールが表示されます。

text

type="search" が指定された input 要素は、検索のための入力欄となります。対応するブラウザでは、入力欄の見た目が検索フォーム専用のものになる場合が多いです。

type="search" が指定された input 要素で使用できる属性は下記の通りです。

属性 役割
name 属性 データが送信される際のクエリ名を指定します。
value 属性 初期値を指定します。
disabled 属性 入力コントールを無効にします。
form 属性 任意の form 要素に付与された id 属性値を指定することで関連付けを行います。
dirname 属性 送信データの書字方向に関するクエリ値のクエリ名を指定します。
autofocus 属性 文書読み込み時、自動的にフォーカスさせます。
autocomplete 属性 オートコンプリートの有効 / 無効を設定します。
list 属性 入力候補リストを指定します。
maxlength 属性 入力可能な最大字数を指定します。
pattern 属性 正規表現による入力チェックを行います。
placeholder 属性 ダミーテキスト (プレースホルダ) を設定します。
readonly 属性 読み込み専用にします。 (編集不可)
required 属性 入力を必須にします。
size 属性 入力欄のサイズ (文字数) を指定します。

実際の表示サンプル

対応するブラウザでは下記に実際の入力コントロールが表示されます。

search

input type="tel"

type="tel" が指定された input 要素は、電話番号の入力欄となります。

type="tel" が指定された input 要素で使用できる属性は下記の通りです。

属性 役割
name 属性 データが送信される際のクエリ名を指定します。
value 属性 初期値を指定します。
disabled 属性 入力コントールを無効にします。
form 属性 任意の form 要素に付与された id 属性値を指定することで関連付けを行います。
autofocus 属性 文書読み込み時、自動的にフォーカスさせます。
autocomplete 属性 オートコンプリートの有効 / 無効を設定します。
list 属性 入力候補リストを指定します。
maxlength 属性 入力可能な最大字数を指定します。
pattern 属性 正規表現による入力チェックを行います。
placeholder 属性 ダミーテキスト (プレースホルダ) を設定します。
readonly 属性 読み込み専用にします。 (編集不可)
required 属性 入力を必須にします。
size 属性 入力欄のサイズ (文字数) を指定します。

実際の表示サンプル

対応するブラウザでは下記に実際の入力コントロールが表示されます。

tel

input type="url"

type="url" が指定された input 要素は、URL の入力欄となります。対応しているブラウザでは、URL として適切ではない入力が送信されようとした場合、エラーを返します。

type="url" が指定された input 要素で使用できる属性は下記の通りです。

属性 役割
name 属性 データが送信される際のクエリ名を指定します。
value 属性 初期値を指定します。
disabled 属性 入力コントールを無効にします。
form 属性 任意の form 要素に付与された id 属性値を指定することで関連付けを行います。
autofocus 属性 文書読み込み時、自動的にフォーカスさせます。
autocomplete 属性 オートコンプリートの有効 / 無効を設定します。
list 属性 入力候補リストを指定します。
maxlength 属性 入力可能な最大字数を指定します。
pattern 属性 正規表現による入力チェックを行います。
placeholder 属性 ダミーテキスト (プレースホルダ) を設定します。
readonly 属性 読み込み専用にします。 (編集不可)
required 属性 入力を必須にします。
size 属性 入力欄のサイズ (文字数) を指定します。

実際の表示サンプル

対応するブラウザでは下記に実際の入力コントロールが表示されます。

url

input type="email"

type="email" が指定された input 要素は、メールアドレスの入力欄となります。対応しているブラウザでは、メールアドレスとして適切ではない入力が送信されようとした場合、エラーを返します。

type="email" が指定された input 要素で使用できる属性は下記の通りです。

属性 役割
name 属性 データが送信される際のクエリ名を指定します。
value 属性 初期値を指定します。
disabled 属性 入力コントールを無効にします。
form 属性 任意の form 要素に付与された id 属性値を指定することで関連付けを行います。
autofocus 属性 文書読み込み時、自動的にフォーカスさせます。
autocomplete 属性 オートコンプリートの有効 / 無効を設定します。
list 属性 入力候補リストを指定します。
maxlength 属性 入力可能な最大字数を指定します。
pattern 属性 正規表現による入力チェックを行います。
placeholder 属性 ダミーテキスト (プレースホルダ) を設定します。
readonly 属性 読み込み専用にします。 (編集不可)
required 属性 入力を必須にします。
size 属性値 入力欄のサイズ (文字数) を指定します。
multiple 属性 複数メールアドレスの入力を可能にします。

実際の表示サンプル

対応するブラウザでは下記に実際の入力コントロールが表示されます。

email

input type="password"

type="password" が指定された input 要素は、パスワードの入力欄となります。通常、入力内容は 「*」 など伏せ字で置き換えられ、画面上では見ることができないようになります。

type="password" が指定された input 要素で使用できる属性は下記の通りです。

属性 役割
name 属性 データが送信される際のクエリ名を指定します。
value 属性 初期値を指定します。
disabled 属性 入力コントールを無効にします。
form 属性 任意の form 要素に付与された id 属性値を指定することで関連付けを行います。
autofocus 属性 文書読み込み時、自動的にフォーカスさせます。
autocomplete 属性 オートコンプリートの有効 / 無効を設定します。
list 属性 入力候補リストを指定します。
maxlength 属性 入力可能な最大字数を指定します。
pattern 属性 正規表現による入力チェックを行います。
placeholder 属性 ダミーテキスト (プレースホルダ) を設定します。
readonly 属性 読み込み専用にします。 (編集不可)
required 属性 入力を必須にします。
size 属性 入力欄のサイズ (文字数) を指定します。

実際の表示サンプル

対応するブラウザでは下記に実際の入力コントロールが表示されます。

password

input type="date"

type="date" が指定された input 要素は、日付けの入力欄となります。対応するブラウザでは多くの場合、カレンダーのユーザインタフェースが表示され、そこから選択することで日付けを入力できるようになります。

送信される値は、指定した日付けを yyyy-mm-dd という形式にした、2013-06-14 (この場合、2013年6月14日) のような形式で送信されます。

type="date" が指定された input 要素で使用できる属性は下記の通りです。

属性 役割
name 属性 データが送信される際のクエリ名を指定します。
value 属性 初期値を指定します。
disabled 属性 入力コントールを無効にします。
form 属性 任意の form 要素に付与された id 属性値を指定することで関連付けを行います。
autofocus 属性 文書読み込み時、自動的にフォーカスさせます。
autocomplete 属性 オートコンプリートの有効 / 無効を設定します。
list 属性 入力候補リストを指定します。
readonly 属性 読み込み専用にします。 (編集不可)
required 属性 入力を必須にします。
max 属性 入力可能な日の最大値を指定します。
min 属性 入力可能な日の最小値を指定します。
step 属性 日時の値の精度を日単位で指定します。。初期値は 「1」 です。

実際の表示サンプル

対応するブラウザでは下記に実際の入力コントロールが表示されます。

date

input type="month"

type="month" が指定された input 要素は、月の入力欄となります。対応するブラウザでは多くの場合、カレンダーのユーザインタフェースが表示され、そこから選択することで日付けを入力できるようになります。

送信される値は、指定した月を yyyy-mm という形式にした、2013-06 (この場合、2013年6月) のような形式で送信されます。

type="month" が指定された input 要素で使用できる属性は下記の通りです。

属性 役割
name 属性 データが送信される際のクエリ名を指定します。
value 属性 初期値を指定します。
disabled 属性 入力コントールを無効にします。
form 属性 任意の form 要素に付与された id 属性値を指定することで関連付けを行います。
autofocus 属性 文書読み込み時、自動的にフォーカスさせます。
autocomplete 属性 オートコンプリートの有効 / 無効を設定します。
list 属性 入力候補リストを指定します。
readonly 属性 読み込み専用にします。 (編集不可)
required 属性 入力を必須にします。
max 属性 入力可能な月の最大値を指定します。
min 属性 入力可能な月の最小値を指定します。
step 属性 日時の値の精度を月単位で指定します。初期値は 「1」 です。

実際の表示サンプル

対応するブラウザでは下記に実際の入力コントロールが表示されます。

month

input type="week"

type="week" が指定された input 要素は、週の入力欄となります。対応するブラウザでは多くの場合、カレンダーのユーザインタフェースが表示され、そこから選択することで日付けを入力できるようになります。

送信される値は、指定した週を yyyy-Www という形式 (ww は暦週の番号。その年の最初の週を第1週としての通算) にした、2013-W10 (この場合、2013年の第10週 = 3月4日~3月10日) のような形式で送信されます。

type="week" が指定された input 要素で使用できる属性は下記の通りです。

属性 役割
name 属性 データが送信される際のクエリ名を指定します。
value 属性 初期値を指定します。
disabled 属性 入力コントールを無効にします。
form 属性 任意の form 要素に付与された id 属性値を指定することで関連付けを行います。
autofocus 属性 文書読み込み時、自動的にフォーカスさせます。
autocomplete 属性 オートコンプリートの有効 / 無効を設定します。
list 属性 入力候補リストを指定します。
readonly 属性 読み込み専用にします。 (編集不可)
required 属性 入力を必須にします。
max 属性 入力可能な週の最大値を指定します。
min 属性 入力可能な週の最小値を指定します。
step 属性 日時の値の精度を週単位で指定します。。初期値は 「1」 です。

実際の表示サンプル

対応するブラウザでは下記に実際の入力コントロールが表示されます。

week

input type="time"

type="time" が指定された input 要素は、日付けの入力欄となります。対応するブラウザでは多くの場合、カレンダーのユーザインタフェースが表示され、そこから選択することで日付けを入力できるようになります。

送信される値は、指定した時刻を hh:mm:ss という形式にした、14:05:34 (この場合、14時5分34秒) のような形式で送信されます。

type="time" が指定された input 要素で使用できる属性は下記の通りです。

属性 役割
name 属性 データが送信される際のクエリ名を指定します。
value 属性 初期値を指定します。
disabled 属性 入力コントールを無効にします。
form 属性 任意の form 要素に付与された id 属性値を指定することで関連付けを行います。
autofocus 属性 文書読み込み時、自動的にフォーカスさせます。
autocomplete 属性 オートコンプリートの有効 / 無効を設定します。
list 属性 入力候補リストを指定します。
readonly 属性 読み込み専用にします。 (編集不可)
required 属性 入力を必須にします。
max 属性 入力可能な時間の最大値を指定します。
min 属性 入力可能な時間の最小値を指定します。
step 属性 日時の値の精度を秒単位で指定します。初期値は 「60」 です。

実際の表示サンプル

対応するブラウザでは下記に実際の入力コントロールが表示されます。

time

input type="datetime-local"

type="datetime-local" が指定された input 要素は、日時の入力欄となります。対応するブラウザでは多くの場合、カレンダーのユーザインタフェースと時計や時間入力のユーザインタフェースが表示され、そこから選択することで日時を入力できるようになります。

この値を指定された入力コントロールから送信される日時は、閲覧者の現地時間となります。

送信される値は、指定した日時を ISO 8601 形式 (yyyy-mm-ddThh:mm:ss) にした、2013-06-14T14:05:34 (この場合、2013年6月14日14時5分34秒) のような形式で送信されます。

type="datetime-local" が指定された input 要素で使用できる属性は下記の通りです。

属性 役割
name 属性 データが送信される際のクエリ名を指定します。
value 属性 初期値を指定します。
disabled 属性 入力コントールを無効にします。
form 属性 任意の form 要素に付与された id 属性値を指定することで関連付けを行います。
autofocus 属性 文書読み込み時、自動的にフォーカスさせます。
autocomplete 属性 オートコンプリートの有効 / 無効を設定します。
list 属性 入力候補リストを指定します。
readonly 属性 読み込み専用にします。 (編集不可)
required 属性 入力を必須にします。
max 属性 入力可能な日時の最大値を指定します。
min 属性 入力可能な日時の最小値を指定します。
step 属性 日時の値の精度を秒単位で指定します。。初期値は 「1」 です。

実際の表示サンプル

対応するブラウザでは下記に実際の入力コントロールが表示されます。

datetime-local

input type="number"

type="number" が指定された input 要素は、数値の入力欄となります。対応しているブラウザでは、数値以外の入力が送信されようとした場合、エラーを返します。

type="number" が指定された input 要素で使用できる属性は下記の通りです。

属性 役割
name 属性 データが送信される際のクエリ名を指定します。
value 属性 初期値を指定します。
disabled 属性 入力コントールを無効にします。
form 属性 任意の form 要素に付与された id 属性値を指定することで関連付けを行います。
autofocus 属性 文書読み込み時、自動的にフォーカスさせます。
autocomplete 属性 オートコンプリートの有効 / 無効を設定します。
list 属性 入力候補リストを指定します。
pattern 属性 正規表現による入力チェックを行います。
placeholder 属性 ダミーテキスト (プレースホルダ) を設定します。
readonly 属性 読み込み専用にします。 (編集不可)
required 属性 入力を必須にします。
max 属性 入力可能な数値の最大値を指定します。
min 属性 入力可能な数値の最小値を指定します。
step 属性 数値の精度を指定します。初期値は 「1」 です。

実際の表示サンプル

対応するブラウザでは下記に実際の入力コントロールが表示されます。

number

input type="range"

type="range" が指定された input 要素は、数値の入力欄となります。ただし、それほど厳密ではない、大まかな数値の入力欄です。対応するブラウザでは、多くの場合、スライダー形式のユーザインタフェースが表示され、それを操作することで数値を入力できます。

type="range" が指定された input 要素で使用できる属性は下記の通りです。

属性 役割
name 属性 データが送信される際のクエリ名を指定します。
value 属性 初期値を指定します。
disabled 属性 入力コントールを無効にします。
form 属性 任意の form 要素に付与された id 属性値を指定することで関連付けを行います。
autofocus 属性 文書読み込み時、自動的にフォーカスさせます。
autocomplete 属性 オートコンプリートの有効 / 無効を設定します。
list 属性 入力候補リストを指定します。
max 属性 入力可能な数値の最大値を指定します。初期値は 「100」 です。
min 属性 入力可能な数値の最小値を指定します。初期値は 「0」 です。
step 属性 数値の精度を秒単位で指定します。初期値は 「1」 です。

実際の表示サンプル

対応するブラウザでは下記に実際の入力コントロールが表示されます。

range

input type="color"

type="color" が指定された input 要素は、RGB カラーの入力欄となります。対応するブラウザでは、多くの場合、色を選択するためのユーザインタフェースが表示され、それを操作することで数値を入力できます。

送信されるデータは、RGB 値を 16進数に変換したカラーコードです。例えば #1abc9c のような形式になります。

type="color" が指定された input 要素で使用できる属性は下記の通りです。

属性 役割
name 属性 データが送信される際のクエリ名を指定します。
value 属性 初期値を指定します。
disabled 属性 入力コントールを無効にします。
form 属性 任意の form 要素に付与された id 属性値を指定することで関連付けを行います。
autofocus 属性 文書読み込み時、自動的にフォーカスさせます。
autocomplete 属性 オートコンプリートの有効 / 無効を設定します。
list 属性 入力候補リストを指定します。

実際の表示サンプル

対応するブラウザでは下記に実際の入力コントロールが表示されます。

color:

input type="checkbox"

type="checkbox" が指定された input 要素は、複数選択可能なチェックボックスとなります。

type="checkbox" が指定された input 要素で使用できる属性は下記の通りです。

属性 役割
name 属性 データが送信される際のクエリ名を指定する。同じフォーム内にある同じ name 属性値を持った type="checkbox" はひとまとまりになり、その中から選択可能になります。
value 属性 送信されるクエリ値を指定します。
disabled 属性 入力コントールを無効にします。
form 属性 任意の form 要素に付与された id 属性値を指定することで関連付けを行います。
required 属性 入力を必須にします。
checked 属性 あらかじめ選択した状態にします。

実際の表示サンプル

対応するブラウザでは下記に実際の入力コントロールが表示されます。

input type="radio"

type="radio" が指定された input 要素は、1つだけ選択可能なラジオボタンとなります。

type="radio" が指定された input 要素で使用できる属性は下記の通りです。

属性 役割
name 属性 データが送信される際のクエリ名を指定する。同じフォーム内にある同じ name 属性値を持った type="radio" はひとまとまりになり、その中から 1つだけ選択可能になります。
value 属性 送信されるクエリ値を指定します。
disabled 属性 入力コントールを無効にします。
form 属性 任意の form 要素に付与された id 属性値を指定することで関連付けを行います。
required 属性 入力を必須にします。
checked 属性 あらかじめ選択した状態にします。

実際の表示サンプル

対応するブラウザでは下記に実際の入力コントロールが表示されます。

input type="file"

type="file" が指定された input 要素は、送信するファイルの選択欄となります。この属性値自体は新しいものではありませんが、HTML5 では、この形式の入力コントロールに指定できる multiple 属性が新たに策定されたことによって、複数のファイルを選択して送信することが可能になりました。

なお、画像ファイルを正しく送信するために、この入力コントロールを使用する form 要素は、method="post" を指定し、enctype="multipart/form-data" を付与して、マルチパートのデータを送信できるようにする必要があります。

type="file" が指定された input 要素で使用できる属性は下記の通りです。

属性 役割
name 属性 データが送信される際のクエリ名を指定します。
value 属性 送信されるクエリ値を指定します。
disabled 属性 入力コントールを無効にします。
form 属性 任意の form 要素に付与された id 属性値を指定することで関連付けを行います。
autofocus 属性 文書読み込み時、自動的にフォーカスさせます。
required 属性 入力を必須にします。
accept 属性 受け付けるファイルの MIME タイプ、または拡張子を指定します。
multiple 属性 複数ファイルの選択を可能にします。

実際の表示サンプル

対応するブラウザでは下記に実際の入力コントロールが表示されます。

file

input type="submit"

type="submit" が指定された input 要素は、送信ボタンとなります。

type="submit" が指定された input 要素で使用できる属性は下記の通りです。

属性 役割
name 属性 送信されるクエリ名を指定します。
value 属性 送信されるクエリ値を指定。また、ボタンに表示されるラベルとしても使用されます。
disabled 属性 入力コントールを無効にします。
form 属性 任意の form 要素に付与された id 属性値を指定することで関連付けを行います。
autofocus 属性 文書読み込み時、自動的にフォーカスさせます。
formaction 属性 form 要素の action 属性値を上書きします。
formenctype 属性 form 要素の enctype 属性値を上書きします。
formmethod 属性 form 要素の method 属性値を上書きします。
formnovalidate 属性 form 要素の novalidate 属性値を上書きする
formtarget 属性 form 要素の target 属性値を上書きします。

実際の表示サンプル

対応するブラウザでは下記に実際の入力コントロールが表示されます。

submit

input type="image"

type="image" が指定された input 要素は、画像形式の送信ボタンとなります。

type="image" が指定された input 要素で使用できる属性は下記の通りです。

属性 役割
name 属性 送信されるクエリ名を指定します。
value 属性 送信されるクエリ値を指定します。また、ボタンに表示されるラベルとしても使用されます。
disabled 属性 入力コントールを無効にします。
form 属性 任意の form 要素に付与された id 属性値を指定することで関連付けを行います。
autofocus 属性 文書読み込み時、自動的にフォーカスさせます。
src 属性 (必須属性) ボタン画像の URI を指定します。
alt 属性 (必須属性) ボタン画像の代替テキストを指定します。
width 属性 ボタンの表示サイズの横幅 (px) を指定します。
height 属性 ボタンの表示サイズの高さ (px) を指定します。
formaction 属性 form 要素の action 属性値を上書きします。
formenctype 属性 form 要素の enctype 属性値を上書きします。
formmethod 属性 form 要素の method 属性値を上書きします。
formnovalidate 属性 form 要素の novalidate 属性値を上書きします。
formtarget 属性 form 要素の target 属性値を上書きします。

実際の表示サンプル

対応するブラウザでは下記に実際の入力コントロールが表示されます。

image

input type="reset"

type="reset" が指定された input 要素は、フォームに入力した内容のリセットボタンとなります。

type="reset" が指定された input 要素で使用できる属性は下記の通りです。

属性 役割
name 属性 送信されるクエリ名を指定しますが、値は送信されません。
value 属性 送信されるクエリ値を指定しますが、値は送信されません。また、ボタンに表示されるラベルとしても使用されます。
disabled 属性 入力コントールを無効にします。
form 属性 任意の form 要素に付与された id 属性値を指定することで関連付けを行います。
autofocus 属性 文書読み込み時、自動的にフォーカスさせます。

実際の表示サンプル

対応するブラウザでは下記に実際の入力コントロールが表示されます。

reset

input type="button"

type="button" が指定された input 要素は、ボタンとなります。イベントハンドラ属性などによって、スクリプト言語の起動用ボタンとして利用します。

type="button" が指定された input 要素で使用できる属性は下記の通りです。

属性 役割
name 属性 送信されるクエリ名を指定しますが、値は送信されません。
value 属性 送信されるクエリ値を指定する。また、ボタンに表示されるラベルとしても使用されます。
disabled 属性 入力コントールを無効にします。
form 属性 任意の form 要素に付与された id 属性値を指定することで関連付けを行います。
autofocus 属性 文書読み込み時、自動的にフォーカスさせます。

実際の表示サンプル

対応するブラウザでは下記に実際の入力コントロールが表示されます。

button

input type="datetime"

input type="datetime" は、HTML5.1 仕様書 (HTML 5.1 W3C Recommendation 1 November 2016) には含まれていません。HTML 5.2 で策定が行われています。

type="datetime" が指定された input 要素は、日時の入力欄となります。対応するブラウザでは多くの場合、カレンダーのユーザインタフェースと時計や時間入力のユーザインタフェースが表示され、そこから選択することで日時を入力できるようになります。

この値を指定された入力コントロールから送信される日時は、タイムゾーンが UTC となります。例えば、閲覧者のパソコンが日本時間で動作しており、ブラウザが提供するユーザインタフェースからその現地時間での日時を選択した場合でも、送信されるデータは UTC に変換されたものです。現地時間をそのまま扱いたい場合は、後述する type="datetime-local" を使用します。

送信される値は、指定した日時を ISO 8601 形式 (yyyy-mm-ddThh:mm:ss) にした、2013-06-14T14:05:34 (この場合、2013年6月14日14時5分34秒) のような形式で送信されます。

type="datetime" が指定された input 要素で使用できる属性は下記の通りです。

属性 役割
name 属性 データが送信される際のクエリ名を指定します。
value 属性 初期値を指定します。
disabled 属性 入力コントールを無効にします。
form 属性 任意の form 要素に付与された id 属性値を指定することで関連付けを行います。
autofocus 属性 文書読み込み時、自動的にフォーカスさせます。
autocomplete 属性 オートコンプリートの有効 / 無効を設定します。
list 属性 入力候補リストを指定します。
readonly 属性 読み込み専用にします。 (編集不可)
required 属性 入力を必須にします。
max 属性 入力可能な日時の最大値を指定します。
min 属性 入力可能な日時の最小値を指定します。
step 属性 日時の値の精度を秒単位で指定します。初期値は 「1」 です。

実際の表示サンプル

対応するブラウザでは下記に実際の入力コントロールが表示されます。

datetime

input 要素のサンプルソース

<form method="get" action="/search" role="search">
 <fieldset>
  <legend accesskey="s">サイト内検索</legend>
  <input type="search" name="search" value="" placeholder="検索ワードを入力" />
  <input type="submit" name="submit" value="検索" />
 </fieldset>
</form>
<input type="text" id="part" name="part" required="required" pattern="[A-Z][0-9]{3}"
       title="パート番号は大文字アルファベット 1文字に続いて数字 3桁で入力します" />
<input type="submit" formnovalidate="formnovalidate" value="一時保存" />
<input type="submit" value="送信" />
CC: <input type="email" multiple name="cc" list="contacts" />
<datalist id="contacts">
 <option value="taro@example.com" />
 <option value="jiro@example.com" />
 <option value="saburo@example.com" />
 <option value="goro@example.com" />
</datalist>

W3C HTML5 仕様書

4.10.7 The input element