Reviewed-by: Aline Manera <alinefm@linux.vnet.ibm.com> On 01/29/2014 06:05 PM, CrÃstian Viana wrote:
A good usability feature of an HTML form is to click on an element's label to activate the element itself. For example, when clicking on a checkbox's label, the checkbox itself is checked, instead of requiring the user to click on the small corresponding element.
Assign every checkbox's and radio's labels to their corresponding form elements.
Signed-off-by: CrÃstian Viana <vianac@linux.vnet.ibm.com> --- ui/pages/storagepool-add.html.tmpl | 6 +++--- ui/pages/tabs/network.html.tmpl | 8 ++++---- 2 files changed, 7 insertions(+), 7 deletions(-)
diff --git a/ui/pages/storagepool-add.html.tmpl b/ui/pages/storagepool-add.html.tmpl index 14ef23a..dac99fe 100644 --- a/ui/pages/storagepool-add.html.tmpl +++ b/ui/pages/storagepool-add.html.tmpl @@ -124,7 +124,7 @@ <section class="form-section"> <div class="field"> <input type="checkbox" id="authId" name="authname"> - <label>$_("Add iSCSI Authentication")</label> + <label for="authId">$_("Add iSCSI Authentication")</label> </div> </section> <section class="authenticationfield form-section tmpl-html"> @@ -150,8 +150,8 @@ </script> <script id="partitionTmpl" type="html/text"> <div> - <input type="checkbox" value="{path}" name="devices"> - <label>{path}</label> + <input type="checkbox" id="{name}" value="{path}" name="devices"> + <label for="{name}">{path}</label> </div> </script> </body> diff --git a/ui/pages/tabs/network.html.tmpl b/ui/pages/tabs/network.html.tmpl index fcf8556..8cd991f 100644 --- a/ui/pages/tabs/network.html.tmpl +++ b/ui/pages/tabs/network.html.tmpl @@ -61,22 +61,22 @@ <div class="section-content"> <div class="input-container"> <input type="radio" id="networkTypeIso" name="networkType" value="isolated"> - <label>$_("Isolated: no physical network connection")</label> + <label for="networkTypeIso">$_("Isolated: no physical network connection")</label> </div> <div class="input-container"> <input type="radio" id="networkTypeNat" name="networkType" value="nat"> - <label>$_("NAT: outbound physical network connection only")</label> + <label for="networkTypeNat">$_("NAT: outbound physical network connection only")</label> </div> <div class="input-container"> <input type="radio" id="networkTypeBri" name="networkType" value="bridged"> - <label>$_("Bridged: VMs are connected to physical network directly")</label> + <label for="networkTypeBri">$_("Bridged: VMs are connected to physical network directly")</label> </div> <div class="destination"> <label>$_("Destination"): </label> <select id="networkInterface"></select> </div> <div class="VLAN"> - <label>$_("Enable VLAN"): </label> + <label for="enableVlan">$_("Enable VLAN"): </label> <input id="enableVlan" type="checkbox" value=""/> <label>$_("VLAN ID"): </label> <input type="text" id="networkVlanID" disabled>