形式

<input type="...">

サポート

LS / H2 / e2 / Ch1 / Fx1 / Sa1 / Op1 / N2 / i1

カテゴリ

フローコンテンツ

フレージングコンテンツ

インタラクティブコンテンツ(※1)

パルパブルコンテンツ(※1)

リステッド, ラベラブル(※1), サブミッタブル, リセッタブル, リアソシエイタブル, フォーム関連要素

※1 type=hidden 以外の場合

親要素

フレージングコンテンツ を子要素に持てるもの

子要素

無し(Empty)

タグの省略

開始タグ:必須 / 終了タグ:無し

属性

グローバル属性

accept

alt

autocomplete

checked

dirname

disabled

form

formaction

formenctype

formmethod

formnovalidate

formtarget

height

list

max

maxlength

min

minlength

multiple

name

pattern

placeholder

popovertarget

popovertargetaction

readonly

required

size

src

step

type

value

width

<form> で作成したフォームの中の、テキスト入力や実行ボタンなどの各フォーム部品を表示します。type 属性の値によって、見栄えや動作の異なる部品となります。

それぞれのサポート状況は https://developer.mozilla.org/ja/docs/Web/HTML/Element/Input を参照してください。

グローバル属性

詳細は グローバル属性 を参照してください。

type=type

LS/H2/e2/Ch/Fx/Sa/Op/N2/i1

対象部品: すべて

部品の種類を指定します。

name=name

LS/H2/e2/Ch/Fx/Sa/Op/N2/i1

対象部品: すべて

部品の名前を指定します。

value=value

LS/H2/e2/Ch/Fx/Sa/Op/N2/i1

対象部品: すべて

部品の初期値を指定します。

form=id

LS/H5/???

対象部品: すべて

関連付けたい form要素のidを指定します。通常は、部品が含まれるもっとも内側のフォームが対象となりますが、form属性により、位置によらず、関連づけるフォームを指定することができます。

disabled

LS/H4/e4/Ch/Fx/Sa/Op/N6

対象部品: text, password, file, checkbox, radio, submit, reset, button, image, search, tel, url, email, date, time, number, range, color

部品を無効化します。

required

LS/H5/e/Ch/Fx/Op

対象部品: text, password, file, checkbox, radio, search, tel, url, email, date, time, number

必須属性にします。

readonly

LS/H5/e4/Ch/Fx/Sa/Op/N6

対象部品: text, password, search, tel, url, email, date, time, number

読み出し専用にします。

size=n

LS/H2/e2/Ch/Fx/Sa/Op/N2/i1

対象部品: text, password, search, tel, url, email

入力フィールドの横幅を指定します。

maxlength=n

LS/H2/e2/Ch/Fx/Sa/Op/N2/i1

対象部品: text, password, search, tel, url, email

最大入力文字数を指定します。

minlength=n

LS/H5

対象部品: text, password, search, tel, url, email

最少入力文字数を指定します。

pattern=regexp

LS/H5/e/Ch/Fx/Op

対象部品: text, password, search, tel, url, email

入力値のパターンを正規表現で指定します。

placeholder=str

LS/H5/Ch/Fx/Sa/Op

対象部品: text, password, search, tel, url, email, number

プレースホルダとして入力欄に薄文字などで表示する文字列を指定します。

dirname=name

LS/H5/???

対象部品: text, search

部品に入力されたテキストの方向(ltr,rtl)を、nameで指定されたパラメータの値としてサーバに送信します。

inputmode=n

LS/H5-5.1

対象部品: text, password, search

入力モードを選択するためのヒントを指定します。HTML 5.2 では廃止されました。

max=n

LS/H5/Ch/Fx/Op

対象部品: date, time, number, range

最大値を指定します。

min=n

LS/H5/Ch/Fx/Op

対象部品: date, time, number, range

最少値を指定します。

step=n

LS/H5/Ch/Fx/Op

対象部品: date, time, number, range

数値・時刻を増減させる際のステップ値を指定します。

checked

LS/H2/e2/Ch/Fx/Sa/Op/N2/i1

対象部品: checkbox, radio

チェックした状態にします。

src=url

LS/H5/e2/Ch/Fx/Sa/Op/N2

対象部品: image

表示する画像ファイルの URL を指定します。

alt=alt

LS/H4/e2/Ch/Fx/Sa/Op

対象部品: image

画像の代わりに表示する代替テキストを指定します。

height=n

LS/H5/e4/Ch/Fx/Sa/Op/N2

対象部品: image

画像の高さをピクセルまたはパーセンテージで指定します。

width=n

LS/H5/e4/Ch/Fx/Sa/Op/N2

対象部品: image

画像の横幅をピクセルまたはパーセンテージで指定します。

その他

対象部品: image

上記の他にも img要素の属性を指定可能です。

accept=accept

LSH4/Ch/Fx4

対象部品: file

送信するデータのMIMEタイプの候補リストをカンマで区切って指定します。ファイル参照ボタンを押した時の拡張子の候補が変わります。

formaction=url

LS/H5/???

対象部品: submit, image

このフォームのアクションを指定します。

formenctype=enc

LS/H5/???

対象部品: submit, image

このフォームのエンコードタイプを指定します。

formmethod=method

LS/H5/???

対象部品: submit, image

このフォームのメソッドを指定します。

formnovalidate=url

LS/H5/???

対象部品: submit, image

このフォームのバリデーションを無効にします。

formtarget=target

LS/H5/???

対象部品: submit, image

このフォームのターゲットを指定します。

autocomplete=onoff

LS/H5/e5/???

対象部品: text, password, search, tel, url, email, date, time, number, range, color

過去に入力した値を候補として表示するオートコンプリート機能を有効・無効にします。

on

有効にする(H5/e5)

off

無効にする(H5/e5)

default

デフォルト(H5/e5)(規定値)

list=name

LS/H5/???

対象部品: text, search, tel, url, email, date, time, number, range, color

datalist で指定した入力候補のリストのIDを指定します。

multiple

LS/H5

対象部品: file, email

複数選択を可能にします。HTML 5.1 では、type="range" の場合に multiple は指定できなくなりました。

popovertarget=id

LS/Ch/Ed/Sa

ポップオーバーターゲットのIDを指定します。詳細は popover を参照してください。

popovertargetaction=action

LS/Ch/Ed/Sa

ポップオーバーターゲットに対するアクションを指定します。詳細は popover を参照してください。

datasrc=datasrc

[非推奨] e4-?

データバインド機能を用いる際の、データソースの ID を指定します。

datafld=datafld

[非推奨] e4-?

データバインド機能を用いる際の、データソースの列名を指定します。

istyle=n

[非推奨] i2

i-modeにおいて、入力モードの初期値を指定します。かな入力モードの時は、1(全角カナ)、2(半角カナ)、3(英字)、4(数字)となり、ポケットベル入力時は、1(全角文字)、2(半角文字)、3(小文字推奨半角文字)、4(数字推奨半角文字)となります。

<form method="POST" action="xxx.cgi">
<table>
<tr>
 <td>名前：</td>
 <td><input type=text name="namae"></td>
</tr>
<tr>
 <td>パスワード：</td>
 <td><input type=password name="passwd"></td>
</tr>
<tr>
 <td>転送ファイル：</td>
 <td><input type=file name="tensou"></td>
</tr>
<tr>
 <td>性別：</td>
 <td>
  <input type=radio name="seibetsu" value="male" checked>男
  <input type=radio name="seibetsu" value="female">女
 </td>
</tr>
<tr>
 <td>趣味：</td>
 <td>
  <input type=checkbox name="shumi" value="PC">パソコン
  <input type=checkbox name="shumi" value="SP">スポーツ
  <input type=checkbox name="shumi" value="RD">読書
 </td>
</tr>
<tr>
 <td></td>
 <td>
  <input type=submit value=" 送信 ">
  <input type=reset value=" 取消 ">
 </td>
</tr>
</table>
</form>

通常のテキストを入力します。

他の人にパスワードを見られないように、入力した文字がすべてアスタリスク(*)で表示されます。

ブラウザからWWWサーバーにファイルをアップロードする際に用います。入力フィールドの横には参照ボタンが表示されます。WWWサーバー側にはファイルを受け取るための特別なCGIスクリプトなどを設置しておく必要があります。セキュリティのために、初期値を設定したり、スクリプトで値を操作することはできません。

オン・オフの値を持つチェックボックスを表示します。

同じ name 属性を持つラジオボタンでひとつのラジオボタングループを形成します。複数の内、どれかひとつしかチェックできない点がチェックボックスと異なります。

画面上には表示されません。ユーザに気づかれない値をこっそりと<form> の action で指定したアクションに渡すために用いられます。

このボタンを押すと、<form> タグの action属性で指定したアクションが呼び出されます。

このボタンを押すと、それまでに入力した情報をすべてキャンセルして、最初から入力をやり直すことができます。

<input type="button" onclick="...">のように、ボタンを押した時にJavaScriptなどを起動する際によく用いられます。

例えば、<input type=image name="AAA" height=100 width=100 src="xxx.gif"> という画像ボタンをクリックすると、クリックした座標が AAA.x=n AAA.y=n という形式でアクションに送信されます。

HTML5 で追加されたタイプで、検索文字列を入力します。

HTML5 で追加されたタイプで、電話番号を入力します。入力文字に制限はありませんが、スマートフォンなどでは電話番号入力用のテンキーが表示されます。

HTML5 で追加されたタイプで、URLを入力します。http:// などで始まらない文字を入力するとバリデーションエラーとなります。

HTML5 で追加されたタイプで、Eメールアドレスを入力します。@ を含まない場合やメールアドレスに使用できない文字を含んだ場合などにバリデーションエラーとなります。

HTML5 で追加されたタイプで、日付を入力します。値の例：2011-06-04

HTML5 で追加されたタイプで、時刻を入力します。値の例：23:59:59

HTML5 で追加されたタイプで、数値を範囲の中から指定します。

HTML5 で追加されたタイプで、数値を入力します。

HTML5 で追加されたタイプで、色を入力します。値の例：#ffcccc

HTML5 で追加されたタイプで、ローカルタイムの日時を入力します。値の例：2011-06-04T12:00

HTML5 で追加されたタイプで、年月を入力します。値の例：2011-06

HTML5 で追加されたタイプで、週を入力します。値の例：2011-W23

• https://html.spec.whatwg.org/multipage/input.html#the-input-element
• https://www.w3.org/TR/2014/REC-html5-20141028/forms.html#the-input-element
• https://www.w3.org/TR/html401/interact/forms.html#edef-INPUT
• https://tools.ietf.org/html/rfc1866#section-8.1.2
• https://developer.mozilla.org/ja/docs/Web/HTML/Element/input
• https://caniuse.com/mdn-html_elements_imput