最終更新日

input要素

ユーザーのデータ入力を可能にする、入力用のフォームコントロールを表します。input要素自身はコンテンツを持たない空要素で、終了タグはありません。Phrasingコンテンツの記述箇所で使用できます。

input要素では、type属性により入力項目の種類を指定します。利用できるキーワードは下表のとおりです。

input要素では、type属性以外に、フォームコントロールの種類に応じたさまざまな属性の指定が可能です。

accept属性は、ファイル送信の場合に、処理可能なファイルの種類を指定します。MIMEタイプのほか、「audio/*」、「video/*」、「image/*」の指定が可能です。複数指定する場合はカンマで区切ります。

alt属性は、画像ボタンの画像を利用できない場合に代替のラベルとして表示される文字列を指定します。画像ボタンでは、空の文字列でないalt属性の指定が必須です。

autocomplete属性では、オートコンプリート機能によって以前の入力内容を利用できるようにするかどうかを「on」または「off」のキーワードで指定できます。指定を省略したとき、input要素のautocomplete属性は「default」の状態になり、その場合は親要素のform要素のautocomplete属性がoffでない限り、「on」の値に設定されます。

checked属性を指定すると、チェックボックスやラジオボタンの項目にチェックが付いた状態で表示されます。

dirname属性は、テキストボックスの項目で文字の方向が変わる可能性のある場合に、その方向性を含めて送信できるようにするための属性です。値には、識別名としての文字列を指定します。ユーザーが、右から左など、他と方向が異なるテキストを入力すると、対応しているブラウザはdirname属性の情報をテキストと共にサーバーへ送信します。

list属性を、datalist要素と組み合わせて使うことで、項目の入力候補の一覧を提示できます。datalist要素のid属性で指定した文字列と同じものを、input要素のlist属性で指定し、入力項目とその候補リストとを関連付けます。

maxlength属性は、テキストフィールドの項目において入力可能な最大文字数を0以上の整数で指定します。値が指定されている場合ユーザーは、指定した文字数を超える長さの文字列を入力できません。

multiple属性は、emailまたはファイル送信の項目で、ユーザーが複数の値を指定できるかどうかを設定します。

pattern属性は、テキストフィールドの入力項目に対し、入力のパターンを「正規表現」を使って指定できます。その場合、title属性に、入力パターンの解説を含めておくと、ユーザーの入力時や入力エラーの表示時に有用です。

placeholder属性では、テキストフィールドの入力項目に対し、ユーザーの入力の際にヒントとなる、短い説明を指定できます。ヒントは、単語や語句などで、改行文字を含むことはできません。ヒントが長い文章の場合や、より助言的な内容の場合は、title属性を使うとよいでしょう。

readonly属性は、input要素の項目を読み取り専用にするかどうかを指定します。値がすでに決まっている項目をユーザーに示し、送信することが可能です。

required属性は、入力が必須となる項目に対して設定します。

src属性は、画像ボタンで利用する画像のURLを指定します。

step属性は、日付や時間、範囲の項目に対し、値の刻み値を、浮動小数点数またはキーワード「any」で指定します。

autofocus、disabled、form、name、valueの各属性は、フォームコントロールの要素で共通の属性です。属性値の指定に関しては、button要素の項も参照してください。

formaction、formenctype、formmethod、formnovalidate、formtargetの各属性は、フォーム送信のための属性で、送信ボタンと画像ボタンの項目で指定できます。指定を省略した場合は、form要素での対応する属性の指定値が適用されます。属性値の指定に関しては、form要素の項も参照してください。

HTML5での変更点
・autocomplete、autofocus、dirname、form、formaction、formenctype、formmethod、formnovalidate、formtarget、height、list、max、min、pattern、placeholder、required、step、widthの各属性が新たに追加されました。
・type属性の値に、number、range、datetime、date、month、week、time、datetime-localが新たに追加されました。
・align、hspace、vspace、usemapの各属性は廃止されました。
カテゴリ タグの省略 親要素 子要素
Flowコンテンツ
Phrasingコンテンツ
Interactiveコンテンツ
フォーム関連要素
空要素 Phrasingコンテンツを子にできる要素 なし
属性 説明
accept ファイルタイプ ファイル送信時に処理可能なファイルの種類を、MIMEタイプまたは、「audio/*」「video/*」「image/*」のキーワードで指定します。
alt 文字列 画像ボタンの代わりに表示される文字列を指定します。
autocomplete on|off オートコンプリートのオンオフを指定します。
checked checked 論理属性。チェックボックスやラジオボタンを選択された状態にします。
dirname 文字列 書字方向が変わる可能性のあるテキストに対して識別名を指定します。
list 文字列 datalist要素のid属性で指定した入力候補のリスト名を指定します。
maxlength 数値 テキストフィールドで、入力可能な最大文字数を指定します。
multiple multiple 論理属性。emailまたはファイル送信の項目で、複数の値が選択可能になります。
pattern 入力のパターンを正規表現を使って指定します。
placeholder 文字列 入力のヒントとなるような文字列を指定します。
readonly readonly 論理属性。input要素の項目を読み取り専用にします。
required required 論理属性。入力が必須となる項目に指定します。
src URL 画像ボタン用の画像ファイルのURLを指定します。
step 値の刻み値を、浮動少数点数またはキーワード「any」で指定します。
height 数値 項目が画像ボタンの場合に、画像の高さをピクセルで指定します。
width 数値 項目が画像ボタンの場合に、画像の幅をピクセルで指定します。
max 入力項目での最大値を指定します。
min 入力項目での最小値を指定します。
size 数値 項目の幅を指定します。
autofocus autofocus 論理属性。ページ表示時に項目がフォーカスされます。
disabled disabled 論理属性。フォームコントロールが使用不可になります。
form ID form要素のid属性の値を指定します。
name 文字列 input要素の名前を指定します。
value 初期値を指定します。
formaction URL フォームデータの送信先URLを指定します。
formenctype キーワード 送信するデータの形式を、「application/x-www-form-urlencoded」「multipart/form-data」「text/plain」のいずれかのキーワードで指定します。省略時は「application/x-www-form-urlencoded」が適用されます。
formmethod get|post フォームデータの送信方法を、getまたはpostのいずれかで指定します。省略時は「get」です。
formnovalidate formnovalidate 論理属性。フォーム送信時の入力内容の確認を省略します。
formtarget 文字列 送信結果ページの表示方法について、キーワードかウィンドウ名で指定します。キーワードは4つあり、「_self」は現在のウィンドウ、「_parent」は親ウィンドウ、「_top」は最上位のウィンドウ、「_blank」は新しいウィンドウに、それぞれ表示されます。
type hidden 隠しフィールド
text テキスト入力フィールド
search 検索フィールド
tel 電話番号入力フィールド
url URL入力フィールド
email メールアドレス入力フィールド
password パスワード入力フィールド
datetime UTCによるタイムゾーンを含む日付と時刻のコントロール
date タイムゾーンを含まない日付のコントロール
month タイムゾーンを含まない月のコントロール
week タイムゾーンを含まない週のコントロール
time タイムゾーンを含まない時刻のコントロール
datetime-local タイムゾーンを含まないローカルタイムでの日付と時刻のコントロール
number 数値入力用のテキストフィールドまたはスピンコントロール
range 範囲や程度などの数値用のコントロール
color 8ビットの赤、緑、青から構成されるsRGBカラー
checkbox チェックボックス(複数選択)
radio ラジオボタン(択一選択)
file ファイルアップロード用ラベルとボタン
submit 送信ボタン
image 送信用画像ボタン
reset リセットボタン
button 汎用ボタン
グローバル属性 - -
イベント属性 - -
サンプルコード
<body>
  <form method="post" action="contact.php">
    <fieldset>
      <legend>お問い合わせ</legend>
      <p><label>メールアドレス:<input type="email" name="mailad"></label></p>
      <p><label>タイトル:<input type="text" name="title"></label></p>
      <p><label>メッセージ:<textarea name="message"></textarea></label></p>
    </fieldset>
    <p>
      <input type="submit" name="submit" value="送信">
      <input type="reset" name="reset" value="リセット">
    </p>
  </form>
</body>
参考文献:W3C HTML5「4.10.7 The input element」外部リンク
HOME
当サイトの活動をサポートしてみませんか?気軽にクリエイターの支援ができます。