□ 【1】画面ロード時のフォーカス要素を指定autofocus属性
autofocus属性は、画面ロード時に最初にフォーカスが当たる要素を指定するための属性です。画面が表示された瞬間から入力を始められるかどうか、はユーザーにとっての使い勝手が大きく異なる部分ですので、積極的に使っていきたい属性です。
以下のように、フォーム要素に「autofocus」という属性を指定するだけです。
<input type="text" name="name" autofocus>
□ 【2】<form>要素との入れ子から解き放つform属性
HTML5では、フォームに関連した要素（<input><button><textarea>など）は、<form>の内部に記述する必要がありません。すべてのフォーム関連要素は「form」という属性を持ち、その属性値として<form>要素のIDを指定すれば、そのフォームに所属しているものとして扱われます。
これは非常に大きな変化です。今までは、自由にフォーム要素をレイアウトしようと思っても、すべてを<form>の内部に書かなくてはならないというのが、デザイン上の足かせになってしまっていました。これからは、<form>要素との入れ子関係に縛られることなく、自由にWebページのデザインができます。
<!DOCTYPE html>
<meta charset="UTF-8">
<label for="name">お名前:</label>
<!-- input要素がform01の外に出ている -->
<input name="name" id="name" form="form01">
<form id="form01">
<input type="submit" value="送信">
</form>
□ 【3】forminputイベントとformchangeイベント
多くのフォーム関連要素は、これまでも値が変更されたことをchangeイベントで検知できました。また、テキストを入力するタイプの<input>要素（もしくは<textarea>要素）では、ユーザーの入力をinputイベントでも捕捉できした。
HTML5から新しく加えられたforminputイベントやformchangeイベントを利用すると、フォーム内の要素に対して入力や変更が行われたことを、1つのイベントハンドラで捕捉できます。
document.forms[0].addEventListener("forminput", function() {
// フォーム入力時の処理
}, false);
現在のところ、forminputイベント／formchangeイベントに対応しているのはOperaのみです。forminputイベントについては、このサンプルで確認できます。
また、これらのイベントを明示的に発生させるための「dispatchFormInput()」や「dispatchFormChange()」といったメソッドが<form>要素のJavaScript APIとして追加されました。
0 件のコメント:
コメントを投稿