HTML <input>

<input>はテキスト等を入力するフィールドやボタンを配置するためのHTMLタグです。数値やメールアドレスの入力に特化したフィールドにすることもできます。この記事を読めば、input要素の使い方がすぐに分かります。

構文

HTML要素のタグ名、属性名および属性値は、大文字と小文字のどちらでもよい。

<input></input>

<INPUT></INPUT>

input 要素の終了タグは省略できる。

<input>

<INPUT>

XML形式で終了タグを省略することもできる。

<input />

コンテンツモデル

なし。input 要素の開始タグと終了タグの間には、テキストや要素を入れることができない。

属性

以下に示す属性を input 要素に指定できる。

accesskey

アクセスキーを指定する。アクセスキーを指定すると、キーボード操作でリンク、ボタンおよび入力フォームへジャンプすることができる。アクセスキーの操作方法は、OSやウェブブラウザによって異なる。

アクセスキーの操作方法

OS	ウェブブラウザ	アクセスキーの操作方法
Linux	Chrome	Alt + Shift + アクセスキー
	Firefox	Alt + Shift + アクセスキー
Mac	Chrome	control + option + アクセスキー
	Firefox	control + option + アクセスキー
	Safari	control + option + アクセスキー
Windows	Chrome	Alt + アクセスキー
	Edge	Alt + アクセスキー
	Firefox	Alt + Shift + アクセスキー
	Internet Explorer	Alt + アクセスキー

input 要素に accesskey 属性を指定する例を以下に示す。

<label for="an"><u>A</u>ccount number:</label>
<input type="text" id="an" accesskey="a">

Account number:

align

セル文字列の水平方向の配置

alt

代替文字列

autocomplete

on(デフォルト)を指定した場合、オートコンプリート(Webブラウザによる入力候補及び自動補完)が有効になる。offを指定した場合、オートコンプリートが無効になる。ただし、Webブラウザによっては、この指定が無視されることがある。

以下に示す値を指定することで、ブラウザに自動入力のヒントを当たることができる。

autocomplete

値	説明
name
honorific-prefix
given-name
additional-name
family-name
honorific-suffix
nickname
username
new-password
current-password
one-time-code
organization-title
organization
street-address
address-line1
address-line2
address-line3
address-level1
address-level2
address-level3
address-level4
country
country-name
postal-code
cc-name
cc-given-name
cc-additional-name
cc-family-name
cc-number
cc-exp
cc-exp-month
cc-exp-year
cc-csc
cc-type
transaction-currency
transaction-amount
language
bday
bday-day
bday-month
bday-year
sex
url
photo

checked

type属性の値がcheckbox又はradioの場合、あらかじめ選択された状態になる。checked属性を省略した場合、checkboxやradioの初期状態は選択されていない状態となる。

class

スタイルシートのクラス

dir

方向

disabled

ユーザの入力を受け付けない。このとき、ブラウザによっては入力を受け付けないことを示すために灰色表示になることがある。また、フォーカスの受け手とならず、タブ移動で飛び越される。disabled属性を指定したinput要素の値は、サブミット時にフォームデータを送信しない。

<input type="text" disabled>

form

formのidを指定する。

HTML5では、input要素にformのidを指定できる。

<form action="foo.php" id="form1"/>
<input type="text" name="baz" form="form1"/>
<input type="submit" form="form1"/>

list

オートコンプリートオプションの一覧を指定する。

テキスト入力の候補を datalist 要素であらかじめ定義しておく例を以下に示す。

<label for="bank">金融機関コードを入力してください:</label>
<input list="bank-list" id="bank" name="bank">
<datalist id="bank-list">
  <option value="0001">みずほ銀行</option>
  <option value="0005">三菱UFJ銀行</option>
  <option value="0009">三井住友銀行</option>
  <option value="9900">ゆうちょ銀行</option>
</datalist>

金融機関コードを入力してください:

レンジの刻み値を別途定義して、目盛りを表示する例を以下に示す。

<input type="range" list="scale">
<datalist id="scale">
  <option value="0">0</option>
  <option value="20">20</option>
  <option value="40">40</option>
  <option value="60">60</option>
  <option value="80">80</option>
  <option value="100">100</option>
</datalist>

id

要素の識別子

ismap

サーバサイドイメージマップ

lang

言語

maxlength

type属性の値がtextの場合、入力できる最大文字数を指定する。バイト数ではないので、全角文字ひとつも1文字として数える。

<input type="text" maxlength="4">

name

名前を指定する。サブミット時にこの名前でリクエストパラメータが送信される。

<input type="text" name="first_name">
<input type="text" name="last_name">

onblur

要素がフォーカスを失ったときに実行するスクリプト

onchange

値が変更されたときに実行する JavaScript を指定する。

レンジが変更されたことを検知する例を以下に示す。

<input type="range" id="range1" onchange="showScale('range1')">
<p id="volume">50</p>
<script>
  function showScale(id) {
    const range = document.getElementById(id);
    document.getElementById("volume").innerHTML = range.value;
  }
</script>

onclick

クリックしたときに実行されるスクリプト

ondblclick

要素がダブルクリックされたときに実行するJavaScriptを指定する。

onfocus

要素がフォーカスを得たときに実行するスクリプト

onkeydown

キーを押したときに実行するスクリプト

onkeypress

キーを押して離したときに実行するスクリプト

onkeyup

キーを離したときに実行するスクリプト

onmousedown

マウスのボタンが押下されたときに実行されるスクリプト

onmousemove

マウスポインタを要素内で動かしたときに実行されるスクリプト

onmouseout

マウスポインタを要素内から要素外に動かしたときに実行するスクリプト

onmouseover

マウスポインタを要素外から要素内に動かしたときに実行するスクリプト

onmouseup

マウスのボタンが(押下された後)話されたときに実行されるスクリプト

onselect

テキストが（部分的にでも）選択されたときに実行するスクリプト

placeholder

フォーム入力欄に何も入力していないときに表示される文字列。HTML5で新たに追加された属性。

<input type="password" placeholder="パスワード">

テキスト等を入力し始めると、プレースホルダは消えてしまうので、UI/UXとしては好ましくない。ラベルを使うのがベスト・プラクティスである。

readonly

type属性の値がtextの場合、入力不可能になる。

<input type="text" value="入力不可" readonly>

size

type属性の値がtextの場合、入力フィールドのサイズを指定する。

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

<form>
    <input type="text" size="1" value="1">
    <input type="text" size="2" value="2">
    <input type="text" size="4" value="4">
    <input type="text" size="8" value="8">
    <input type="text" size="16" value="16">
    <input type="text" size="32" value="32">
  </form>

src

type属性の値がimageの場合、画像イメージのURIを指定する。

style

スタイルシート

tabindex

タブオーダー(1からの数値)。入力フォーカスはTABキーを押すたびに次の入力フィールドに移っていく。

title

要素の使用に関するラベルや指示など、ツールチップに適した要素のアドバイザリ情報を指定する。

type

入力値のタイプを指定する。

type属性

値	説明
button	汎用的なボタン
checkbox	チェックボックス
color	色
date	日付
datetime	UTC(協定世界時)による日時
datetime-local	ローカル日時
email	メールアドレス
file	ファイル名
hidden	隠しフィールド
image	画像ボタン
month	月
number	数値
password	パスワード
radio	ラジオボタン
range	レンジ
reset	リセットボタン
search	検索テキスト
submit	サブミットボタン
tel	電話番号
time	時間
text	1行の文字列
url	URL
week	週

button

汎用ボタンには、type 属性に button を指定する。

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

checkbox

チェックボックスには、type 属性に checkbox を指定する。

マウスでクリックすることにより、ON/OFFを指定できるチェックボックス。<LABEL>タグにより文字列と関連付けることもできる。submit時にはvalueの値が送信される。valueの値を省略した場合は、"on"が送信される(ウェブブラウザにより異なる)。

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

<form>
  <fieldset>
    <legend>口座種別</legend>
    <input type="checkbox" name="accounts" value="s" id="savings" checked>
    <label for="savings">普通預金</label>
    <input type="checkbox" name="accounts" value="c" id="checking">
    <label for="checking">当座預金</label>
  </fieldset>
</form>

口座種別

普通預金 当座預金

color

色の入力欄には、type 属性に color を指定する。

<form>
  <label for="color">色</label>
  <input type="color" id="color">
</form>

色

date

日付の入力欄には、type 属性に date を指定する。

<form>
  <label for="date">日付</label>
  <input type="date" id="date">
</form>

日付

email

メールアドレスの入力欄には、type 属性に email を指定する。

<form>
  <label for="email">メールアドレス</label>
  <input type="email" id="email">
</form>

メールアドレス

file

ファイル名の入力欄には、type 属性に file を指定する。ボタンをクリックすることにより「ファイルの選択」ダイアログボックスが開いて、そこから既存のファイルを選択することができる。submit時にvalueの値は送信されない。

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

<form enctype="multipart/form-data">
  <label for="file">ファイル</label>
  <input type="file" id="file">
</form>

ファイル

hidden

ブラウザには何も表示されない隠しフィールドです。したがって、ユーザーが何らかのデータを入力することはできません。固定値などをパラメーターとして渡すときに使用します。

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

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

image

画像ボタンには、type 属性に image を指定する。任意の画像を貼り付けることができる画像ボタンです。

<form>
  <input type="image" src="/html/img/button.png">
</form>

month

年月を入力する欄には、type 属性に「month」を指定する。

<form>
  <label for="month">年月</label>
  <input type="month" id="month">
</form>

年月

number

数字を入力する欄には、type 属性に「number」を指定する。

<form>
  <label for="number">数字</label>
  <input type="number" id="number">
</form>

数字

password

パスワードの入力欄には、type 属性に password を指定する。テキスト入力フィールドとほぼ同じですが、入力された文字がすべて * で表示されることが異なります。

<form>
  <label for="current-password">パスワード</label>
  <input type="password" id="current-password" autocomplete="current-password">
</form>

パスワード

radio

ラジオボタンには、type 属性に radio を指定する。

マウスでクリックすることにより、ON/OFF を指定できるラジオボタンです。checkbox と異なり、選択肢のうちいずれかひとつしか選択できないものに使用します。name 属性値が同じ複数のラジオボタンのうち、ひとつだけ ON にすることができます。<LABEL> タグにより文字列と関連付けることもできます。

<form>
  <fieldset>
    <legend>性別</legend>
    <input type="radio" name="gender" value="m" id="male" checked>
    <label for="male">男姓</label>
    <input type="radio" name="gender" value="f" id="female">
    <label for="female">女性</label>
  </fieldset>
</form>

性別

男姓 女性

range

inputタグのtype属性に"range"を指定すると、0から100までの数値をスライダーで指定できます。

<input type="range">

value属性で初期値を指定できます。

<input type="range" value="0">

min属性とmax属性で最小値と最大値を指定できます。

<input type="range" min="1" max="5">

step属性で刻み値を指定できます。

<input type="range" min="1" max="5" step="0.5">

reset

入力データを初期化するリセットボタンです。リセットボタンをクリックすると、各入力フィールドの値が初期化されます。初期値が与えられていないものは空欄または OFF になります。
value 属性で初期値が与えられているものは、その初期値になります。

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

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

search

検索語句を入力する欄には、type 属性に「search」を指定する。

<form>
  <label for="search">検索語句</label>
  <input type="search" id="search">
</form>

検索語句

submit

クエリ送信を行うサブミット（実行）ボタンです。ボタンをクリックすると、フォームのデータをサーバー（CGI やサーブレット、JSP など）に送信します。

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

tel

電話番号を入力する欄には、type 属性に「tel」を指定する。

<form>
  <label for="tel">電話番号</label>
  <input type="tel" id="tel">
</form>

電話番号

text

テキストを入力するフィールドには、type 属性に「text」を指定する。

<form>
  <fieldset>
    <legend>名前</legend>
    <label for="family-name">姓</label>
    <input type="text" id="family-name">
    <label for="given-name">名</label>
    <input type="text" id="given-name">
  </fieldset>
</form>

名前

姓 名

テキスト入力フィールドには、改行を含む複数行を入力することはできない。改行を含む複数行の文字列を入力するには、textarea 要素を使用する。

url

URLを入力する欄には、type 属性に「url」を指定する。

<form>
  <label for="url">URL</label>
  <input type="url" id="url">
</form>

URL

required

入力必須。HTML5で新たに追加された属性。未入力のままサブミットした場合、Webブラウザがチェックしてサブミットを行わない。

<form action="/php/get.php" target="_blank">
  <input type="text" name="first_name" required>
  <input type="submit">
</form>

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の場合、入力フィールドの初期値となる。

ボタンの2重押し防止

ボタンを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
);

JavaScript

JavaScriptからはHTMLInputElementインタフェースを通じてinput要素へアクセスできる。

HTMLInputElementインタフェースは次に示すプロパティを持つ。

accept

input要素のaccept属性

input要素のtype属性が次に示すいずれかの値の場合に、HTMLInputElementインタフェースのacceptプロパティを利用できる。

• file

alt

input要素のalt属性

input要素のtype属性が次に示すいずれかの値の場合に、HTMLInputElementインタフェースのaltプロパティを利用できる。

• image

autocomplete

input要素のautocomplete属性

input要素のtype属性が次に示すいずれかの値の場合に、HTMLInputElementインタフェースのautocompleteプロパティを利用できる。

• hidden
• text
• search
• url
• tel
• email
• password
• date
• month
• week
• time
• datetime-local
• number
• range
• color

checked

input要素のchecked属性

input要素のtype属性が次に示すいずれかの値の場合に、HTMLInputElementインタフェースのcheckedプロパティを利用できる。

• checkbox
• radio

dirName

input要素のdirname属性

input要素のtype属性が次に示すいずれかの値の場合に、HTMLInputElementインタフェースのdirNameプロパティを利用できる。

• text
• search

disabled

input要素のdisabled属性

height

input要素のheight属性

input要素のtype属性が次に示すいずれかの値の場合に、HTMLInputElementインタフェースのheightプロパティを利用できる。

• image

name

input要素のname属性

type

input要素のtype属性

width

input要素のwidth属性

input要素のtype属性が次に示すいずれかの値の場合に、HTMLInputElementインタフェースのwidthプロパティを利用できる。

• image

参考文献

Web Hypertext Application Technology Working Group 2023. The input element. HTML Living Standard

Web Hypertext Application Technology Working Group 2023. 4.10.18.7 Autofill. HTML Living Standard

Dutton, Sam (2020) サインインフォームのベストプラクティス