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

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

概要

項目説明
形式<input type="...">
サポートH2 / e2 / Ch1 / Fx1 / Sa1 / Op1 / N2 / i1
カテゴリフローコンテンツ, フレージングコンテンツ, インタラクティブコンテンツ(※1), パルパブルコンテンツ(※1)
リステッド, ラベラブル(※1), サブミッタブル, リセッタブル, リアソシエイタブル, フォーム関連要素
 ※1 type=hidden 以外の場合
親要素フレージングコンテンツ を子要素に持てるもの
子要素無し(Empty)
タグの省略開始タグ:必須 / 終了タグ:無し

説明

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

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

種別説明
type=textH2/e2/Ch/Fx/Sa/Op/N2/i1。テキスト入力フィールド。
type=passwordH2/e2/Ch/Fx/Sa/Op/N2/i1。パスワード入力フィールド。
type=fileH2/e3/Ch/Fx/Sa/Op/N2/i1。ファイル名入力フィールド。
type=checkboxH2/e2/Ch/Fx/Sa/Op/N2/i1。チェックボックス。
type=radioH2/e2/Ch/Fx/Sa/Op/N2/i1。ラジオボタン。
type=hiddenH2/e2/Ch/Fx/Sa/Op/N2/i1。隠しフィールド。
type=submitH2/e2/Ch/Fx/Sa/Op/N2/i1。実行ボタン。
type=resetH2/e2/Ch/Fx/Sa/Op/N2/i1。取り消しボタン。
type=buttonH4/e3/Ch/Fx/Sa/Op/N2/i1。汎用ボタン。
type=imageH2/e2/Ch/Fx/Sa/Op/N2/i1。画像ボタン。
type=searchH5/???。検索フィールド。
type=telH5/Op11.1/???。電話番号入力フィールド。
type=urlH5/e10/Ch5/Fx4/Op10.62。url入力フィールド。
type=emailH5/e10/Ch5/Fx4/Op10.62。E-Mail入力フィールド。
type=dateH5/Ch/Sa/Op10.62。日付入力フィールド。
type=timeH5d/Ch/Sa/Op。時刻入力フィールド
type=numberH5/Ch6/Fx28/Op10.62。数値入力フィールド。
type=rangeH5/e10/Ch5/Fx23/Sa/Op10.62。範囲入力フィールド。
type=colorH5/Ch21/Fx27/Op11.1。色情報入力フィールド。
type=datetimeH5d/Sa。日時。HTML5 最終勧告での採用は見送られました。
type=datetime-localH5d/Ch/Sa/Op10.62。ローカルタイムの日時。HTML5 最終勧告での採用は見送られました。
type=monthH5d/Ch/Sa/Op10.62。月情報入力フィールド。HTML5 最終勧告での採用は見送られました。
type=weekH5d/Ch/Sa/Op10.62。週情報入力フィールド。HTML5 最終勧告での採用は見送られました。

各種タイプ

◆ テキスト入力フィールド: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"

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

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

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

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

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

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

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

週:

属性

【重要属性】
属性指定可能部品意味
type=type すべて H2/e2/Ch/Fx/Sa/Op/N2/i1。部品の種類を指定します。
name=name すべて H2/e2/Ch/Fx/Sa/Op/N2/i1。部品の名前を指定します。
value=value すべて H2/e2/Ch/Fx/Sa/Op/N2/i1。部品の初期値を指定します。
【共通属性】
属性指定可能部品意味
form=id すべて H5/???。関連付けたい form要素のidを指定します。通常は、部品が含まれるもっとも内側のフォームが対象となりますが、form属性により、位置によらず、関連づけるフォームを指定することができます。
disabled text, password, file, checkbox, radio, submit, reset, button, image, search, tel, url, email, date, time, number, range, color H4/e4/Ch/Fx/Sa/Op/N6。部品を無効化します。
required text, password, file, checkbox, radio, search, tel, url, email, date, time, number H5/e/Ch/Fx/Op。必須属性にします。
readonly text, password, search, tel, url, email, date, time, number H4/e4/Ch/Fx/Sa/Op/N6。読み出し専用にします。
autofocus text, password, file, checkbox, radio, submit, reset, button, image, search, tel, url, email, date, time, number, range, color H5/e/Ch/Fx/Sa/Op。ページがロードされた際、自動的にフォーカスを合わせます。
【テキスト関連属性】
属性指定可能部品意味
size=n text, password, search, tel, url, email H2/e2/Ch/Fx/Sa/Op/N2/i1。入力フィールドの横幅を指定します。
maxlength=n text, password, search, tel, url, email H2/e2/Ch/Fx/Sa/Op/N2/i1。最大入力文字数を指定します。
minlength=n text, password, search, tel, url, email H5。最少入力文字数を指定します。
pattern=regexp text, password, search, tel, url, email H5/e/Ch/Fx/Op。入力値のパターンを正規表現で指定します。
placeholder=str text, password, search, tel, url, email, number H5/Ch/Fx/Sa/Op。プレースホルダとして入力欄に薄文字などで表示する文字列を指定します。
dirname=name text, search H5/???。部品に入力されたテキストの方向(ltr,rtl)を、nameで指定されたパラメータの値としてサーバに送信します。
inputmode=n text, password, search H5/???。入力モードを選択するためのヒントを指定します。(詳細不明)
【数値関連属性】
属性指定可能部品意味
max=n date, time, number, range H5/Ch/Fx/Op。最大値を指定します。
min=n date, time, number, range H5/Ch/Fx/Op。最少値を指定します。
step=n date, time, number, range H5/Ch/Fx/Op。数値・時刻を増減させる際のステップ値を指定します。
【チェックボックス・ラジオボタン関連関連属性】
属性指定可能部品意味
checked checkbox, radio H2/e2/Ch/Fx/Sa/Op/N2/i1。チェックした状態にします。
【イメージ関連属性】
属性指定可能部品意味
src=url image H2/e2/Ch/Fx/Sa/Op/N2。表示する画像ファイルの URL を指定します。
alt=alt image H4/e2/Ch/Fx/Sa/Op。画像の代わりに表示する代替テキストを指定します。
height=n image H5/e4/Ch/Fx/Sa/Op/N2。画像の高さをピクセルまたはパーセンテージで指定します。
width=n image H5/e4/Ch/Fx/Sa/Op/N2。画像の横幅をピクセルまたはパーセンテージで指定します。
その他 image 上記の他にも img要素の属性を指定可能です。
【サブミット関連関連属性】
属性指定可能部品意味
accept=accept file H4/?/Ch/Fx4。送信するデータのMIMEタイプの候補リストをカンマで区切って指定します。
formaction=url submit, image H5/???。このフォームのアクションを指定します。
formenctype=enc submit, image H5/???。このフォームのエンコードタイプを指定します。
formmethod=method submit, image H5/???。このフォームのメソッドを指定します。
formnovalidate=url submit, image H5/???。このフォームのバリデーションを無効にします。
formtarget=target submit, image H5/???。このフォームのターゲットを指定します。
【その他属性】
属性指定可能部品意味
autocomplete=onoff text, password, search, tel, url, email, date, time, number, range, color H5/e5/???。過去に入力した値を候補として表示するオートコンプリート機能を有効・無効にします。
  on:有効にする(H5/e5)
  off:無効にする(H5/e5)
  default:デフォルト(H5/e5)(規定値)
list=name text, search, tel, url, email, date, time, number, range, color H5/???。datalist で指定した入力候補のリストのIDを指定します。
multiple file, email H5/???。複数選択を可能にします。
【データバインド】
属性意味
datasrc=datasrc e4-?。データバインド機能を用いる際の、データソースの ID を指定します。
datafld=datafld e4-?。データバインド機能を用いる際の、データソースの列名を指定します。
【i-mode】
属性意味
istyle=ni2。i-modeにおいて、入力モードの初期値を指定します。かな入力モードの時は、1(全角カナ)、2(半角カナ)、3(英字)、4(数字)となり、ポケットベル入力時は、1(全角文字)、2(半角文字)、3(小文字推奨半角文字)、4(数字推奨半角文字)となります。
【一般属性】
属性意味
accesskey=keyH4/e4/Ch2/Fx2/Sa3/Op12/N6/i1。アクセスキーを指定します。
class=classH4/e3/Ch1/Fx1/Sa1/Op1/N4。クラスを指定します。
contenteditable=boolH5/e55/Ch11/Fx3/Op10.6/Sa3.2。要素を編集可能にします。
dir=dirH4/e5/Ch5/Fx4/Sa6/Op25/N6。文字の表示方向を指定します。
hiddenH5/e/Ch/Fx/Sa/Op。要素を非表示にします。
id=idH4/e3/Ch/Fx/Sa/Op/N4。ID を指定します。
lang=langH4/e4/Ch/Fx/Sa/Op/N6。言語を指定します。
spellcheck=boolH5。スペルをチェックします。
style=styleH4/e3/Ch/Fx/Sa/Op/N4。スタイルシートを指定します。
tabindex=nH4/e4/Ch/Fx/Sa/Op/N6。タブインデックスを指定します。
title=titleH2/e2/Ch/Fx/Sa/Op/N6。タイトルを指定します。
translate=titleH5。翻訳可否を指定します。

使用例

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

関連項目

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

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