<input>フォームの入力部品を作成

<input>タグでは、フォームから入力する様々な部品を作成することができます。 例えばフォームで文字を入力したり、チェックボックス、ラジオボタンなどで選択するなどの部品は、この<input>タグを使用して作る事になります。

フォームの入力部品を作るには、type属性で入力できるデータのタイプを指定します。 type属性に指定できる値は、下記の「属性」を参考にして下さい。 type属性を指定しない場合は、textを指定した事になります。

またtype属性の値によって、入力できる値やフォーム部品の見た目が変わります。 例えば、テキストボックスやチェックボックス、ラジオボタン、送信ボタンなどは、それぞれ指定するtype属性の値によって作成されます。 HTML5ではtype属性に指定できる値が大幅に増えていますので、各値ごとに解説ページを作りましたので、それぞれ分けて説明します。

なおautofocus属性が指定されたフォーム部品は、ページの読み込みが終わり次第フォーカスされます。 ただしautofocus属性は一つのHTML文書内で1つのみしか指定できません。

HTML5での変更点

HTML5のinput要素では、部品のタイプが19種類に増え、align属性、usemap属性、ismap属性が廃止されました。 またautocomplete属性、autofocus属性、dirname属性、form属性、formnovalidate属性、formenctype属性、formtarget属性、formaction属性、formmethod属性、height属性、list属性、max属性、multiple属性、min属性、minlength属性、pattern属性、placeholder属性、required属性、step属性、width属性が追加されています。

HTML5.1では、部品のタイプが22種類に増え、inputmode属性が追加されました。 またautocomplete属性に指定できる値が変更されました。

書式

  • <input 属性="値"> ……… フォームの入力用パーツを作成

属性

accept="" type="file"の場合に、サーバーが受け入れられると想定できるファイルタイプの候補をカンマで区切って指定。
autofocus 自動フォーカスするかどうか
alt="" type="image"の場合に、画像の代替として表示する文字列を指定
autocomplete="" 過去に入力した値を表示するオートコンプリート機能を有効、無効にする
  • on …… 有効
  • off …… 無効
  • default …… 初期値
checked ラジオボタン、チェックボックスなどを予めチェックされた状態にする。
disabled 操作を無効にする
form="" form要素のid属性を指定する事で関連付けが可能。
formaction="" inputから入力された値を受け渡し、実行させるURLを指定
formenctype="" inputから入力された値のエンコードを指定
formmethod="" 送信方法を指定する。get/post/put/deleteから指定可能。
formnovalidate="" 入力されたデータのバリデートを実行しない
formtarget="" フォームのターゲットを指定。_blank/_self/_parent/_top/任意の名前/から指定可能。
list="" datalistで指定した候補のidを指定(選択肢を指定する場合に利用)
max="" meterなどを指定した場合の最大値を指定
maxlength="" 入力文字数の最大値を指定
min="" meterなどを指定した場合の最小値を指定
minlength="" 入力文字数の最小値を指定
multiple メールアドレスやファイルなど、複数の項目を指定・入力できるようにする
name="" フォーム部品(コントロール)の名前を指定
pattern="" 入力内容のパターンを指定
placeholder="" 入力内容の補助となるテキスト(薄文字など)を表示
readonly 読み取り専用にする
required 入力必須項目にする
size="" input要素のサイズを指定
src="" input要素に画像などを使用する場合に、外部ファイルのurlを指定
step="" 数値・時刻を増減させる際のステップを指定
type="" フォーム部品の種類を指定
value="" 値を指定
width="" 表示内容の横幅を指定
height="" 表示内容の高さを指定

※利用できる属性は部品ごとに異なりますので、詳しくは各部品タイプのページを参照下さい。なおリンク先ページがある属性については、そちらで説明しています。

type属性について

HTML5のtype属性の値は種類が大幅に増え、電話番号には「tell」、メールアドレスには「email」など、入力内容に合わせたtype属性値が盛り込まれています。 またブラウザ側でもtype属性値に合わせてテキスト・フィールドのレンダリングに変化を与えるようになっており、ユーザーが何を入力すればいいのか感覚的に理解できるようになっています。

ちなみに<input type="search">とした場合、Mac os x版のSafari/Chromeでは、テキスト・フィールドの両側が丸くレンダリングされます。 ですがFirefox/Operaなどの場合は通常の長方形で表示されます。

なおtype属性に指定できる値のキーワードは次のようになります。

キーワード 種類 入力内容 表示例
hidden 非表示 なし(画面上に表示されない隠しフィールドが生成される) 表示されません
text テキスト 改行なしのテキスト
search 検索 改行なしのテキスト
tel 電話番号 改行なしのテキスト
url url 絶対url
email e-mail メールアドレス
password パスワード 改行なしのテキスト
datetime 日時 タイムゾーンがUTCに設定された日付と時刻
date 日付 タームゾーンなしの日付
month タイムゾーンなしの月
week タイムゾーンなしの週
time 時間 タイムゾーンなしの時間
datetime-local ローカル日時 タイムゾーンなしの日時
number 数値 数値
range 範囲 一定範囲の数値
color red,green,blueを8bitずつで表すRGB値。sRGBカラー
checkbox チェックボックス 事前に定義された0個以上の値 選択肢1 選択肢2
radio ラジオボタン 列挙された中から単一指定 選択肢1 選択肢2
file ファイルのアップロード 0個以上のファイル
submit 送信ボタン フォームの送信ボタン
image 画像ボタン 画像のボタンを指定
reset リセットボタン なし
button 汎用ボタン なし

使用した時の例

<form method="post" action="sample.cgi">
  <p>名前:<input type="text" name="name" size="40"></p>
  <p>パスワード:<input type="password" name="pass" size="40" autofocus></p>
  <p>性別:<br />
    <label><input type="radio" name="sex" value="男">男</label>
    <label><input type="radio" name="sex" value="女">女</label>
  </p>
  <p><input type="submit" value="送信する" disabled></p>
</form>

ブラウザ上の表示例

※disabled属性とautofocus属性を指定した場合のサンプルとなります。

対応ブラウザなどのデータ

形式 <input type=""> カテゴリ フローコンテンツ, フレージングコンテンツ,フォーム関連要素(リスト化・ラベル付け・送信・リセット可能) / type属性値がhiddenでない場合はインタラクティブコンテンツ, パルパブル・コンテンツ
親要素 フレージングコンテンツが期待できる場所 子要素 なし
開始タグ 必須 終了タグ なし
グローバル属性 accesskey / class / contenteditable / contextmenu / dir / draggable / hidden / id / lang / spellcheck / style / tabindex / title / translate
対応ブラウザ Internet Explorer8~ , Google Chrome14~ , Firefox7~ , Opera11.5~ , Safari5.1~