input要素

Webページでは、テキストを入力してサーバーに送信したりできます。

本ページでは、input要素について説明します。

input要素とは

input要素は、フォームコントロールの一種です。テキスト入力欄やボタンなどを表示して、form要素で指定したサーバーにデータを送信します。

inputの定義は、以下のとおりです。

【inputの定義】
コンテンツカテゴリ フローコンテンツフレージングコンテンツ、リスト、サブミット、Autocapitalize属性を継承する、リセット可能、フォーム関連要素
type属性がhiddenでない場合:対話型コンテンツ認知可能コンテンツ、ラベル付け可能
可能な親要素 フレージングコンテンツを包含できる要素
可能なコンテンツ なし(空要素)
タグの省略 開始タグは必須。終了タグはなし。
DOMインターフェース HTMLInputElement

利用例

以下は、inputを使ったHTMLの例です。

【inputの利用例】
<form method="post" action="test.php">
<input type="text" name="test">
<input type="submit" value="実行">
</form>

上記により、以下のように表示されます。

ブラウザの画面で、テキスト入力欄と実行ボタンが表示されています。

実行ボタンをクリックすると、name="test"で入力した値が、test=値でtest.phpに送信されます。test.phpでは、データを処理するプログラムが必要です。

typeの型

type属性のキーワードによって、input要素の見た目や機能が大きく異なります。以下に一覧を示します。表示例は、特に説明していない場合は<input type="xxx">とだけ指定したものです。

【typeで使えるキーワード】
キーワード 説明 表示例
button ボタンを表示します。右では、value="ボタン"も指定しています。
checkbox チェックボックスを表示します。デフォルトの値はonなので、チェックしているとonが送信されます。別の値をvalueで指定することもできます。
color 色が選択できます。右のコントロールをクリックしてみてください。
date 日付(年月日)を入力できます。クリックすると、選択できるブラウザもあります。
datetime-local 日時(年月日と時間)を入力できます。クリックすると、選択できるブラウザもあります。
email メールアドレスを入力できます。
file ファイルをアップロードする時に使います。
hidden コントロールを非表示にしますが、データ自体は送信されます。
image 画像のボタンが表示されます。右では、src属性で画像ファイルも指定しています。
month 年月日を入力できます。クリックすると、選択できるブラウザもあります。
number 数値を入力できます。数値を上下させるスピナーが使えるブラウザもあります。
password 入力値は、●などで隠されます。
radio ラジオボタンを表示します。nameが同じラジオボタンを複数作成し、どれが選択されているか判別するために使います。デフォルトの値はonですが、データはname=値で送信されるため、ボタンごとに異なる値にすると判別がしやすくなります。また、一般的にラジオボタンは選択が必須のため、checked属性を使って初期状態で選択されている状態にすることも多くあります。右は、2つのコントロールを作っていて、1つを選択状態にしています。
range 値を選択するためのスライダーを表示します。
reset リセットボタンを表示します。コントロールの値を初期値に戻します。
search 検索のためのテキスト入力欄を表示します。
submit データ送信用のボタンを表示します。クリックすると、サーバーにデータが送信されます。
tel 電話番号入力のための入力欄を表示します。
text 文字列入力のための入力欄を表示します。デフォルトです。
time 時間(時:分)を入力できます。
url URLを入力できます。
week 年と週番号(第何週)を入力できます。クリックすると、選択できるブラウザもあります。

例えば、urlであれば日本語を入力するとデータを送信できないなど、デフォルト(formnovalidateなどが指定されていない時)ではtypeに応じて検証が行われます。

また、スマートフォンなどではtelであれば数字中心のキーボードになるなど、入力キーボードが変わることがあります。

属性

グローバル属性と、以下が使えます。

accept
typeがfileの時、アップロードできるファイル形式を指定します。
alt
typeがimageの時で、画像が表示されない時に表示するテキストです。
autocomplete
一度入力した内容を覚えて、次回入力時の選択肢(例えば、住所を何度も入力しなくて済む)としたり、自動的に入力済にしたりする機能(自動補完機能)のon、offを設定します。デフォルトは、on(有効)です。
checked
typeがcheckboxとradioの時に使います。trueにすると、ページが表示された時にチェックされた状態になります。
dirname
書式方向(左から記述するなど)を示す時に使う名前を指定します。
disabled
入力やクリックなどができないようになります。
form
formのIDを指定して、form要素と関連付けします。
formaction
データ送信先のURLを指定します。formのaction属性より優先されます。
formenctype
データを送信する時のエンコーディングタイプを指定します。formのenctype属性より優先されます。
formmethod
データを送信する方法(メソッド)を指定します。formのmethod属性より優先されます。
formnovalidate
内容を検証しないようにします。例えば、入力が必須のテキスト入力欄だった場合でも、入力しなくてもデータを送信可能になります。formのnovalidate属性より優先されます。
formtarget
サーバーにデータを送信した後の画面(例えば、受付完了画面など)を表示する、タブやウィンドウなどを指定します。formのtarget属性より優先されます。
height
typeがimageの時で、画像の高さを指定します。
list
datalist要素のIDを指定し、入力値の候補から選択できるようになります。
max
入力値が数字などの場合、最大値を指定します。
maxlength
入力できる最大文字数を指定します。
min
入力値が数字などの場合、最小値を指定します。
minlength
入力時の最小文字数を指定します。
multiple
typeがemailやfileの時、カンマで区切って複数入力・選択できるようになります。
name
名前です。HTML内で一意である必要があります。データ送信時に、名前=データの形で送信されます。名前がないとデータが送信されません。
pattern
送信できるデータのパターンを指定します。正規表現も可能です。
placeholder
入力欄に、ヒントを表示します。titleが詳細な説明をするのに対し、placeholderは簡易的な説明で改行も利用できません。

readonly
読み取り専用になります。入力などはできません。
required
入力や選択などが必須になります。
size
横の大きさを、文字数などで示します。デフォルトは、20です。
src
typeがimageの時、画像のファイル名を指定します。
step
入力する値の粒度を指定します。例えば、自然数しか使えないか、小数点以下が使えるかなどです。
type
データのタイプを指定します。
value
データの値を示します。nameとvalueが対となって(name=valueの形で)データが送信されます。
width
typeがimageの時で、画像の横幅を指定します。

次からは、各属性の利用例を示します。また、typeごとに使える属性が異なるため、最後にtypeと属性の関係を示します。

accept属性の利用例

accept属性の利用例は、以下のとおりです。

【accept属性の利用例】
<input type="file" name="test" accept="image/*,.pdf">

上記により、デフォルトでは画像とPDFファイルが選択可能になります。

指定は、以下が行えます。

【acceptで使える値】
説明
audio/* 音声ファイル
video/* 動画ファイル
image/* 画像ファイル
.pdf、.doc、.pngなど 拡張子に対応したファイル
application/zipなど MIMEタイプ

複数指定する時は、カンマで区切って指定します。

alt属性の利用例

alt属性の利用例は、以下のとおりです。

【alt属性の利用例】
<input type="image" src="image.png" alt="説明用のボタン画像です">

img要素のaltと、使い方は同じです。

autocomplete属性の利用例

autocomplete属性の利用例は、以下のとおりです。

【autocomplete属性の利用例】
<input type="text" name="test" autocomplete="off">

上記により、自動補完が無効になります。

checked属性の利用例

checked属性の利用例は、以下のとおりです。

【checked属性の利用例】
<input type="checkbox" name="test1" checked><label for="test1">りんご</label>
<input type="checkbox" name="test2"><label for="test2">みかん</label>

上記は、以下のように表示されます。

ブラウザの画面で、「りんご」と「みかん」の横にチェックボックスが表示されていて、「りんご」がチェックされています。

初期状態で、りんごが選択されています。ラジオボタンでも同様に使えます。

dirname属性の利用例

dirname属性の利用例は、以下のとおりです。

【dirname属性の利用例】
<input type="text" name="test" dirname="test.dir">

上記により、日本語であればtest=値とtest.dir=ltrの組み合わせ(ltrは左から記述を示す)でデータが送信されます。アラビア語のように、右から記述する言語ではrtlになります。

disabled属性の利用例

disabled属性の利用例は、以下のとおりです。

【disabled属性の利用例】
<input type="text" name="test" disabled>

上記は、以下のように表示されます。

ブラウザの画面で、テキスト入力欄が薄く表示されています。

通常より薄く表示されていて、入力できないことがわかるようになっています。

form属性の利用例

form属性の利用例は、以下のとおりです。

【form属性の利用例】
<form method="post" action="test.php" id="test">
<input type="text" name="test">
</form>
<input type="submit" value="実行" form="test">

最後のinputはform要素の外にありますが、赤字のようにform要素のIDで指定した名前と、form属性で指定した値が一致していると、指定したform要素のactionやmethodで動作します。

formaction属性の利用例

formaction属性の利用例は、以下のとおりです。

【formaction属性の利用例】
<form method="post" action="test.php">
<input type="text" name="test">
<input type="submit" value="実行" formaction="test2.php">
</form>

上記により、form要素で指定したtest.phpより優先して、test2.phpへ送信します。

formenctype属性の利用例

formenctype属性の利用例は、以下のとおりです。

【formenctype属性の利用例】
<form method="post" action="test.php" enctype="multipart/form-data">
<input type="text" name="test">
<input type="submit" value="送信"  formenctype="application/x-www-form-urlencoded">
</form>

上記により、form要素で指定したエンコーディングタイプを上書きします。

formenctypeには、以下の値が使えます。

【formenctypeで使える値】
説明
application/x-www-form-urlencoded データをURLエンコードします。デフォルトです。
multipart/form-data inputでtypeがfileの時に使います。
text/plain エンコードせずにテキスト形式で送信します。

formmethod属性の利用例

formmethod属性の利用例は、以下のとおりです。

【formmethod属性の利用例】
<form method="post" action="test.php">
<input type="text" name="test">
<input type="submit" value="送信" formmethod="get">
</form>

上記により、form要素で指定したメソッドより優先されます。

formnovalidate属性の利用例

formnovalidate属性の利用例は、以下のとおりです。

【formnovalidate属性の利用例】
<form method="post" action="test.php">
<input type="url" name="test">
<input type="submit" value="送信1">
<input type="submit" value="送信2" formnovalidate>
</form>

typeがurlの場合、入力文字の検証がされます。

「送信1」ボタンはこの検証を行うため、日本語などが入力された場合は「URLを入力してください。」などと表示されて、データは送信されません。

「送信2」ボタンはこの検証を行わないため、日本語などが入力された場合でもデータが送信されます。

formtarget属性の利用例

formtarget属性の利用例は、以下のとおりです。

【formtarget属性の利用例】
<form method="post" action="test.php" target="_blank">
<input type="text" name="test">
<input type="submit" value="送信" formtarget="_self">
</form>

form要素では、データ送信後の画面は別タブで表示するようにtarget指定していますが、_selfが優先されます。

formtargetでは、指定した名前の他に、以下の値が使えます。

【formtargetで使える値】
説明
_self 現在の表示タブ(デフォルト)
_blank 新しいタブ
_parent 現在のタブを開く元となったタブ
_top 現在のタブを開く元となったタブをたどった一番元のタブ
名前 iframeのnameで指定した名前

タブは、ブラウザの設定によっては新しいウィンドウで開きます。

height属性の利用例

height属性の利用例は、以下のとおりです。

【height属性の利用例】
<input type="image" src="image.png" alt="説明用のボタン画像です" height="16">

上記により、画像ボタンの高さを16pxにして表示します。

list属性の利用例

list属性の利用例は、以下のとおりです。

【list属性の利用例】
<input type="text" name="test" list="fruit">
<datalist id="fruit">
  <option value="りんご">
  <option value="みかん">
</datalist>

上記により、以下のように表示されます。

入力欄を2回クリックすると、りんごとみかんが選択できるようになります。

max属性の利用例

max属性の利用例は、以下のとおりです。

【max属性の利用例】
<input type="number" name="test" max="10">

上記により、10を超える数値を入力すると、検証によってデータが送信できなくなります。

maxlength属性の利用例

maxlength属性の利用例は、以下のとおりです。

【maxlength属性の利用例】
<input type="text" name="test" maxlength="10">

上記により、10文字を超えて入力できなくなります。

min属性の利用例

min属性の利用例は、以下のとおりです。

【min属性の利用例】
<input type="number" name="test" min="10">

上記により、10より小さい数値を入力すると、検証によってデータが送信できなくなります。

minlength属性の利用例

minlength属性の利用例は、以下のとおりです。

【minlength属性の利用例】
<input type="text" name="test" minlength="10">

上記により、10文字未満の文字数の場合、検証によってデータが送信できなくなります。

multiple属性の利用例

multiple属性の利用例は、以下のとおりです。

【multiple属性の利用例】
<input type="email" name="test" multiple>

上記により、メールアドレスをカンマ(,)で区切って複数入力することができるようになります。もし、multipleを付けずにカンマで区切って入力しても、検証によってデータは送信されません。

name属性の利用例

name属性の利用例は、以下のとおりです。

【name属性の利用例】
<input type="text" name="test">

上記により、データはtest=入力した値で送信されます。

また、nameで指定した名前はJavaScriptでも使えます。

【nameのJavaScriptでの利用例】
<form name="form1">
<input type="text" name="test">
<input type="button" value="実行" id="test1">
</form>

<script>
const x = document.querySelector("#test1");
x.addEventListener("click", function(){alert(document.form1.test.value);});
</script>

上のinputで「テストです。」と入力したとします。下のinputのボタンをクリックすると、アラートで「テストです。」と表示されます。document.form1に続くtestが、nameで作成した名前を示しているためです。

pattern属性の利用例

pattern属性の利用例は、以下のとおりです。

【pattern属性の利用例】
<input type="text" name="test" pattern="[A-Za-z]+">

上記により、英大文字か小文字以外が入力されると、以下のように表示されます。

ブラウザの画面で、テキスト入力欄に「あいうえお」と入力されていて、その下に「指定されている形式で入力してください。」と表示されています。

検証によって「指定されている形式で入力してください。」と表示されて、データは送信されません。

なお、title属性などで入力可能な文字を説明するなど、補足することが推奨されます。

placeholder属性の利用例

placeholder属性の利用例は、以下のとおりです。

【placeholder属性の利用例】
<input type="search" name="test" placeholder="検索">

上記は、以下のように表示されます。

入力欄に、薄く「検索」と表示されています。

readonly属性の利用例

readonly属性の利用例は、以下のとおりです。

【readonly属性の利用例】
<input type="text" name="test" value="テストです" readonly>

上記は、以下のように表示されます。

書き込みできないのが、わかると思います。

required属性の利用例

required属性の利用例は、以下のとおりです。

【required属性の利用例】
<input type="text" name="test" required>

上記により、値が入力されていない時に実行すると、以下のように表示されます。

ブラウザの画面で、テキスト入力欄に何も入力されておらず、その下に「このフィールドを入力してください。」と表示されています。

検証によって「このフィールドを入力してください。」と表示されて、データを送信できません。

size属性の利用例

size属性の利用例は、以下のとおりです。

【size属性の利用例】
<input type="text" name="test" size="10">

上記により、10文字分の表示ができる横幅で表示されます。表示の幅なので、文字は10文字以上入力できます。思ったとおりの横幅にならないことも多いため、CSSでwidth:10emなどと指定することをお薦めします。

src属性の利用例

src属性の利用例は、以下のとおりです。

【src属性の利用例】
<input type="image" src="image.png" alt="説明用のボタン画像です">

img要素のsrcと、使い方は同じです。

step属性の利用例

step属性の利用例は、以下のとおりです。

【step属性の利用例】
<input type="number" name="test" step="0.1">

上記により、0.1単位で数値を入力できますが、0.01などを入力すると検証によってデータが送信できなくなります。

もし、100.11などの数値を入力すると、以下のように表示されます。

ブラウザの画面で、数字の入力欄に100.11と入力されていて、その下に「有効な値を入力してください。有効な値として最も近いのは、100.1と100.2です。」と表示されています。

この場合、検証によってデータは送信されません。

value属性の利用例

value属性の利用例は、以下のとおりです。

【value属性の利用例】
<input type="text" name="test" value="テストです。">

上記は、以下のように表示されます。

最初から、「テストです。」と入力された状態になります。readonly属性が指定されていなければ、書き換えることは可能です。

width属性の利用例

width属性の利用例は、以下のとおりです。

【width属性の利用例】
<input type="image" src="image.png" alt="説明用のボタン画像です" width="16">

上記により、画像ボタンの横幅を16pxにして表示します。

typeと属性の関係

typeによって、使える属性が決まっています。以下は、対応表です。

【typeごとの使える属性(1/3)】
属性 hidden text,
search
url,
tel
email password
accept - - - - -
alt - - - - -
autocomplete
checked - - - - -
dirname - - - -
form* - - - - -
height - - - - -
list - -
max - - - - -
maxlength -
min - - - - -
minlength -
multiple - - - -
pattern -
placeholder -
readonly -
required -
size -
src - - - - -
step - - - - -
width - - - - -
【typeごとの使える属性(2/3)】
属性 date,
month,
week,
time
datetime-
local
number range color
accept - - - - -
alt - - - - -
autocomplete
checked - - - - -
dirname - - - - -
form* - - - - -
height - - - - -
list
max -
maxlength - - - - -
min -
minlength - - - - -
multiple - - - - -
pattern - - - - -
placeholder - - - -
readonly - -
required - -
size - - - - -
src - - - - -
step -
width - - - - -
【typeごとの使える属性(3/3)】
属性 checkbox,
radio
file submit image reset,
button
accept - - - -
alt - - - -
autocomplete - - - - -
checked - - - -
dirname - - - - -
form* - - -
height - - - -
list - - - - -
max - - - - -
maxlength - - - - -
min - - - - -
minlength - - - - -
multiple - - - -
pattern - - - - -
placeholder - - - - -
readonly - - - - -
required - - -
size - - - - -
src - - - -
step - - - - -
width - - - -

ブラウザのサポート状況(type)

各ブラウザの最新バージョンでのtypeサポート状況は、以下のとおりです。

【パソコン】
項目 IE Ed Fx Ch Sa Op
input
button
checkbox
color ×
date × ×
datetime-local × × ×
email
file
hidden
image
month × × ×
number
password
radio
range
reset
search
submit
tel
text
time × ×
url
week × × ×
【スマートフォン】
項目 Sa An Op Ch Fx Sm
input
button
checkbox
color
date
datetime-local
email
file
hidden
image
month ×
number
password
radio
range
reset
search
submit
tel
text
time
url
week ×
サポート
制限あり
×
未サポート
不明
IE
Internet Explorer
Ed
Edge
Fx
Firefox
Ch
Chrome
Sa
Safari
Op
Opera
An
Android Browser
Sm
Samsung Internet

※スマートフォンのFirefoxとChromeは、Android版です。

ブラウザのサポート状況(属性)

各ブラウザの最新バージョンでの属性サポート状況は、以下のとおりです。

【パソコン】
項目 IE Ed Fx Ch Sa Op
accept
alt
autocomplete
checked
dirname × ×
disabled
form
formaction
formenctype
formmethod
formnovalidate
formtarget
height
list
max
maxlength
min
minlength ×
multiple
name
pattern
placeholder
readonly
required
size
src
step
type
value
width
【スマートフォン】
項目 Sa An Op Ch Fx Sm
accept
alt
autocomplete
checked
dirname ×
disabled
form
formaction
formenctype
formmethod
formnovalidate
formtarget
height
list
max
maxlength
min
minlength
multiple
name
pattern
placeholder
readonly
required
size
src
step
type
value
width
サポート
制限あり
×
未サポート
不明
IE
Internet Explorer
Ed
Edge
Fx
Firefox
Ch
Chrome
Sa
Safari
Op
Opera
An
Android Browser
Sm
Samsung Internet

※スマートフォンのFirefoxとChromeは、Android版です。

HTML要素(タグ)一覧」に戻る