全日本＜label＞要素マークアップ検定
•
89 likes•62,182 views
Web入力フォームの縁の下の力持ち、Label要素をマスターするための検定試験です。 仲間内の勉強会で、ちょっと遊びすぎましたｗ
![Labelable要素からform-onwerな
Label要素の一覧を取得するAPIは？
var labelNodes; // NodeList
labelNodes = element.[ ? ] ;](https://cdn.statically.io/img/image.slidesharecdn.com/label-130811065623-phpapp01/85/label-44-320.jpg)
全日本＜label＞要素マークアップ検定
- 2. 川田 寛 Kawada Hiroshi Web技術者コミュニティ html5jえんぷら部 部長 仕事：業務システム案件の技 術支援とか 入出力(UI)・グラフィクス系 Web技術がお気に入りです twitter.com/kawada_hiroshi1 facebook.com/kawada.hiroshi.758 発表者プロフィール
- 19. Matteo Penzo氏のEyeTracking検証結果では http://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php 1. Left-Aligned Labels(左寄せ) 2. Right-Aligned Labels(右寄せ) 3.Top-Aligned Labels(上寄せ) ✕ ⃝ ◎ → 項目が少ないならこっち → 項目が多い時に有効 → 一番ストレスが大きい → ストレスが最小、ログイン画面 → スクロールが必要な場合とか → 使っちゃダメ
- 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
- 22. ユーザが最もストレスを感じない ラベルのフォントスタイルはどれ？ (A). Plain Text Labels (そのまま) name furigana
- 23. (B). Bold Labels (太字) ユーザが最もストレスを感じない ラベルのフォントスタイルはどれ？ name furigana
- 24. (C). Italic Labels (斜体) ユーザが最もストレスを感じない ラベルのフォントスタイルはどれ？ name furigana
- 25. 正解は・・・ (A)
- 27. Matteo Penzo氏のEyeTracking検証結果では http://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php Plain Text Labels (そのまま) Bold Labels (太字)✕ ⃝
- 28. “斜体”の日本語と英語圏の文化的差異の問題 1. “意味付け”の違い 英語圏では”引用”の意味合いを強く含む 2. “相互運用性”の問題 WinNT6.0(Vista)以降は日本語メイリオが斜体に非対応 font-weight : bold; font-style : italic;
- 29. ラベルの周りに枠等を入れるのも ユーザストレスが高い 名前 ふりがな 年齢 名前 : ふりがな : 年齢 : 名前 ふりがな 年齢
- 33. <label for=”hoge”>ラベル名</label> <input type=”text” id=”hoge” name=”fuga” /> (B). <label>要素の 正しいマークアップはどれ？
- 34. <label id=”hoge”>ラベル名</label> <input type=”text” id=”hoge” name=”fuga” /> (C). <label>要素の 正しいマークアップはどれ？
- 35. <label name=”fuga”>ラベル名</label> <input type=”text” id=”hoge” name=”fuga” /> (D). <label>要素の 正しいマークアップはどれ？
- 36. 正解は・・・ (A), (B)
- 37. HTML5 - A vocabulary and associated APIs for HTML and XHTML では・・・ http://www.w3.org/TR/html5/forms.html#the-label-element
- 38. Label要素が他の要素と紐づく時、Labelは”form-owner”と呼ぶこと がある。form-associated要素のサブクラスに相当するから。 Label要素と紐付けできる要素を、”Labelable要素”と呼ぶ。 Label要素と紐付けされたLabelable要素を、Label要素側から は、”Labeled Control”と呼ばれる。 Label要素の構造・用語を以下と定義する <<interface>> Labelable要素Label要素 0..n 0..1 - Labeled Control (- form-owner ) 【クラス図】Label要素の構造 input要素 button要素 などなど 実質的に同じ form-associated要素 <<implements>>
- 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とする
- 41. 別の名前空間(form要素)を参照するには form属性を利用する <label form=”form2” for=”input1” >名前</label> <form id=”form2”…> <input id=”input1” … /> <input id=”input2” … /> <input id=”input3” … /> </form> <form id=”form1”…> <input id=”input1” … /> <input id=”input2” … /> <input id=”input3” … /> </form>
- 42. Label要素は、以下のカテゴリに属す <<interface>> Label要素 Flow Content Phrasing Content Intractive Content Reasociatable form-associated Content Palpable Content <<implements>> body要素以下に配置されるコンテンツ フレーズ(あまり長くない文字列)を囲むコンテンツ クリックなどのイベントにより処理が走るコンテンツ フォームと関連付けられたコンテンツ 最低一つのノードを持たなくてはいけないコンテンツ
- 44. Labelable要素からform-onwerな Label要素の一覧を取得するAPIは？ var labelNodes; // NodeList labelNodes = element.[ ? ] ;
- 45. 正解は・・・ labels
- 46. Label要素とLabelable要素の２箇所で Label要素固有のDOM-APIが使える interface HTMLLabelElement : HTMLElement { readonly attribute HTMLFormElement? form; attribute DOMString htmlFor; readonly attribute HTMLElement? control; }; interface HTMLInputElement : HTMLElement { readonly attribute NodeList labels; // NodeList<HTMLLabelElement> };
- 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要素のリスト
- 49. 次のHTMLドキュメントが 動作するIEのバージョンは？ <label for=”name” >ラベル名</label> <input type=”text” id=”name” name=”name” />
- 50. 正解は・・・ IE4+
- 52. for属性無しはIE7以上でないと 動作しない <label for=”name” >ラベル</label> <input type=”text” id=”name” name=”name” /> <label>ラベル <input type=”text” name=”name” /></label> 4+ 7+ しかし、利用率が高い使い方
- 58. input要素(type=”text”) input要素(type=”tel”) : 公式非対応 テキストボックス・ベース input要素(type=”url”) : 公式非対応 input要素(type=”email”) : 公式非対応 input要素(type=”password”) 挙動 フォーカスが当たる onclick → onfocusイベント onfocus → onclick
- 61. ブーリアン・ベース input要素(type=”checkbox”) input要素(type=”radio”) 挙動 クリックの動作 onclick → onfocus イベント onfocus → onclick onclick
- 63. input要素(type=”range”) onclickイベント 挙動 フォーカスが当たってはいるが何もできない 特殊系 フォーカスが当たり、操作が可能 onclick → onfocus 10+
- 64. 何問正解できましたか？