HTML

The input element is an HTML element used for web forms to collect information from users, allowing input of various types such as text, password, numbers, and choices like checkboxes and radio buttons.

input 要素

　input要素は、ユーザーからの入力を受け取るための、フォーム（ <form>～</form> ）を構成する様々な入力部品を作成する際に使用します。input要素は入力型と属性の組み合わせの数が非常に多いため、HTMLの中で最も強力かつもっとも複雑な要素の一つです。

フォーム部品の種類を指定する type属性

　type属性は、フォーム部品の種類を指定する際に使用します。 input要素は、type属性にどのような値を指定するかによって、一行テキストボックス・チェックボックス・ラジオボタン・送信ボタン・リセットボタン等、フォーム部品の種類を指定し分けることができます。この属性を指定しない場合などのの初期値は、type="text"（一行テキストボックス）です。

type属性の値

　HTML5では、input要素の type属性に指定できる値の種類が増えています。それぞれの値を指定した場合、例えば、<input type="email"> を指定すると、ほとんどのブラウザでは、送信ボタンを押したときに入力されている値がメールアドレスとして妥当かどうかチェックしてくれます。

type="button": 汎用のプッシュボタンを作成する。規定の動作を持たず、value属性の値（既定では空）を表示します。
type="checkbox": チェックボックスを作成する。選択または未選択のうち一つの値を取ることができます。
type="color": 色を指定するためのコントロールです。対応しているブラウザでは、アクティブになった時にカラーピッカーが開きます。
type="date": 日付（時刻を除く年、月、日）を入力するためのコントロールです。対応しているブラウザでは、アクティブになったときに日付ピッカーまたは年月日の数値のホイールが開きます。
type="datetime-local": UTC（協定世界時）によらないローカル日時を入力するためのコントロールです。対応しているブラウザでは、アクティブになった時に日付ピッカーまたは日付および時刻部分の数値のホイールが開きます。
type="email": 電子メールアドレスの入力欄を作成する。text入力欄のように見えますが、対応しているブラウザや動的なキーボードのある端末では、入力値を検証したり、関連するキーボードを表示したりします。
type="file": ユーザーがファイルを選択するコントロールです。accept属性を使用して、コントロールが選択することができるファイル形式を定義することができます。
type="hidden": 画面上は表示されない隠しデータを指定します。表示はされませんがサーバーへ送信されます。
type="image": 画像の submitボタンを作成する。src属性で定義された画像を表示します。alt属性は src属性の画像が見つからないときに表示されます。
type="month": タイムゾーン情報がない年と月を入力するためのコントロールです。
type="number": 数値の入力欄を作成する。対応していればスピナーを表示し、既定の検証を追加します。動的キーボードを持つ一部の端末では、テンキーを表示します。
type="password": パスワードの入力欄を作成する。入力値を隠す１行テキストフィールドです。サイトが安全ではない場合はユーザーに警告します。
type="radio": ラジオボタンを作成し、同じ name の値を持つ複数の選択肢から一つの値を選択することができます。
type="range": 厳密な値であることが重要ではない数値を入力するためのコントロールです。範囲のウィジェットを表示し、既定では中央の値になります。min と max の組み合わせで、受け入れる値の範囲を定義することができます。
type="reset": フォームのコントロールを既定値に初期化するリセットボタンです。使用についてはあまり推奨できません。
type="search": 検索文字列を入力するための単一行のテキスト欄です。入力値から改行が自動的に取り除かれます。対応しているブラウザーでは、入力欄を初期化するための削除アイコンが表示されることがあり、欄の内容を消去するために使用することができます。動的キーボードを持つ一部の端末では、エンターキーの代わりに検索アイコンを表示します。
type="submit": フォームを送信するボタンを作成します。
type="tel": 電話番号を入力するためのコントロールです。動的なテンキーを備えた一部の機器では、電話用のテンキーを表示します。
type="text": 【初期値】です。単一行の入力欄です。改行は自動的に入力値から取り除かれます。
type="time": タイムゾーン情報がない時刻を入力するためのコントロールです。
type="url": URL を入力するための入力欄です。text入力欄のように見えますが、対応しているブラウザーや動的なキーボードのある端末では、入力値を検証したり、関連するキーボードを表示したりします。
type="week": 年と週番号で構成される日付を入力するためのコントロールです。週番号はタイムゾーンを伴いません。
~~type="datetime"~~【廃止】: ~~UTC（協定世界時）による日付と時刻（時、分、秒、秒の端数）の入力欄を作成します。~~

type属性以外の属性

　input要素には、type属性以外にも多くの属性が用意されています。これらの属性は、type属性にどの値が指定されているかによって指定できるかどうかが決まります。例えば、入力必須であることを示す required属性は、type="text" や type="file" などの場合には指定することができますが、type="hidden" などの場合には指定することはできません。

　form属性は、どのフォームと関連付けるかを指定する際に使用します。input要素は初期値では直近の親要素となる form要素と関連付けられますが、form要素の id属性の値と input要素の form属性の値を一致させることで、input要素を特定のフォームと関連付けることができます。input要素を任意の場所に配置できるので、ウェブアプリケーションなどを制作する際には便利かもしれません。

属性

accept 属性: type="file" の場合に、どのタイプのファイルがサーバ側で受け取ることができるかを指定する。
alt 属性: type="image" の場合に、画像の代替テキストを指定する。src の画像が存在しないか、または読み込みに失敗した場合にこの属性の値を表示します。type="image" の場合には必須属性となります。
autocomplete 属性: すべての type属性において入力候補を提示して入力内容を自動補完する（on・off・default）。初期値は default です。
autofocus 属性: ページが読み込まれたときに、自動的にそのフォームコントロールにフォーカスを設定する。
capture 属性: type="file" の場合に、ファイルアップロードコントロールのメディアキャプチャのインプットメソッド。
checked 属性: type="radio"、type="checkbox" の場合に、ラジオボタンやチェックボックスをあらかじめチェック済みにする。
dirname 属性: type="text"、type="search" の場合に、フォーム送信時の要素の方向性を送信するために使用するフォームフィールドの名前です。
disabled 属性: すべての type属性において、操作を無効にする。
form 属性: すべての type 属性において、どのフォームと関連付けるかを form 要素の id 名で指定する。
formaction 属性: type="image"、type="submit" の場合に、フォームの送信先 URL を指定する。
formenctype 属性: type="image"、type="submit" の場合に、フォームの送信に使用するデータの形式を指定（application/x-www-form-urlencoded・multipart/form-data・text/plain）（初期値はapplication/x-www-form-urlencoded）
formmethod 属性: type="image"、type="submit" の場合に、送信方法（HTTPメソッド）を指定（get・post）する。（初期値はget）
formnovalidate 属性: type="image"、type="submit" の場合に、入力されたデータの妥当性を確認しない。
formtarget 属性: type="image"、type="submit" の場合に、フォームを送信するターゲット先を指定する。（_blank・_self・_parent・_top・任意のターゲット名）
height 属性: type="image" の場合に、画像の高さを指定する。
list 属性: ほぼすべての type 属性において、ユーザーに入力候補として提案する datalist 要素の id 属性を値で指定する。
max 属性: type属性が数値型の場合に、入力できる最大値を指定する。
maxlength 属性: type="password"、type="search"、type="tel"、type="text"、type="url" の場合に、入力可能な最大文字数を指定する。
min 属性: type属性が数値型の場合に、入力できる最小値を指定する。
minlength 属性: type="password"、type="search"、type="tel"、type="text"、type="url" の場合に、入力可能な最小文字数を指定する。
multiple 属性: 論理属性。type="email"、type="file" 属性の場合に、複数の値を入力・選択できるようにする。
name 属性: すべての type 属性において、フォームの部品に名前をつける。名前/値の組の部分としてフォームと一緒に送信される。
pattern 属性: type="password"、type="text"、type="tel" 属性の場合に、正規表現で入力値のパターンを指定する。
placeholder 属性: type="password"、type="search"、type="tel"、type="text"、type="url"の場合に、入力欄に初期表示する内容を指定する。
readonly 属性: 論理属性。ほぼすべての type 属性において、ユーザーによるテキスト編集を不可にして読み取り専用にする。
required 属性: 論理属性。ほぼすべての type属性において、入力必須にする。
size 属性: type="email"、type="password"、type="tel"、type="text"の場合に、表示文字数を指定する。（1以上の正の整数）
src 属性: type="image" の場合に、画像ファイルの URL を指定する。（type="image" の場合には必須属性）
step 属性: type属性が数値型の場合に、入力欄で刻むステップ値を指定する。
type 属性: フォーム部品の種類を指定する。（初期値はtext）
value 属性: すべての type 属性において、値を指定する。名前/値の組の部分としてフォームと一緒に送信される。
width 属性: type="image" の場合に、画像の幅を指定する。