このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

input”要素:入力欄

記事Sep.16th, 2020
Mar. 10th, 2023
フォームの入力欄を表す要素
この記事はHTML Living Standardに対応しています。
この記事はHTML Living Standardに対応しています。

要素について

input”要素は入力欄を表す要素です。多くの場合フォームの入力欄として使用されます。

type”属性の値により多様な種類の入力欄を表すことができます。また、“input”要素の見た目や機能も大きく変わります。type”属性で入力欄の種類を指定しない場合やブラウザが指定した値に対応していない場合の既定値は単純な1行のテキスト入力欄(text)です。

select”要素textarea”要素でもフォームの入力欄を表すことができます。

サンプルコード

<form method="post" action="sample-inputtag1.php" target="_blank">
<fieldset>
<legend>あなたの猫の情報</legend>
<p><label>名前:<input type="text" name="name"></label></p>
<p><label>年齢:<input type="number" name="age"></label></p>
<fieldset>
<legend>性別</legend>
<p>
<label><input type="radio" name="sex" value="オス">オス</label>
<label><input type="radio" name="sex" value="メス">メス</label>
<label><input type="radio" name="sex" value="不明">不明</label>
</p>
</fieldset>
<fieldset>
<legend>体色</legend>
<p>
<label><input type="checkbox" name="color[]" value="">白</label>
<label><input type="checkbox" name="color[]" value="">黒</label>
<label><input type="checkbox" name="color[]" value="">灰</label>
<label><input type="checkbox" name="color[]" value="薄茶">薄茶</label>
<label><input type="checkbox" name="color[]" value="焦げ茶">焦げ茶</label>
</p>
</fieldset>
<fieldset>
<legend>模様</legend>
<p>
<label><input type="radio" name="pattern" value="単色">単色</label>
<label><input type="radio" name="pattern" value="ハチワレ">ハチワレ</label>
<label><input type="radio" name="pattern" value="ポインテッド">ポインテッド</label>
<label><input type="radio" name="pattern" value="靴下">靴下</label>
<label><input type="radio" name="pattern" value="ヒョウ柄">ヒョウ柄</label>
<label><input type="radio" name="pattern" value="トラ柄">トラ柄</label>
<label><input type="radio" name="pattern" value="サビ">サビ</label>
<label><input type="radio" name="pattern" value="三毛">三毛</label>
</p>
</fieldset>
<fieldset>
<legend>瞳の色</legend>
<p>
<label>左目:<input type="color" name="lefteye"></label>
<label>右目:<input type="color" name="righteye"></label>
</p>
</fieldset>
<p><label>誕生日:<input type="date" name="birth"></label></p>
<p><label>いつも起きる時間:<input type="time" name="sleep"></label></p>
</fieldset>
<fieldset>
<legend>あなたの情報</legend>
<p><label>猫が好きな度合い:<input type="range" name="love" min="0" max="100"></label></p>
<p><label>居住地域:<input type="text" name="area"></label></p>
<p><label>メールアドレス:<input type="email" name="email"></label></p>
<p><label>電話番号:<input type="tel" name="tel"></label></p>
<p><label>ウェブサイト:<input type="url" name="website"></label></p>
</fieldset>
<p><label>パスワード:<input type="password" name="key"></label></p>
<p>
<input type="submit" value="送信する">
<input type="reset" value="入力内容をリセット">
</p>
</form>
あなたの猫の情報

性別

体色

模様

瞳の色

あなたの情報

*送信すると入力内容が表示されます。

入力欄の種類

type”属性の値 説明 サンプル
hidden 非表示の送信されるデータ
text 1行のテキスト入力欄
searchHTML5で追加 検索テキストの入力欄
telHTML5で追加 電話番号の入力欄
urlHTML5で追加 URLの入力欄
emailHTML5で追加 メールアドレスの入力欄
password パスワードの入力欄
dateHTML5で追加 日付の入力欄
monthHTML5.1で追加 月の入力欄
weekHTML5.1で追加 週の入力欄
timeHTML5で追加 時刻の入力欄
datetime-localHTML5.1で追加 日時の入力欄
numberHTML5で追加 数値の入力欄
rangeHTML5で追加 大まかな数値の入力欄
colorHTML5で追加 色の入力欄
checkbox チェックボックス
radio ラジオボタン
file ファイルの送信欄
submit 送信ボタン
image 画像の送信ボタン
reset リセットボタン
button 汎用的なボタン

属性と値

属性
属性 説明 説明
必須属性
なし
任意属性
グローバル属性
accept="" 入力欄が受け入れるファイル形式 audio/* 音声ファイルを受け入れる
video/* 動画ファイルを受け入れる
image/* 画像ファイルを受け入れる
MIMEタイプ 入力欄が受け入れるファイル形式
.拡張子 入力欄が受け入れるファイル形式
alt="" 画像の代替テキスト テキスト 画像の代わりになるテキスト
autocomplete=""HTML5で追加 type”属性の値がhiddenである時】フォームで送信する値の種類 トークンHTML5.1で追加 フォームで送信する値の種類
type”属性の値がhiddenではない時】ブラウザーによるオートコンプリートの可否 トークンHTML5.1で追加 オートコンプリートで表示されるべき入力候補の種類
on オートコンプリートを行う
off オートコンプリートを行わない
checked="" 選択された状態にする checked 選択された状態にする
dirname=""HTML5で追加 送信するデータの書字方向に関する値のクエリ名 文字列 送信するデータの書字方向に関する値のクエリ名
disabled="" 入力欄を無効化 disabled 入力欄を無効化
form=""HTML5で追加 関連付けるフォーム ID名 関連づけるform”要素id”属性の値
formaction=""HTML5で追加 フォームに入力されたデータの送信先 URL フォームに入力されたデータの送信先のURL
formenctype=""HTML5で追加 フォームが送信するデータの形式 application/x-www-form-urlencoded 入力されたデータをURLエンコードして送信
multipart/form-data 入力されたデータをマルチパートデータとして送信
text/plain 入力されたデータをプレーンテキストとして送信
formmethod=""HTML5で追加 フォームを送信時のHTTPメソッド get 入力されたデータをaction”属性で指定したURLにクエリ文字列として付加して送信
post 入力されたデータをHTTPリクエストの本文として送信
dialogHTML5.2で追加 フォームの送信時に“form”要素が含まれるdialog”要素を閉じる
formnovalidate=""HTML5で追加 フォームの送信時に入力内容の妥当性をチェックしない formnovalidate フォームの送信時に入力内容の妥当性をチェックしない
formtarget=""HTML5で追加 フォームの送信時の応答画面の表示方法 _blank 新しいブラウジング・コンテキストに表示
_self 現在のブラウジング・コンテキストに表示
_parent 現在のブラウジング・コンテキストの1つ上位のブラウジング・コンテキストに表示
_top 現在のブラウジング・コンテキストの最上位のブラウジング・コンテキストに表示
ブラウジング・コンテキスト名 任意のブラウジング・コンテキストに表示
height=""HTML5で追加 画像の高さ 正の整数 画像の大きさの高さのピクセル数
list=""HTML5で追加 入力値の候補と関連付ける ID名 関連づけるdatalist”要素id”属性の値
max=""HTML5で追加 入力可能な最大値 日付 type”属性の値がdateである時】機械可読な形式の日付(“YYYY-MM-DD”)
type”属性の値がmonthである時】機械可読な形式の月(“YYYY-MM”)
type”属性の値がweekである時】機械可読な形式の週(“yyyy-Www”)
時刻 type”属性の値がtimeである時】機械可読な形式の時刻(“hh:mm”もしくはhh:mm:ss”)
日時 type”属性の値がdatetime-localである時】機械可読な形式の日時(“yyyy-MM-ddThh:mm”)
数値 type”属性の値がnumberrangeである時】入力可能な最大値
maxlength="" 入力可能な最大の文字数 正の整数 入力可能な最大の文字数
min=""HTML5で追加 入力可能な最小値 日付 type”属性の値がdateである時】機械可読な形式の日付(“YYYY-MM-DD”)
type”属性の値がmonthである時】機械可読な形式の月(“YYYY-MM”)
type”属性の値がweekである時】機械可読な形式の週(“yyyy-Www”)
時刻 type”属性の値がtimeである時】機械可読な形式の時刻(“hh:mm”もしくはhh:mm:ss”)
日時 type”属性の値がdatetime-localである時】機械可読な形式の日時(“yyyy-MM-ddThh:mm”)
数値 type”属性の値がnumberrangeである時】入力可能な最小値
minlength="" 入力可能な最小の文字数 正の整数 入力可能な最小の文字数
multiple=""HTML5で追加 複数の値を入力を可能にする multiple 複数の値を入力を可能にする
name="" 入力欄の名前 文字列 入力欄の名前
isindex注意 type”属性の値がtextsearchである時】フォームの送信時にこの入力欄の入力値のみ送信する
_charset_ type”属性の値がhiddenである時】送信するデータはフォームの送信に使用する文字エンコーディングの情報
pattern=""HTML5で追加 入力可能な値の書式 正規表現 JavaScriptの正規表現で表した入力可能な値の書式
placeholder=""HTML5で追加 入力欄のプレースホルダー テキスト 入力欄のプレースホルダー
popovertarget=""HTML Living Standardで定義 表示状態を切り替えるポップオーバー要素 ID名 表示状態を切り替えるポップオーバー要素のid”属性の値
popovertargetaction=""HTML Living Standardで定義 ポップオーバー要素の表示状態の切り替え方法 toggle ポップオーバー要素の表示状態を切り替える
show ポップオーバー要素を表示する
hide ポップオーバー要素を閉じる
readonly="" 入力値を編集できなくする readonly 入力値を編集できなくする
required=""HTML5で追加 入力を必須にする required 入力を必須にする
size="" 入力欄の横幅 正の整数 入力欄が表示できる文字数
src="" 画像ファイルの指定 URL ボタンとする画像ファイルのURL
step=""HTML5で追加 入力可能な数値の間隔 any どのような値も入力可能(無段階)
日数 type”属性の値がdateである時】入力可能な日付の間隔
月数 type”属性の値がmonthである時】入力可能な月の間隔
週数 type”属性の値がweekである時】入力可能な週の間隔
秒数 type”属性の値がtimedatetime-localである時】入力可能な時刻の間隔
数値 type”属性の値がnumberrangeである時】入力可能な数値の間隔
title="" 要素に補足情報を付ける テキスト pattern”属性を指定しない時】補足情報
入力可能な値の書式の説明 テキスト pattern”属性を指定する時】入力可能な値の書式の説明
type="" 入力欄の種類 hidden 非表示の送信されるデータ
text 1行のテキスト入力欄
searchHTML5で追加 検索テキストの入力欄
telHTML5で追加 電話番号の入力欄
urlHTML5で追加 URLの入力欄
emailHTML5で追加 メールアドレスの入力欄
password パスワードの入力欄
dateHTML5で追加 日付の入力欄
monthHTML5.1で追加 月の入力欄
weekHTML5.1で追加 週の入力欄
timeHTML5で追加 時刻の入力欄
datetime-localHTML5.1で追加 日時の入力欄
numberHTML5で追加 数値の入力欄
rangeHTML5で追加 大まかな数値の入力欄
colorHTML5で追加 色の入力欄
checkbox チェックボックス
radio ラジオボタン
file ファイルの送信欄
submit 送信ボタン
image 画像の送信ボタン
reset リセットボタン
button 汎用的なボタン
value="" フォームで送信する値の初期値 テキスト type”属性の値がhiddentextsearchtelpasswordである時】フォームで送信する値の初期値
URL type”属性の値がurlである時】妥当な形式のURL
メールアドレス type”属性の値がemailである時】妥当な形式のメールアドレス
日付 type”属性の値がdateである時】機械可読な形式の日付(“YYYY-MM-DD”)
type”属性の値がmonthである時】機械可読な形式の月(“YYYY-MM”)
type”属性の値がweekである時】機械可読な形式の週(“yyyy-Www”)
時刻 type”属性の値がtimeである時】機械可読な形式の時刻(“hh:mm”もしくはhh:mm:ss”)
日時 type”属性の値がdatetime-localである時】機械可読な形式の日時(“yyyy-MM-ddThh:mm”)
数値 type”属性の値がnumberrangeである時】数値
type”属性の値がcolorである時】16進数カラーコード(“#rrggbb”)
type”属性の値がcheckboxradioである時】フォームで送信される値 文字列 フォームで送信される値
type”属性の値がsubmitである時】ボタンに表示されるラベル、フォームで送信される値 テキスト ボタンに表示されるラベル、フォームで送信される値
type”属性の値がresetbuttonである時】ボタンに表示されるラベル テキスト ボタンに表示されるラベル
width=""HTML5で追加 画像の横幅 正の整数 画像の大きさの横幅のピクセル数

type”属性の値ごとの指定可能な属性はそれぞれの項目を参照してください。

value”属性は必須属性はありませんがtype="radio"type="hidden"を指定した“input”要素ではほとんどの場合必要です。

type="image"を指定した“input”要素ではsrc”属性alt”属性は必須属性です。

type="button"を指定した“input”要素ではvalue”属性は必須属性です。

name”属性は必須属性はありませんが、“input”要素の入力値をフォームが送信するために必要です。

グローバル属性title”属性pattern”属性を指定した“input”要素に指定した場合は他の要素に指定した場合と意味合いが異なります。

過去に定義されていた属性
属性
属性 説明 説明
align=""注意 垂直方向の位置 bottom 上端揃え
middle 中央揃え
top 下端揃え
水平方向の位置 left 左寄せ
right 右寄せ
tabindex="" フォーカスの可否とフォーカスの移動順序を指定する 正の整数 順次ナビゲーションに加わり、フォーカスの順番を指定(tabindex”属性の値が小さい順番にフォーカスする)
0 順次ナビゲーションに加わるがフォーカスの順番は指定しない(文書内に記述された順番でフォーカスする)
負の整数 フォーカス可能だが順次ナビゲーションには加わらない
accesskey="" 要素にアクセスキーを割り当てる 文字 ユニコード1文字によるアクセスキー
usemap=""注意 クライアントサイドイメージマップ #マップ名 イメージマップの名前(map”要素name”属性の値)
ismap=""注意 サーバーサイドイメージマップ ismap サーバーサイドイメージマップ
onblur="" フォーカスを失った時に実行されるスクリプト スクリプト フォーカスを失った時に実行されるスクリプト
onfocus="" フォーカスされた時に実行されるスクリプト スクリプト フォーカスされた時に実行されるスクリプト
onselect="" 要素の入力内容が選択された時に実行されるスクリプト スクリプト 要素の入力内容が選択された時に実行されるスクリプト
onchange="" 要素の入力内容に変化があった時に実行されるスクリプト スクリプト 要素の入力内容に変化があった時に実行されるスクリプト
inputmode=""HTML5で追加 要素に入力する時のソフトウェアキーボードの種類を指定する none ソフトウェアキーボードを表示しない
text ユーザーの地域に適切なテキストの入力
tel 電話番号の入力
url URLの入力
email メールアドレスの入力
numeric 数値の入力
decimal 実数の入力
search 検索用の入力
autofocus=""HTML5で追加 要素に自動的にフォーカスする autofocus 要素に自動的にフォーカスする
popoverhidetarget=""HTML Living Standardで定義注意 ポップオーバー要素を閉じる ID名 非表示状態にするポップオーバー要素のid”属性の値
popovershowtarget=""HTML Living Standardで定義注意 ポップオーバー要素を表示する ID名 表示状態にするポップオーバー要素のid”属性の値
popovertoggletarget=""HTML Living Standardで定義注意 ポップオーバー要素の表示状態を切り替える ID名 表示状態を切り替えるポップオーバー要素のid”属性の値

仕様書

input”要素はHTML2.0から定義されている要素です。現行の仕様であるHTML Living Standardでも定義されています。

定義されている仕様書
DOMインターフェース
[Exposed=Window]
interface HTMLInputElement : HTMLElement {
[HTMLConstructor] constructor();

[CEReactions] attribute DOMString accept;
[CEReactions] attribute DOMString alt;
[CEReactions] attribute DOMString autocomplete;
[CEReactions] attribute boolean defaultChecked;
attribute boolean checked;
[CEReactions] attribute DOMString dirName;
[CEReactions] attribute boolean disabled;
readonly attribute HTMLFormElement? form;
attribute FileList? files;
[CEReactions] attribute USVString formAction;
[CEReactions] attribute DOMString formEnctype;
[CEReactions] attribute DOMString formMethod;
[CEReactions] attribute boolean formNoValidate;
[CEReactions] attribute DOMString formTarget;
[CEReactions] attribute unsigned long height;
attribute boolean indeterminate;
readonly attribute HTMLDataListElement? list;
[CEReactions] attribute DOMString max;
[CEReactions] attribute long maxLength;
[CEReactions] attribute DOMString min;
[CEReactions] attribute long minLength;
[CEReactions] attribute boolean multiple;
[CEReactions] attribute DOMString name;
[CEReactions] attribute DOMString pattern;
[CEReactions] attribute DOMString placeholder;
[CEReactions] attribute boolean readOnly;
[CEReactions] attribute boolean required;
[CEReactions] attribute unsigned long size;
[CEReactions] attribute USVString src;
[CEReactions] attribute DOMString step;
[CEReactions] attribute DOMString type;
[CEReactions] attribute DOMString defaultValue;
[CEReactions] attribute [LegacyNullToEmptyString] DOMString value;
attribute object? valueAsDate;
attribute unrestricted double valueAsNumber;
[CEReactions] attribute unsigned long width;

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

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

readonly attribute NodeList? labels;

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

undefined showPicker();

// also has obsolete members
};
HTMLInputElement includes PopoverInvokerElement;
UAスタイルシート
@namespace url(http://www.w3.org/1999/xhtml);

input:is([type=hidden i]) {
display: none !important;
}

input:is[type=tel i]:dir(ltr) {
direction: plaintext;
}

input[dir=auto i]:is([type=search i], [type=tel i], [type=url i], [type=email i]) {
unicode-bidi: ltr;
}

input {
letter-spacing: initial;
word-spacing: initial;
line-height: initial;
text-transform: initial;
text-indent: initial;
text-shadow: initial;
text-align: initial;
}

input:is([type=reset i], [type=button i], [type=submit i]) {
text-align: center;
}

input:is([type=reset i], [type=button i], [type=submit i], [type=color i], [type=date i], [type=month i], [type=week i], [type=time i], [type=datetime-local i], [type=number i], [type=range i], [type=checkbox i], [type=radio i], [type=file i]) {
display: inline-block;
}

input:is([type=radio i], [type=checkbox i], [type=reset i], [type=button i], [type=submit i], [type=color i], [type=search i]) {
box-sizing: border-box;
}

input:is([type=text i], [type=search i], [type=tel i], [type=url i], [type=email i]) {
display: inline-block;
line-height: 1.0;
}
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク