[49-1] input要素の属性一覧・ type属性の値一覧

今回から <input>要素について。
<input>要素は、フォームの部品でいちばんよく使う要素です。
「input（インプット）」は「入力」という意味。ユーザーにテキストを入力してもらったり、選択肢を表示して選択してもらえます。

ちなみに <output>要素も HTML5からできました。計算結果出力のための要素です。後日詳細。

使用する要素	<input>（終了タグはありません）

<input>要素は 空 (から) 要素 。終了タグはありません。

<input>要素は、
type属性の値 を変えると、まったく違うフォームの部品になります。
type以外の属性で、その部品の機能の追加・制限ができます。

まず今回は <input>要素の属性を一覧でまとめます。

<input>要素の属性（※ブルーは新しい属性 / 詳細はこちら）

type	name	value
size	maxlength	minlength
checked	accept	src
alt	width	height
readonly	disabled
required	placeholder	autocomplete
pattern	autofocus	form
list	multiple	dirname
inputmode	min	max
step	formaction	formmethod
formnovalidate	formtarget	formenctype

input要素の「 type属性で作るフォーム部品」一覧

記事へのインデックスになっています（値をクリックすると該当記事が別ウィンドウで開きます）

部品のカテゴリー	type属性の値	部品の役割
テキスト入力	type="text"（デフォルト）	1行のテキストフィールド
	type="search"　 new	検索キーワードの入力フィールド
	type="tel"　 new	電話番号
	type="url"　 new	URL
	type="email"　 new	メール
	type="password"	パスワード
日付や時刻の入力	type="datetime-local"　 new	日時（タイムゾーン無）
	type="date"　 new	日
	type="month"　 new	月
	type="week"　 new	週
	type="time"　 new	時刻（タイムゾーン無）
数値の入力	type="number"　 new	数値
	type="range"　 new	スライダーで数値（割合）の選択
色の入力	type="color"　 new	色の選択
選択ボタン	type="checkbox"	複数選択のボタン
	type="radio"	1つだけ選択のボタン
ファイル送信	type="file"	送信ファイルの選択
非表示データ	type="hidden"	非表示データの送信
送信ボタンなど	type="submit"	送信ボタン
	type="reset"	リセットボタン
	type="button"	汎用のプッシュボタン
	type="image"	画像を送信ボタンにする

<input>の属性一覧

type属性以外もけっこうあります。半分以上がHTML5から加わった属性です。

type="部品の種類"

上記をご覧ください。

name="部品の名前（任意のテキスト）"

受け取る側が各部品を見分けるための名前なので、必ずつけておきましょう。
「部品の名前=データ内容」というカタチでセットで送信されます。

<input type="tel" name="telNumber">
<!--この例なら、「telNumber = 入力されたテキストデータ」で送信されます-->

また、ラジオボタンやチェックボックスでは、複数の選択肢全部に同じ名前を付けてグループ化します。

<input type="radio" name="repeat" value="はじめて">はじめて
<input type="radio" name="repeat" value="2回目">2回目
<input type="radio" name="repeat" value="3回目以上">3回目以上
<!--この例で「2回目」を選んだら「repeat = 2回目」で送信されます-->

value="初期値　またはボタンのラベル（選択名）"

部品がテキストフィールドなら初期値として入力欄に表示されます。テキストが書き換えられればそれが value値になり、name属性とセットで送信されます。
また、ラジオボタンやチェックボックスでは、選択された値の名称となり、name属性とセットで送信されます。
送信やリセットボタンなどの場合はボタン上に表示されます。

<input type="text" name="code1" value="サンプル1">
<!--あらかじめ「サンプル1」と記入されたテキストフィールドになり、
ユーザがほかのテキストに書き換えれば、それが nameとセットで送信されます。-->
<input type="submit" value="送信"> <input type="reset" name="reset" value="リセット">
 <!--「送信」「リセット」と書かれたボタンが表示されます-->

size="テキストフィールド文字数"　maxlength="最大文字数"　minlength="最小文字数"

size属性で、テキストフィールドの幅を文字数で指定します。
maxlengthで、最大文字数を指定すると、それ以上は入力できなくなります。
minlengthで、最小文字数を指定すると、それ以下の入力は無効。
● type属性の値がテキスト入力用の「text, search, tel, url, email, password」の場合のみ。

<span>お名前 :</span>
<input type="text" name="name" size="20" maxlength="30"> 

checked（値は省略可能）

ボタンを選択された状態にします。
● type属性の値が「radio」と「checkbox」の場合のみ。

<input type="radio" name="repeat" value="はじめて" checked>はじめて
<input type="radio" name="repeat" value="2回目">2回目
<input type="radio" name="repeat" value="3回目以上">3回目以上

accept="MIMEタイプ"

ファイルを受け取るとき、サーバが受付可能なMIMEタイプを指定します。
「,（カンマ）」で複数指定可能。
● type属性の値が「file」の場合のみ。

<input type="file" name="img" accept="image/png", image/gif, image/jpeg>

src="画像のURL"　alt="代替テキスト"　width="幅"　height="高さ"

type="image"のとき、使用する画像のURL、代替テキスト、幅、高さを指定します。
● type属性の値が「image」の場合のみ。

<input type="image" src="btn.gif" alt="送信" width="60" height="30">

readonly（または「readonly=""」「readonly="readonly"」 ）　

「読み取り専用（リードオンリー）」になり、テキストフィールドの入力はできなくなりますが、value値は送信されます。

ユーザに「読ませたいけ変更して欲しくない」ときに使います。
例えば、入力画面 → 確認画面という流れで、確認画面では同じフォームを readonly で表示するなど。

● type属性の値が「 checkbox, radio, range, color, file, submit, reset, button, image, hidden 」では無効。

<select name="browser" readonly>
<option value="IE">IE</option>
<option value="Firefox">Firefox</option>
<option value="Chrome">Chrome</option>
</select>

disabled（または「disabled=""」「disabled="disabled"」 ）　

「使用不可」になります。入力も選択もできない状態で、value値も送信されません。

送信して欲しくない部品に使います。
例えば、「ただいま製造中」の売り切れ商品の選択ボタンなどを disabled にしておくなど。また、他の入力が済むまで送信ボタンを disabled にしておくとか。

<input type="submit" value="送信" disabled>

●これ以降は、HTML5からの新しい属性です。

required（または「required=""」「required="required"」 ）　 new

「入力必須」になります。入力せずに送信ボタンを押すとアラートが出ます。
● type属性の値が「range, color, submit, reset, button, image, hidden」のときは使えません。

<input type="tel" required>

placeholder="入力見本のテキスト"　 new

入力見本を入れられます。「value属性」との違いは、ビジタが記入を始めると消去されること。そのまま流用することなく、単なる見本として表示されます。
● type属性の値がテキスト入力用の「text, search, tel, url, email, password」のときのみ使えます。

<input type="tel" placeholder=”00-0000-0000”>

autocomplete="on または off"　 new

「オートコンプリート（履歴から入力予測して自動補完する）」のオン、オフ。
デフォルトはオン。ということは、オフにしたいときのみ使う属性ですね。
●<form>要素でオフにしていたら、こっち（<input>などの子要素）でオンにしてもムリ（親が優勢）

<input type="tel" autocomplete="off">

pattern ="正規表現"　 new

「正規表現」を指定。JavaScriptの正規表現で書きます。指定した以外の書き方をしたらアラートが出ます。title属性で書き方を指示してあげるのが親切。
※「正規表記」については下記に詳細
●type属性の値がテキスト入力用の「text, search, tel, url, email, password」のときのみ使えます。

<input type="text" pattern="\d{3}-?\d{4}" title=" 3桁（ハイフン）4桁 で入力してください。">

autofocus（または「autofocus=""」「autofocus="autofocus"」 ）　 new

HTML文書のロード後すぐに、この属性のある要素が自動的にフォーカスされます。
● autofocus属性は、1つのHTML文書に1つだけ。（そりゃそうだ！）

<input type="tel" autofocus>

form="<form>要素のID"　 new

form属性で<form>要素につけたIDを呼び出して関連づけます。
これによって<input>要素が<form>要素の外に出ていても機能します。

<input type="text" form="ex1">
<form method="post" action="sample.cgi" id="ex1">
<input type="submit" value="送信する">
</form>

「form属性」については、
「[47] form要素でデータ送信可能なフォームである事を示そう」の「HTML5からの変更点」もご覧ください。

list="<datalist>要素のID"　 new

list属性で<datalist>要素につけたIDを呼び出して関連づけます。
これによって<datalist>要素の内容が、ダブルクリックなどで入力欄にリストで現れ、入力がラクになります。<datalist>要素については後日詳細。
● type属性の値が「hidden, password, checkbox, radio」とその他のボタン類のときは使えません。

<input type="text" list="codeType">
<datalist id="codeType">
<option value="リスト内容1"></option>
<option value="リスト内容2"></option>
<option value="リスト内容3"></option>
</datalist>

multiple（または「multiple=""」「multiple="multiple"」 ）　 new

複数の値を入力できるようになります。
● type属性の値が「email」と「file」のときだけ使えます。

<input type="file" multiple>

dirname="文字の書式方向の送信に使う名前（任意のテキスト）"　 new

この名前と「入力内容の書字方向（ltr または rtl）」がセットで送信される。
（自動判別されて送信される）
下記の場合は「text=Hello&exampleDir=ltr」と送信される。
アラビア語のような「右から左」の書式の場合は、末尾が「=rtl」となる。

<input type="text" name="text" dirname="exampleDir" value="Hello">

inputmode="キーワード"　 new

モバイル機器でタイプする時の、数字・アルファベット・かな入力など「適切な入力モード（キーボード）」を出す。

ブラウザは type属性の値で適切な入力モードを選びます（input type="tel" なら数字とか）が、「input type="text"」のとき、例えば「フリガナ」を「カタカナ」で入力して欲しいときなどに、この inputmode を使います。
★今のところ実装ブラウザはないようです（2017年12月記 / 参考：Can I Use）

お客様名：<input type="text" name="custname" inputmode="kana-name">

インプットモードのキーワードは、the inputmode attribute | W3C に一覧があります。そこからいくつかピックアップしておきます。

• verbatim：英数字ラテン文字入力（例：ユーザ名、製品コードなど）
• kana：かな・ローマ字入力。漢字への変換をサポート。
• kana-name：人名のための入力支援（連絡先リストからのテキスト予測など）
• katakana：カタカナ
• numeric：0〜9の数字と区切り文字入力（例：クレジットカード番号など）

min="最小値"　max="最大値"　 new

min属性は入力可能な最小値を、max属性は最大値を指定します。
最小値未満の数値や、最大値より大きい数値は入力できないようになります。
● type属性の値が「datetime, datetime-local, date, month, week, time, number, range」のときだけ使えます。

<input type="number" min="1" max="20">

step="ステップ値"　 new

step属性は入力値の間隔（ステップ）を指定します。
● type属性の値が「datetime, datetime-local, date, month, week, time, number, range」のときだけ使えます。

<input type="number" min="0" max="20" step="5">
<input type="number" min="0" max="20" step="any">
<!--「any」を指定すれば制限無し（ステップは設定されない）-->
<input type="datetime" step="7200">
<!--type="datetime"では、1秒単位のステップ。上記は7200秒=2時間ずつ-->

formmethod="post または get（HTTPメソッド）"　 new
formaction="URL"　 new
formtarget ="_blank"（または _self　_parent　_top　ウィンドウ(フレーム)名）　 new
formnovalidate（または「novalidate=""」「novalidate="novalidate"」 ）　 new
formenctype="送信時のデータ形式（MIMEタイプ）"　 new

これらはすべて<form>要素での設定を上書きします。
● type属性の値が「submit」と「image」のときだけ使えます。　送信ボタンにだけ使えるってこと。

<form method="post" action="ex1.cgi" target="_top">
<input type="submit" value="送信" formmethod="get" formaction="ex2.cgi" formtarget="_self" 
formnovalidate>
</form>

<!-- enctype属性は、method="post" のときだけ使えます-->
<form method="post" action="ex3.cgi" enctype="multipart/form-data">
<input type="submit" value="送信する" formenctype="application/x-www-form-urlencoded">
</form>

このほかグローバル属性も使います

当然ながら、id, class, title, style などのグローバル属性も使えます。
グローバル属性については、「[39] 全要素に使える「HTML5グローバル属性」を見てみよう」をご覧ください。

おまけ：正規表記のサンプル

正規表記（regular expression = RegExp）は、文字の種類（数字, テキスト(大文字, 小文字) ）の組み合わせのパターンを作って、マッチングさせる（合ってるかどうか確認する）ためのモノ。

「pattern属性」でよく使いそうな正規表現のサンプルをメモ。

パターン	正規表現	意味
tel	\d{1,5}-\d{1,4}-\d{4,5}	1〜5桁の数字 - (ハイフン) 1〜4桁の数字 - 4〜5桁の数字
url	https?://\S+	httpにsがついてもOK ://　ホワイトスペース以外の文字繰返し
email	.+@.+\..+	文字 @ 文字 .(ドット) 文字
password	^[0-9A-Za-z]+$	アルファベットと数字の繰り返し
郵便番号	\d{3}-?\d{4}	数字を3桁 - (ハイフン)がついてもOK 数字を4桁

正規表記の文法をざっとメモ。

文字	意味
\d	数字 （ [0-9]と同じ）（\D は数字以外の文字）
\S	「\s」以外の1文字 （\s はスペース,タブ,改行,改ページを含む1文字のホワイトスペース文字）
{n,m}（nとmは整数）	直前の文字が最小n回、最大m回
?	直前の文字が0回か1回　（{0,1}と同じ）
.（ドット、小数点）	改行文字以外の1文字
+	直前の文字の1回以上の繰り返し
\（バックスラッシュ）	直後の1文字の特殊文字をエスケープ （\. だと特殊文字「.」をただの文字としてのドットにするってこと）
[A-Z]	大文字　（[a-z]は小文字、[A-Za-z]はアルファベット）
[A-Za-z0-9]	アルファベットと数字
^	入力の最初
$	入力の末尾
{n}（nは整数）	直前の文字がn回だけ

JavaScriptの正規表記については、下記を参考にしました。
●Mozilla Developer Network「正規表現 - JavaScript」
●Wikibooks「JavaScript 標準ライブラリ RegExp」

次回予告

<input>要素は、フォームの部品の中で一番よく使う要素。
部品になる要素は、他に <textarea> <select> <button> などがあるけど、<input> 要素だけでフォーム部品は事足りるってくらい、多種多様な部品を作ることができます。
ですのでこれから当分 <input>要素が続きます（数が多いのでｗ）

次回からいよいよ具体的に <input>要素でフォームの部品を作っていきます。
まずは、テキスト入力に関する部品を作ってみましょう。