フォームの強化

目次
・フォームの強化・新要素の追加・APIの強化・その他

アンケートやユーザ登録など、WEBにおいて入力フォームは欠かせません。
また入力フォームにとどまらず、<input type="button" /> や <button> などはスクリプトイベントのきっかけなど、重要な働きをしています。
このように入力フォームは、WEBアプリケーションにおいて重要なアイテムです。

HTML5では、このフォームに関する内容が強化されています。
これは、WEBアプリケーションを扱う上で、今までのフォーム関連要素及びその属性では、機能的に足りないところがあったためです。

HTML5では、大きく以下のような強化が行われました。

type属性の拡張: これまで、「テキスト（パスワード）」「ラジオボタン」「チェックボックス」「ファイル選択」などのtype属性がありました。
しかし、これだけではWEBアプリケーションとしては、不十分なところもあるため、新たなtype属性が追加されました。
詳細については、「type属性の拡張」を参照してください。
input要素の新属性: HTML5では、type属性以外にも、多くの新属性が追加されました。
その一例が、ルール属性です。
これまで、入力フォームの入力値チェック(検証)は、スクリプトやCGIに頼るところが多く、どうしてもプログラミングを必要としていました。
HTML5では、「入力必須」などの基本的な入力ルールは、ルール属性を追加することで対応可能になります。
詳細については、「input要素の新属性」を参照してください。
新要素の追加: HTML5では、WEBアプリケーションを充実させるため、いくつかの新要素が追加されました。
詳しくは、後述「新要素の追加」に記します。
APIの強化: HTML5では、WEBアプリケーションを充実させるため、APIも強化されています。
そのひとつがテキストの選択状態(ハイライト状態)を制御するAPIです。
詳しくは、後述「APIの強化」に記します。

これ以外にも、その他既存のform要素なども強化されました。

「HTML5の基本 HTML5の新要素」にもあるように、HTML5では入力フォームの要素が追加されました。
これらの要素は、入力を補助したり、結果の表示を行うものです。

<datalist>

入力候補となるデータリストを定義します。
この要素は、テキスト入力フィールドにサジェスト機能を組み込むための要素です。
選択肢は<select>要素と同じく、<option>要素を用います。

リスト1. datalist要素の記述例

<input type="seach" name="look" list="keywords">
<datalist id="keywords">
	<option value="HTML5">HTML5</option>
	<option value="CSS3">CSS3</option>
</datalist>

<keygen>

フォーム送信時にキー(鍵ペア)を発行します。
この要素があるフォームは送信する際に、秘密鍵と公開鍵を生成し、秘密鍵はブラウザで保持、公開鍵はサーバに送信します。
autofocus属性は、オートフォーカスを指定します。
challenge属性は、チャレンジ情報を指定します。
disabled属性は、要素を無効化します。
form属性は、対応するフォーム要素を指定します。
keytype属性は、暗号化の種類を指定します。
　選択肢 : rsa
name属性は、名前を指定します。

リスト2. keygen要素の記述例

<keygen name="key" keytype="rsa" />

<output>

計算結果を表示します。
HTML4.xまでは、計算結果を表示するためには入力もとの要素のonChangeなどのイベントにスクリプトを書いて対応していました。
<output>要素は、入力もとを含む計算式を指定することで結果を表示します。
name属性は、名前を指定します。
for属性は、値を参照する要素IDを指定します。
form属性は、参照する入力値のあるフォーム要素IDを指定します。

リスト3. output要素の記述例

<input type="number" id="inpA" name="inpA" value="0" /> ＋ 
<input type="number" id="inpB" name="inpB" value="0" /> ＝ 
<output id="res"
    onforminput="value=(Number(inpA.value)) + (Number(inpB.value));"
>0</output>

<progress>

タスク完了までの進行などの状況を示す際に使用します。
いわゆる「プログレスバー」を表示します。
プログレスバーは、進捗状況を示したりするコントロールです。
value属性は、度合いを示す数値を指定します。
max属性は、最大値を示す数値を指定します。
form属性は、参照する入力値のあるフォーム要素IDを指定します。

リスト3. progress要素の記述例

計算中:
<progress value="50" max="100">(50%)</progress>

<meter>

規定範囲内の測定値を表示します。
バーグラフなどで表現されます。
value属性は、実際の値（※必須属性）を指定します。
min属性は、下限値を指定します。
max属性は、上限値を指定します。
low属性は、低領域の最大値を指定します。
high属性は、高領域の最小値を指定します。
optimum属性は、最適値を指定します。
form属性は、参照する入力値のあるフォーム要素IDを指定します。

リスト4. meter要素の記述例

結果:
<meter value="3" min="-10" max="10" low="-5" high="5" optinum="0">
	3ポイント(-10～10)
</meter>

HTML5では、フォームのAPIも追加されました。
そのひとつが、テキスト選択のAPIです。
テキスト選択とは、1行テキスト入力やテキストエリアで、文書の一部をハイライト選択することです。
これまで、IE等ブラウザ毎に、スクリプトによるテキスト選択を行うAPIがありました。
HTML5からは、ブラウザによらず、共通したAPIでテキスト選択することが出来ます。
※テキスト選択は、入力フォームに限らず、一般の文章の選択にも対応します。

【テキスト選択API】

element.select()

テキスト・フィールドのすべてを選択状態にします。

element.selectionStart [ = value ]

選択開始位置のオフセットを返します。
値をセットすれば、選択開始位置を変更することができます。

element.selectionEnd [ = value ]

選択終了位置のオフセットを返します。
値をセットすれば、選択終了位置を変更することができます。

element.selectionDirection [ = value ]

現在の選択方向を返します。
値をセットすれば、選択方向を変更することができます。
指定可能な値は、"forward", "backward", "none" です。

element.setSelectionRange(start, end [, direction] )

指定の部分文字列を指定方向に選択した状態にします。
選択方向が省略されたら、プラットフォームのデフォルト（none または forward）にリセットされます。

リスト5. テキスト選択APIの記述例

function getSlcPos(){
	var SlcArea = document.getElementById("SelectBase");
	var SlcStart = document.getElementById("SlcStart");
	var SlcEnd = document.getElementById("SlcEnd");

	// 選択範囲の取得
	SlcStart.innerHTML = SlcArea.selectionStart;
	SlcEnd.innerHTML = SlcArea.selectionEnd;
}

function setSlcPos(start,end){
	var SlcArea = document.getElementById("SelectBase");
	// 選択範囲の設定
	SlcArea.setSelectionRange(start,end);
	getSlcPos();
}

HTML5では、その他にも属性が追加されたり、拡張されているものがあります。
下記はその一部です。

フォーム要素全般: form属性が追加されました。
form属性は、属しているフォーム要素IDを指定します。
<form>: autocomplete属性が追加されました。
オートコンプリートのオン（on）/オフ（off）、つまり、入力欄の自動補完を有効にするかどうかを指定する際に使用します。
初期値はautocomplete="on"です。オートコンプリートを無効にする場合にはautocomplete="off"を指定します。
このブラウザの機能は、テキスト入力の手間を省いてくれる便利な機能です。
しかし、以前入力した値が誰にでも見られてしまうため、セキュリティ面でのリスクもあります。
HTML5からは、autocomplete属性を用いて簡単に制御することが出来ます。; novalidate属性が追加されました。
入力データのバリデーション（妥当性チェック）を行わない場合に使用します。
HTML5では、「type属性の拡張」に示すように、Eメールや電話番号の入力フィールドを示すtype属性が追加されました。
これらは妥当性チェックも行います。
妥当性チェックをクリアしないとデータ送信が出来ません。
強制的に送信したいなど、妥当性チェックをしないでデータ送信したい場合に使用します。