On 01/22/2014 12:53 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 03c063d..12a9779 100644 --- a/ui/pages/storagepool-add.html.tmpl +++ b/ui/pages/storagepool-add.html.tmpl @@ -117,7 +117,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"> @@ -143,8 +143,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..9c149b7 100644 --- a/ui/pages/tabs/network.html.tmpl +++ b/ui/pages/tabs/network.html.tmpl @@ -61,15 +61,15 @@ <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> @@ -78,7 +78,7 @@ <div class="VLAN"> <label>$_("Enable VLAN"): </label> <input id="enableVlan" type="checkbox" value=""/> - <label>$_("VLAN ID"): </label> + <label for="enableVlan">$_("VLAN ID"): </label>

The check box is related to "Enable VLAN" instaed of "VLAN ID"

<input type="text" id="networkVlanID" disabled> </div> </div>