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

[Aline Manera]

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 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 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>