サイ本 18章 フォームとフォーム要素

JavaScript

JavaScript 第5版

JavaScript 第5版

18.1 Formオブジェクト

  • FormオブジェクトはDocumentオブジェクトの forms[] 配列プロパティの要素として利用する
  • フォームの入力要素に対応するオブジェクトは elements[] 配列に格納される
 // ex. 現在のウィンドウのドキュメントの2番目のフォームの3番目の要素を参照する場合
 document.forms[1].elements[2]
  • ほかにも ＜form＞タグ の属性である action, encoding, method, target に対応するプロパティを持つ
  • submit()メソッド、reset()メソッドを持つ
    • これらを呼び出せば、それぞれSubmitボタン, Resetボタンを押したときと同じ効果が得られる
    • onsubmit, onreset イベントハンドラが呼ばれるのはボタンを押したときのみ。
    • イベントハンドラがfalseを返せば submit, reset は取り消される

18.2 フォーム要素の定義

 document.forms[1].elements[2]
  • elements[]配列 にHTMLフォーム要素に対応したオブジェクトが格納される
  • それらのオブジェクトは type プロパティを持っていてそれによって要素の種類を判定することができる
オブジェクト HTMLタグ typeプロパティ イベントハンドラ
Button ＜input type="button"＞ "button" onclick
Checkbox ＜input type="checkbox"＞ "checkbox" onclick
File ＜input type="file"＞ "file" onchange
Hidden ＜input type="hidden"＞ "hidden" 　
Option ＜option＞ 　 　
Password ＜input type="password"＞ "password" onchange
Radio ＜input type="radio"＞ "radio" onclick
Reset ＜input type="reset"＞ "reset" onclick
Select ＜select＞ "select-one" onchange
Select ＜select multiple＞ "select-multiple" onchange
Submit ＜input type="submit"＞ "submit" onclick
Text ＜input type="text"＞ "text" onchange
Textarea ＜textarea＞ "textarea" onchange

18.3 フォームの制御

命名規則
  • ＜form＞タグで name 属性を定義する
    • Formオブジェクト生成時にform[]配列の要素として格納される
    • Documentオブジェクトにプロパティとして格納される
    • 一意な name の場合には文字列が格納されるが、複数ある場合は文字列の配列が格納されるので注意する
// name属性を指定
<form name="hoge">
// 以下のようにアクセス出来る
document.hoge
  • document.forms[0] よりわかりやすい
  • HTML上フォームの順番変わっても問題なく動作する

など保守面でのメリットがある

フォーム要素のプロパティ

フォーム要素には以下のような共通のプロパティがある

プロパティ名 説明
type フォーム要素の種類を表す文字列。読み出し専用。
form Formオブジェクトの参照。読み出し専用。
name HTMLのname属性で指定された文字列。読み出し専用。
value フォーム要素の「値」。文字列。読み書き可能。
フォーム要素のイベントハンドラ

大半のフォーム要素が次のイベントハンドラをサポートする

イベントハンドラ名 説明
onclick ユーザが要素上でマウスをクリックしたときに呼び出される
onchange ユーザが要素の値を変更したときに呼び出される
onfocus フォーム要素が入力フォーカスを受け取ったときに呼び出される
onblur フォーム要素が入力フォーカスを失ったときに呼び出される

余談 〜id と name について

id 属性とは

id属性は、HTML文書中の特定の一箇所を明示するための属性

DOCTYPEとフォーム・フォーム要素における使い方の違い

参考 http://www.awcs.org/xhtml/#base

HTML4は、a, applet, form, frame, iframe, img, map 要素についてname属性を定義し、JavaScriptやスタイルシートプロパティへの指定としてid属性が定義されています。しかしXHTMLでは要素のname属性は公式には廃止予定であり、後続バージョンのXHTMLでは取り除かれます。

  • HTML 4.01 (Transitional)
DOCTYPE id属性 name属性
＜form＞ ◯ ◯
＜input＞ ◯ ◯
DOCTYPE id属性 name属性
＜form＞ ◯ 単独不可
＜input＞ 単独不可 ◯

※互換性を考えるとid, name併記が現実的？

HTML5での変更点

引用 HTML5 differences from HTML4 W3C Working Draft 25 May 2011

3.4. Changed Attributes

The following attributes are allowed but authors are discouraged from using them and instead strongly encouraged to use an alternative solution:
・The name attribute on a. Authors can use the id attribute instead.

3.6. Absent Attributes

HTML5 has advice on what you can use instead.
・name attribute on img (use id instead).

  • a 要素の name 属性は使えるけど id 属性を使う方が良い
  • img 要素の name 属性は廃止 (代わりに id 属性を使う)
JavaScriptでは

参考 getElementById()でname属性が検索される？

IEはgetElementById()はidとname属性両方を対象に検索して最初に見つかったものを取ってくるようだ。

ちなみにIE9で試しても同じ結果になりました


IEさん…