[Kimchi-devel] [PATCH] HTML: Make the form element's labels clickable

[Aline Manera]

Reviewed-by: Aline Manera <alinefm at 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 at 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>