<input> はフォームの中に入力フィールドを配置するHTMLタグである。<form> と </form> の間に記述します。

構文

HTML

<INPUT [attribute=value ...]></INPUT>
<INPUT [attribute=value ...]>

XHTML

<input [attribute=value ...] />

属性

align
セル文字列の水平方向の配置
alt
代替文字列
autocomplete
on(デフォルト)を指定した場合、オートコンプリート(Webブラウザによる入力候補及び自動補完)が有効になる。offを指定した場合、オートコンプリートが無効になる。ただし、Webブラウザによっては、この指定が無視されることがある。
checked
type属性の値がcheckbox又はradioの場合、あらかじめ選択された状態になる。checked属性を省略した場合、checkboxやradioの初期状態は選択されていない状態となる。
id
要素の識別子
class
スタイルシートのクラス
disabled
ユーザの入力を受け付けない。このとき、ブラウザによっては入力を受け付けないことを示すために灰色表示になることがある。
また、フォーカスの受け手とならず、タブ移動で飛び越される。disabled属性を指定したinput要素の値は、サブミット時にフォームデータを送信しない。
style
スタイルシート
title
タイトル
lang
言語
dir
方向
ismap
サーバサイドイメージマップ
onblur
要素がフォーカスを失ったときに実行するスクリプト
onchange
値が変更されたときに実行するスクリプト
onclick
クリックしたときに実行されるスクリプト
ondblclick
ダブルクリックしたときに実行されるスクリプト
onfocus
要素がフォーカスを得たときに実行するスクリプト
onkeydown
キーを押したときに実行するスクリプト
onkeypress
キーを押して離したときに実行するスクリプト
onkeyup
キーを離したときに実行するスクリプト
onmousedown
マウスのボタンが押下されたときに実行されるスクリプト
onmouseup
マウスのボタンが(押下された後)話されたときに実行されるスクリプト
onmouseover
マウスポインタを要素外から要素内に動かしたときに実行するスクリプト
onmousemove
マウスポインタを要素内で動かしたときに実行されるスクリプト
onmouseout
マウスポインタを要素内から要素外に動かしたときに実行するスクリプト
onselect
テキストが(部分的にでも)選択されたときに実行するスクリプト
tabindex
タブインデックス
accesskey
アクセスキー
maxlength
type属性の値がtextの場合、入力できる最大文字数を指定する。バイト数ではないので、全角文字ひとつも1文字として数える。
name
名前
placeholder
フォーム入力欄に何も入力していないときに表示される文字列。HTML5で新たに追加された属性。
readonly
type属性の値がtextの場合、入力不可能になる。
size
type属性の値がtextの場合、入力フィールドのサイズを指定する。
src
type属性の値がimageの場合、画像イメージのURIを指定する。
tabindex
タブオーダー(1からの数値)。入力フォーカスはTABキーを押すたびに次の入力フィールドに移っていく。
type
説明
text 1行の文字列を入力するフィールドです。複数行の文字列を入力するには <textarea> を使用します。
password テキスト入力フィールドとほぼ同じですが、入力された文字がすべて * で表示されることが異なります。
checkbox マウスでクリックすることにより、ON/OFFを指定できるチェックボックス。<LABEL>タグにより文字列と関連付けることもできる。submit時にはvalueの値が送信される。valueの値を省略した場合は、"on"が送信される(ウェブブラウザにより異なる)。
radio マウスでクリックすることにより、ON/OFF を指定できるラジオボタンです。checkbox と異なり、選択肢のうちいずれかひとつしか選択できないものに使用します。name 属性値が同じ複数のラジオボタンのうち、ひとつだけ ON にすることができます。
<LABEL> タグにより文字列と関連付けることもできます。
submit クエリ送信を行うサブミット(実行)ボタンです。ボタンをクリックすると、フォームのデータをサーバー(CGI やサーブレット、JSP など)に送信します。
reset 入力データを初期化するリセットボタンです。リセットボタンをクリックすると、各入力フィールドの値が初期化されます。初期値が与えられていないものは空欄または OFF になります。
value 属性で初期値が与えられているものは、その初期値になります。
file ファイル名を入力するフィールド。ボタンをクリックすることにより「ファイルの選択」ダイアログボックスが開いて、そこから既存のファイルを選択することができる。submit時にvalueの値は送信されない。
hidden ブラウザには何も表示されない隠しフィールドです。したがって、ユーザーが何らかのデータを入力することはできません。固定値などをパラメーターとして渡すときに使用します。
image 任意の画像を貼り付けることができる画像ボタンです。
button 汎用的なボタンです

HTML5で追加されたtype属性の値を次表に示す。

説明
search 検索テキスト
tel 電話番号
url URL
email メールアドレス
datetime UTC(協定世界時)による日時
date 日付
month
week
time 時間
datetime-local ローカル日時
number 数値
range レンジ
color
required
入力必須。HTML5で新たに追加された属性。未入力のままサブミットした場合、Webブラウザがチェックしてサブミットを行わない。
accept
type属性の値がfileの場合、選択できるファイルの種類をMIMEタイプで指定する。ただし、サポートしていないWebブラウザも多い。

<input type="file" accept="image/gif,image/jpeg,image/png">

usemap
クライアントサイドイメージマップのURL
value
type属性の値がbuttonの場合、ボタンに表示するテキストを指定する。また、クリックされたときの値にもなる。value属性を省略したときは、ボタンの表面には何も表示されない。type属性の値がcheckboxの場合、チェックボックスがオン(チェックが入れられた状態)のときの値となる。type属性の値がradioの場合、ラジオボタンがオン(選択された状態)のときの値となる。type属性の値がtextの場合、入力フィールドの初期値となる。

DTD

HTMLの各要素はDTDによって定義されています。input要素がDTDでどのように定義されているかを見るには、次のリンクをクリックしてください。

inputタグの使用例

inputタグの使用例と表示サンプルを次に示す。表示結果はブラウザによって異なることがある。

<form>
<input type="text" size="1" value="1">
<input type="text" size="2" value="2">
<input type="text" size="4" value="4" maxlength="4">
<input type="text" size="8" value="size=8">
<input type="text" size="16" value="size=16">
<input type="text" size="32" value="size=32">
<input type="text" size="64" placeholder="64文字以内で入力してください">
</form>
<form>
<input type="password" placeholder="パスワード">
</form>

ファイルの選択ボタンとファイル名の配置はWebブラウザによって異なる。また、ファイル名のみ表示するか、フルパスで表示するかもWebブラウザによって異なる。

<form>
<input type="file">
</form>

チェックボックスはサブミット時に「name=value」が送信される。

<form>
<input type="checkbox" name="checkbox1" value="value1">チェックボックス1
<input type="checkbox" name="checkbox2" value="value2" checked="checked">チェックボックス2
<input type="checkbox" name="checkbox3" value="value3">チェックボックス2
</form>

チェックボックス1 チェックボックス2 チェックボックス2
<form>
<input type="radio" name="sex" value="male" checked>男姓
<input type="radio" name="sex" value="female">女性
</form>
男姓 女性
<form>
<input type="submit">
</form>

リセットボタンの例を次に示します。テキスト入力フィールドに何らかの文字列を入力してからリセットボタンをクリックすると、テキスト入力フィールドの内容がクリアされます。

<form>
<input type="text">
<input type="reset">
</form>

画像ボタンの使用例と表示サンプルを次に示します。表示結果はブラウザによって異なることがあります。

<form>
<input type="image" src="http://itref.fc2web.com/img/exclamation.gif">
</form>

汎用ボタンの使用例と表示サンプルを次に示します。表示結果はブラウザによって異なることがあります。

<form>
<input type="button" value="任意のボタン">
</form>

隠しフィールドの例を次に示します。ブラウザには何も表示されません。

<form>
<input type="hidden" value="隠しデータ">
</form>

ボタンを2重に押せないよう、1回クリックしたらボタンを無効化する例を示す。

<input type="submit" onclick="disabled=true;">

上記の例の場合、HTML5でinput要素にrequired属性を指定すると、未入力のときはサブミットが行われない(画面が遷移しない)のでボタンがdisabledになったままとなる。requiredのチェックに失敗した場合、invalidイベントが発生する。submitボタンをクリックしたときにdisabledに設定した場合、ivalidイベントハンドラでボタンの状態を元に戻せばよい。

イベントハンドラは、各input要素にaddEventListenerで登録する。

document.getElementById("input1").addEventListener(
    'invalid',
    function() { form1.submit1.disabled = false; },
    false
);