input要素はフォームで必要な入力欄などをつくる【HTML】

フォームにおいて、情報を入力する入力欄が必要ですが、それを表すのがinput要素。

type属性で入力コントロールの種類を指定することで、送信ボタンやリセットボタン、チェックボックスなど、色々な入力コントロール（入力欄）を表すことができます。

入力コントロールにはどのような種類があるかは、別の記事で紹介するとして、この記事ではinput要素で指定できる属性をまとめました。

input要素で使える属性

かなり多いですが、input要素では以下のような属性を指定することができます。

accept（アクセプト）
alt（オルタナティヴ）
autocomplete（オート・コンプリート）
autofocus（オート・フォーカス）
checked（チェックト）
dirname（ディレクショナリティ・ネーム）
disabled（ディスエーブルド）
form（フォーム）
formaction（フォーム・アクション）
formenctype（フォーム・エンコード・タイプ）
formmethod（フォーム・メソッド）
formnovalidate（フォーム・ノー・ヴァリデート）
formtarget（フォーム・ターゲット）
list（リスト）
max（マックス）
maxlength（マックス・レンス）
min（ミニマム）
multiple（マルチ・プル）
name（ネーム）
pattern（パターン）
placeholder（プレースホルダー）
readonly（リード・オンリー）
required（レクワイアド）
size（サイズ）
src（ソース）
step（ステップ）
type（タイプ）
value（バリュー）
height（ハイト）
width（ウィズ）

accept（アクセプト）

accept属性は、サーバーが受け取ることが可能なファイルの種別を指定する属性で、値としてはMIMEタイプや拡張子を指定します。

ちなみにMIMEタイプとは、テキスト・画像・動画・音声などのデータファイル形式を示す識別子のこと。

また、カンマ（,）で区切って、複数の値を指定することもできます。

alt（オルタナティヴ）

alt属性はボタンの画像の代替テキストを指定する属性です。

autocomplete（オート・コンプリート）

オートコンプリートといって、過去に入力した情報を記憶し、次に入力するときに最初の文字を入力するだけで自動的に候補を出してくれる機能があります。

そのオートコンプリートを行うかどうかはautocomplete属性で決めることができ、onかoffの値を指定します。

on

onを指定するとオートコンプリートを行います。

また、onが初期値として設定されています。

off

autocomplete属性でoffが指定されると、オートコンプリートは行ないません。

autofocus（オート・フォーカス）

autofocus属性を指定することで、Webページが読み込まれたら、autofocus属性が指定された入力コントロールにフォーカスが自動的に移動されます。

autofocus属性は値を必要としない論理属性です。

checked（チェックト）

ラジオボタンやチェックボックスでよく使われる属性ですが、checked属性を指定することで、指定された項目はあらかじめ選択された状態になります。

checked属性は論理属性です。

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

dirname属性は、フォームで送信するデータの書字方向に関するクエリ値のクエリ名を指定することができます。

値に「ltr」を指定すれば左から右（left to right）に、「rtl」を指定すれば右から左（right to left）になります。

disabled（ディスエーブルド）

disabled属性を指定すると、フォームの入力コントロールが無効になります。

disabled属性は論理属性です。

form（フォーム）

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

formaction（フォーム・アクション）

formaction属性に値を指定することで、関連づけられているform要素のaction属性値を上書きすることができます。

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

formenctype属性に値を指定することで、関連づけられているform要素のenctype属性値を上書きすることができます。

formmethod（フォーム・メソッド）

formmethod属性に値を指定することで、関連づけられているform要素のmethod属性値を上書きすることができます。

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

formnovalidate属性に値を指定することで、関連づけられているform要素のnovalidate属性値を上書きすることができます。

formtarget（フォーム・ターゲット）

formtarget属性に値を指定することで、関連づけられているform要素のtarget属性値を上書きすることができます。

list（リスト）

list属性は、入力コントロールにデータが入力されたときに、表示される入力候補のリストを指定する属性です。

リストはdatalist要素で定義し、list属性の値には、対象とするdatalist要素につけたid属性値を指定します。

max（マックス）

max属性で入力コントロールに入力できる最大値を決めることができます。

maxlength（マックス・レンス）

入力コントロールに入力できる文字列の最大文字数を指定するときはmaxlength属性を使います。

このmaxlength属性を指定することで、入力制限を設けることができるんです。

min（ミニマム）

max属性とは対照的に、入力コントロールに入力できる最小値を決めるのがmin属性です。

multiple（マルチ・プル）

multiple属性を指定すれば、複数の選択肢を選ぶことが可能になります。

select要素などでよく使われるのですが、[Ctrl]キーなどを押しながらクリックすることで、複数の値を選択することができます。

multiple属性は論理属性です。

name（ネーム）

name属性で、データが送信される際のクエリ名を指定することができます。

pattern（パターン）

pattern属性は、入力された内容が正しいかどうか、JavaScriptの正規表現（完全一致のみ）によって検証する属性です。

ただし、以下の条件においては、pattern属性は無視されるので検証は行われません。

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

placeholder（プレースホルダー）

placeholeder属性で指定した値は、入力コントロールにダミーテキストとしてあらかじめ表示されます。

また、値に改行のコードを含むことはできません。

readonly（リード・オンリー）

readonly属性を指定することで、フォームの入力コントロールをユーザーが編集できないようになります。

このreadonly属性によって、ユーザーが値を変更することはできないですが、フォーム送信の際に値は送信されます。

pattern属性でも説明しましたが、readonly属性が指定されているinput要素に関しては、検証が行われません。

required（レクワイアド）

required属性が指定されたinput要素では、入力コントロールへのデータ入力もしくはデータ選択が必須となります。

このようなデータ入力やデータ選択がない場合は、フォームの送信が行われませんが、以下の条件においては無視されます。

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

また、required属性は論理属性です。

size（サイズ）

size属性は、ブラウザが入力コントロールを表示する際の文字数を指定する属性です。

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

src（ソース）

src属性は、入力コントロールに埋め込む画像やスクリプトなど、外部リソースのURLを指定するための属性です。

step（ステップ）

step属性は、入力コントロールで入力ができる値の最小単位を指定する属性です。

たとえば、input要素のtype属性のnumberで数値を入力するとき、「step=”3″」と指定すると、3の倍数となる数値しか入力できなくなるといった感じです。

type（タイプ）

type属性は、入力コントロールの種類を指定する属性です。送信ボタンやチェックボックスなど色々あります。

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

value（バリュー）

value属性で入力コントロールの初期値を指定することができます。

ユーザーが値を変更した場合は、その変更された値がフォームで送信されますし、チェックボックスやラジオボタンの場合は、選択された項目に指定されているvalue属性の値が送信されます。

しかし、type属性の値でhiddenが指定されている場合やreadonly属性が指定されている場合は、この値がそのまま送信されます。

また、type属性の値がsubmit,image,reset,buttonの場合は、value属性の値がボタン名として表示されます。

height（ハイト）

height属性で入力コントロールの高さを指定することができます。

指定できる値は正の整数です。

width（ウィズ）

width属性で入力コントロールの幅を指定することができます。