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

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

• 概要
• 説明
• 属性
  • 共通属性
  • 重要属性
  • 共通属性
  • テキスト関連属性
  • 数値関連属性
  • チェックボックス・ラジオボタン関連属性
  • イメージ関連属性
  • サブミット関連属性
  • その他属性
  • データバインド関連
  • i-mode
• 使用例
• 詳細
  • テキスト入力フィールド(type="text")
  • パスワード入力フィールド(type="password")
  • ファイル名入力フィールド(type="file")
  • チェックボックス(type="checkbox")
  • ラジオボタン(type="radio")
  • 隠しフィールド(type="hidden")
  • 実行ボタン(type="submit")
  • 取消ボタン(type="reset")
  • 汎用ボタン(type="button")
  • 画像ボタン(type="image")
  • 検索文字列(type="search")
  • 電話番号(type="tel")
  • URL(type="url")
  • Eメール(type="email")
  • 日付(type="date")
  • 時刻(type="time")
  • 数値(type="number")
  • レンジ(type="range")
  • 色(type="color")
  • 時刻(type="datetime-local")
  • 月(type="month")
  • 週(type="week")
• 関連項目
• リンク

概要

形式

<input type="...">

サポート

https://caniuse.com/mdn-html_elements_input

カテゴリ

フローコンテンツ

フレージングコンテンツ

インタラクティブコンテンツ(※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)

HTML5 や HTML Living Standard では、on/off 以外にも様々な指定が可能ですが、説明は省略します。詳細は MDN(↗) を参照してください。

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-?

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

i-mode

istyle=n

[非推奨] i2

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

使用例

.form-item {
  margin-bottom: .5rem;
}
.form-item > label {
  display: inline-block;
  width: 5rem;
}
.form-item input[type="text"],
.form-item input[type="password"] {
  width: 16rem;
}

<form method="POST" action="example.cgi">
  <div class="form-item">
    <label for="user_name">名前：</label>
    <input type="text" id="user_name" name="name">
  </div>
  <div class="form-item">
    <label for="password">パスワード：</label>
    <input type="password" id="password" name="password">
  </div>
  <div class="form-item">
    <label for="file">ファイル：</label>
    <input type="file" id="file" name="file">
  </div>
  <div class="form-item">
    <label>性別：</label>
    <span>
      <label><input type="radio" name="gender" value="man">男性</label>
      <label><input type="radio" name="gender" value="female">女性</label>
      <label><input type="radio" name="gender" value="no-answer">無回答</label>
    </span>
  </div>
  <div class="form-item">
    <label>趣味：</label>
    <span>
      <label><input type="checkbox" name="hobby" value="movie">映画</label>
      <label><input type="checkbox" name="hobby" value="sport">スポーツ</label>
      <label><input type="checkbox" name="hobby" value="reading">読書</label>
    </span>
  </div>
  <div>
    <input type="submit" value=" 送信 ">
    <input type="reset" value=" 取消 ">
  </div>
</form>

詳細

テキスト入力フィールド(type="text")

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

パスワード入力フィールド(type="password")

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

ファイル名入力フィールド(type="file")

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

チェックボックス(type="checkbox")

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

ラジオボタン(type="radio")

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

隠しフィールド(type="hidden")

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

実行ボタン(type="submit")

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

取消ボタン(type="reset")

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

汎用ボタン(type="button")

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

画像ボタン(type="image")

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

検索文字列(type="search")

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

電話番号(type="tel")

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

URL(type="url")

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

Eメール(type="email")

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

日付(type="date")

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

時刻(type="time")

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

数値(type="number")

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

レンジ(type="range")

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

色(type="color")

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

時刻(type="datetime-local")

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

月(type="month")

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

週(type="week")

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

関連項目

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

リンク

• https://html.spec.whatwg.org/multipage/input.html#the-input-element
• https://developer.mozilla.org/ja/docs/Web/HTML/Element/input
• https://caniuse.com/mdn-html_elements_imput