Más contenido relacionado La actualidad más candente (20) Similar a 全日本<label>要素マークアップ検定 (20) Más de Hiroshi Kawada (6) 全日本<label>要素マークアップ検定2. 川田 寛 Kawada Hiroshi
Web技術者コミュニティ
html5jえんぷら部 部長
仕事:業務システム案件の技
術支援とか
入出力(UI)・グラフィクス系
Web技術がお気に入りです
twitter.com/kawada_hiroshi1
facebook.com/kawada.hiroshi.758
発表者プロフィール
20. 人間工学的観点では、視点の動きが重要
- Path To Completion -
視点の導線は一本に。
http://www.slideshare.net/lorielue/form-design-best-practices-to-improve-conversions
Single Path :
Fast Path : 視点の導線は最小に。
✕ ⃝XXX
XXXXXX
X
XX
XXX
XXXXXX
X
XX
XXX
XXXXXX
X
XX
37. HTML5 - A vocabulary and associated APIs for HTML and XHTML
では・・・
http://www.w3.org/TR/html5/forms.html#the-label-element
39. <label for=”name”>名前 </label>
<input type=”text” id=”name” … />
forが有る場合は、forで指定されたIDと一致する
最初のノードをLabeled Controlとして扱い、Label
要素で囲まれたノードは全てform-ownerとなる
<label for=”name”><img src=”./img/name.png”></label>
<input type=”text” id=”name” … />
40. <label>
ラベル名
<input type=”text” … />
</label> <label>
<input type=”checkbox” … />
<img src=”img/alert.png” />
保存しない
</label>
forが無い場合は、label要素内のツリーオーダで
最初のLabelable ElementsがLabeled Controlとし
て扱われ、それ以外はform-ownerとなる
テキストノードを
form-ownerとして扱う
img要素とテキストノー
ドをform-ownerとする
47. readonly attribute HTMLFormElement? form;
attribute DOMString htmlFor;
readonly attribute HTMLElement? control;
! Labeled Controlの存在するフォームのDOM要素
! for属性の値(文字列)
! Labeled ControlのDOM要素
HTMLLabelElement (Label要素)
HTMLInputElement (Labelable要素)
readonly attribute NodeList labels;
! Form-OwnerのDOM要素のリスト