入力コントロールを表示する

input

< input インプット 属性="属性値">

フォームにおける入力コントロール(入力欄)を表します。type属性の値に入力コントロールの種別を指定することで、さまざまな入力コントロールを表示できます。

カテゴリー type属性値がhiddenでない場合
・インタラクティブコンテンツ
・パルパブルコンテンツ
・リスト、ラベル付け、サブミット、リセット可能なフォーム関連要素
type属性値がhiddenの場合
・リスト、サブミット、リセット可能なフォーム関連要素
コンテンツモデル
使用できる文脈 フレージングコンテンツが期待される場所
カテゴリーとコンテンツモデル

使用できる属性

accept アクセプト

サーバーが受け取ることが可能なファイルの種別を指定します。値には、MIMEタイプまたは拡張子を指定できます。複数の値をカンマ(,)で区切って指定することも可能です。

alt オルタナティブ

ボタン画像の代替テキストを指定します。

autocomplete オート・コンプリート

オートコンプリートの可否を以下の2つの値で指定できます。

on オートコンプリートを行います(初期値)。
off オートコンプリートを行いません。

autofocus オート・フォーカス

フォーカスをコントロールします。Webページが読み込まれた際、この属性を持つ入力コントロールにフォーカスを移動させます。autofocus属性は論理属性です。

checked チェックト

指定された項目をあらかじめ選択した状態にします。checked属性は論理属性です。

dirname ディレクショナリティ・ネーム

送信するデータの書字方向に関するクエリ値のクエリ名を指定します。

disabled ディスエーブルド

フォームの入力コントロールを無効にします。disabled属性は論理属性です。

form フォーム

任意のform要素に付与したid属性値を指定することで、そのフォームとこの属性を持つ入力コントロールを関連付けできます。

formaction フォーム・アクション

この属性を持つ入力コントロールが関連付けられているform要素のaction属性値を上書きできます。

formenctype フォーム・エンコード・タイプ

この属性を持つ入力コントロールが関連付けられているform要素のenctype属性値を上書きできます。

formmethod フォーム・メソッド

この属性を持つ入力コントロールが関連付けられているform要素のmethod属性値を上書きできます。

formnovalidate フォーム・ノー・ヴァリデート

この属性を持つ入力コントロールが関連付けられているform要素のnovalidate属性値を上書きできます。

formtarget フォーム・エンコード・タイプ

この属性を持つ入力コントロールが関連付けられているform要素のtarget属性値を上書きできます。

height ハイト

入力コントロールの高さを指定します。値は正の整数のみ指定できます。

list リスト

入力コントロールにデータが入力されるときに表示する入力候補リストを指定します。入力候補リストは、同一文書内に記述したdatalist要素で定義し、list属性の値は対象としたいdatalist要素に付与したid属性の値を指定します。

max マックス

入力コントロールに対して入力可能な値の最大値を指定します。

maxlength マックス・レンス

入力コントロールに入力可能な文字列の最大文字数を指定します。この属性を指定することで、「○文字以内」という入力制限を付けることができます。

min ミニマム

入力コントロールに対して入力可能な値の最小値を指定します。

multiple マルチプル

選択肢の複数選択を可能にします。select要素の選択肢やアップロードするファイルを[Ctrl]キーなどを押しながらクリックすることで、複数の対象を選択できます。multiple属性は論理属性です。

name ネーム

データが送信される際のクエリ名を指定します。

pattern パターン

入力された内容が正しいかを、JavaScriptの正規表現によって検証します。この正規表現は完全一致のみになります。ただし、以下の条件においてこの属性は無視され、検証は行われません。

  • 関連付けられたform 要素にnovalidate属性が付与され、入力内容の検証が無効になっている
  • 同じ入力コントロールにdisabled属性、またはreadonly属性が付与されている

placeholder プレースホルダー

入力コントロールにあらかじめ表示されるダミーテキスト(プレースホルダー)を指定します。値には改行コードを含むことはできません。

readonly リード・オンリー

フォームの入力コントロールを閲覧者が編集できないように指定します。readonly属性が指定されると、閲覧者は入力コントロールの値を変更できなくなりますが、フォーム送信時に値は送信されます。また、この属性が指定されたinput要素は、pattern属性による入力内容の検証対象から除外されます。

required レクワイアド

入力コントロールへのデータ入力や選択を必須とします。この属性が指定された入力コントロールに値がない場合、対応するブラウザーではフォームの送信が行われません。ただし、以下の条件においてこの属性は無視されます。required属性は論理属性です。

  • 関連付けられたform要素にnovalidate属性が指定されている、または送信ボタンにformnovalidate属性が指定され、入力内容の検証が無効になっている
  • 同じ入力コントロール要素にdisabled属性、またはreadonly属性が付与されている

size サイズ

ブラウザーが入力コントロールを表示する際のサイズ(文字数)を指定します。1以上の正の整数を値として入力でき、指定した文字数分を初期状態で表示できるように入力コントロールのサイズが調整されます。

src ソース

入力コントロールに埋め込む画像やスクリプトなど、外部リソースのURLを指定します。

step ステップ

入力コントロールに対して入力可能な値の最小単位を指定します。例えば、input type="number"で数値を入力するとき、step="5"と指定すれば、5の倍数となる数値しか入力できなくなります。

type タイプ

属性値に以下のキーワードを指定することで、入力コントロールの種別を指定します。詳細は各属性値のページで解説しています。

submit 送信ボタン
image 画像形式の送信ボタン
reset 入力内容のリセットボタン
hidden 閲覧者には表示しないデータ
text 1行テキストの入力欄(初期値)
search 検索キーワードの入力欄
tel 電話番号の入力欄
url URLの入力欄
email メールアドレスの入力欄
password パスワードの入力欄
datetime 日時の入力欄(タイムゾーンはUTC)
month 月の入力欄
week 週の入力欄
date 日付の入力欄
time 時間の入力欄
number 数値の入力欄
range 数値の入力欄(厳格でない大まかな数値)
checkbox チェックボックス(複数選択可能)
radio ラジオボタン(1つだけ選択可能)
file 送信するファイルの選択
bottum スクリプト言語起動用のボタン
color RGBカラーの入力欄

value バリュー

入力コントロールの初期値を指定します。フォームが送信される際、type属性値がhiddenの場合やreadonly属性が指定されている場合は、この値がそのまま送信されます。閲覧者が初期値を変更した場合は、変更後の値が送信されます。type属性値がcheckboxまたはradioの場合は、選択された項目に指定されたvalue属性の値が送信されます。指定されていない場合は、空の値が送信されます。また、type属性値がsubmit、image、reset、buttonの場合は、value属性の値が表示されるボタン名となります。

width ウィズ

入力コントロールの幅を指定します。値は正の整数のみ指定できます。

グローバル属性

すべての要素で使用できる属性です。
グローバル属性とイベントハンドラ属性

サンプルコード

form要素、またはtype属性の各属性値の使用例を参照してください。

関連記事