<input> - フォーム部品:入力欄

トップ > HTMLリファレンス > <input>

概要

形式
<input type="...">
サポート
LS / H2 / e2 / Ch1 / Fx1 / Sa1 / Op1 / N2 / i1
カテゴリ
フローコンテンツ
フレージングコンテンツ
インタラクティブコンテンツ(※1)
パルパブルコンテンツ(※1)
リステッド, ラベラブル(※1), サブミッタブル, リセッタブル, リアソシエイタブル, フォーム関連要素
※1 type=hidden 以外の場合
親要素
フレージングコンテンツ を子要素に持てるもの
子要素
無し(Empty)
タグの省略
開始タグ:必須 / 終了タグ:無し
属性
グローバル属性
accept
alt
autocomplete
autofocus
checked
dirname
disabled
form
formaction
formenctype
formmethod
formnovalidate
formtarget
height
list
max
maxlength
min
minlength
multiple
name
pattern
placeholder
readonly
required
size
step
type
value
width

説明

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

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

種別説明
type=textLS/H2/e2/Ch/Fx/Sa/Op/N2/i1。テキスト入力フィールド。
type=passwordLS/H2/e2/Ch/Fx/Sa/Op/N2/i1。パスワード入力フィールド。
type=fileLS/H2/e3/Ch/Fx/Sa/Op/N2/i1。ファイル名入力フィールド。
type=checkboxLS/H2/e2/Ch/Fx/Sa/Op/N2/i1。チェックボックス。
type=radioLS/H2/e2/Ch/Fx/Sa/Op/N2/i1。ラジオボタン。
type=hiddenLS/H2/e2/Ch/Fx/Sa/Op/N2/i1。隠しフィールド。
type=submitLS/H2/e2/Ch/Fx/Sa/Op/N2/i1。実行ボタン。
type=resetLS/H2/e2/Ch/Fx/Sa/Op/N2/i1。取り消しボタン。
type=imageLS/H2/e2/Ch/Fx/Sa/Op/N2/i1。画像ボタン。
type=buttonLS/H4/e3/Ch/Fx/Sa/Op/N2/i1。汎用ボタン。
type=searchLS/H5/???。検索フィールド。
type=telLS/H5/Op11.1/???。電話番号入力フィールド。
type=urlLS/H5/e10/Ch5/Fx4/Op10.62。url入力フィールド。
type=emailLS/H5/e10/Ch5/Fx4/Op10.62。E-Mail入力フィールド。
type=dateLS/H5/Ch/Sa/Op10.62。日付入力フィールド。
type=timeLS/H5/Ch/Sa/Op。時刻入力フィールド
type=numberLS/H5/Ch6/Fx28/Op10.62。数値入力フィールド。
type=rangeLS/H5/e10/Ch5/Fx23/Sa/Op10.62。範囲入力フィールド。
type=colorLS/H5/Ch21/Fx27/Op11.1。色情報入力フィールド。
type=datetime-localLS/H5.1/Ch/Sa/Op10.62。ローカルタイムの日時。HTML5 最終勧告での採用は見送られました。
type=monthLS/H5.1/Ch/Sa/Op10.62。月情報入力フィールド。HTML5 最終勧告での採用は見送られました。
type=weekLS/H5.1/Ch/Sa/Op10.62。週情報入力フィールド。HTML5 最終勧告での採用は見送られました。

属性

【共通属性】
グローバル属性
詳細は グローバル属性 を参照してください。
【重要属性】
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
読み出し専用にします。
autofocus
LS/H5/e/Ch/Fx/Sa/Op
対象部品: text, password, file, checkbox, radio, submit, reset, button, image, search, tel, url, email, date, time, number, range, color
ページがロードされた際、自動的にフォーカスを合わせます。
【テキスト関連属性】
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 は指定できなくなりました。
【データバインド】
datasrc=datasrc
[非推奨] e4-?
データバインド機能を用いる際の、データソースの ID を指定します。
datafld=datafld
[非推奨] e4-?
データバインド機能を用いる際の、データソースの列名を指定します。
【i-mode】
istyle=n
[非推奨] i2
i-modeにおいて、入力モードの初期値を指定します。かな入力モードの時は、1(全角カナ)、2(半角カナ)、3(英字)、4(数字)となり、ポケットベル入力時は、1(全角文字)、2(半角文字)、3(小文字推奨半角文字)、4(数字推奨半角文字)となります。

使用例

HTML
<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>
表示
名前:
パスワード:
転送ファイル:
性別:
趣味: パソコン スポーツ 読書

各種タイプ

◆ テキスト入力フィールド:type="text"

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

名前:
◆ パスワード入力フィールド:type="password"

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

パスワード:
◆ ファイル名入力フィールド:type="file"

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

転送ファイル:
◆ チェックボックス:type="checkbox"

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

チェックボックス
◆ ラジオボタン:type="radio"

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

Yes No
◆ 隠しフィールド:type="hidden"

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


◆ 実行ボタン:type="submit"

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

◆ 取消ボタン:type="reset"

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

◆ 汎用ボタン:type="button"

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

◆ 画像ボタン:type="image"

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

◆ 検索文字列:type="search"

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

◆ 電話番号:type="tel"

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

電話番号:
◆ URL:type="url"

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

URL:
◆ Eメール:type="email"

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

E-Mail:
◆ 日付:type="date" (H5d)

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

日付:
◆ 時刻:type="time"

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

時刻:
◆ 数値:type="number"

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

◆ レンジ:type="range"

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

◆ 色:type="color"

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

色:
◆ 時刻:type="datetime-local" (H5d)

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

日時:
◆ 月:type="month" (H5d)

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

年月:
◆ 週:type="week" (H5d)

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

週:

関連項目

<form><select><textarea><button><fieldset><label>

リンク


Copyright (C) 1996-2017 杜甫々
初版:1996年9月10日 最終更新:2017年12月31日
http://www.tohoho-web.com/html/input.htm