From alinefm at linux.vnet.ibm.com Sat Jan 25 19:40:15 2014
Content-Type: multipart/mixed; boundary="===============1531211948279899130=="
MIME-Version: 1.0
From: Aline Manera <alinefm at linux.vnet.ibm.com>
To: kimchi-devel at ovirt.org
Subject: Re: [Kimchi-devel] [PATCH] HTML: Make the form element's
 labels	clickable
Date: Sat, 25 Jan 2014 22:39:48 -0200
Message-ID: <52E45954.6030509@linux.vnet.ibm.com>
In-Reply-To: 1390402421-12398-1-git-send-email-vianac@linux.vnet.ibm.com

--===============1531211948279899130==
Content-Type: text/plain; charset="utf-8"
MIME-Version: 1.0
Content-Transfer-Encoding: quoted-printable

On 01/22/2014 12:53 PM, Cr=C3=ADstian 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=C3=ADstian Viana <vianac(a)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-ad=
d.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=3D"form-section">
>                           <div class=3D"field">
>                               <input type=3D"checkbox" id=3D"authId" name=
=3D"authname">
> -                            <label>$_("Add iSCSI Authentication")</label>
> +                            <label for=3D"authId">$_("Add iSCSI Authenti=
cation")</label>
>                           </div>
>                       </section>
>                       <section class=3D"authenticationfield form-section =
tmpl-html">
> @@ -143,8 +143,8 @@
>       </script>
>       <script id=3D"partitionTmpl" type=3D"html/text">
>           <div>
> -            <input type=3D"checkbox" value=3D"{path}" name=3D"devices">
> -            <label>{path}</label>
> +            <input type=3D"checkbox" id=3D"{name}" value=3D"{path}" name=
=3D"devices">
> +            <label for=3D"{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=3D"section-content">
>                   <div class=3D"input-container">
>                       <input type=3D"radio" id=3D"networkTypeIso" name=3D=
"networkType" value=3D"isolated">
> -                    <label>$_("Isolated: no physical network connection"=
)</label>
> +                    <label for=3D"networkTypeIso">$_("Isolated: no physi=
cal network connection")</label>
>                   </div>
>                   <div class=3D"input-container">
>                       <input type=3D"radio" id=3D"networkTypeNat" name=3D=
"networkType" value=3D"nat">
> -                    <label>$_("NAT: outbound physical network connection=
 only")</label>
> +                    <label for=3D"networkTypeNat">$_("NAT: outbound phys=
ical network connection only")</label>
>                   </div>
>                   <div class=3D"input-container">
>                       <input type=3D"radio" id=3D"networkTypeBri" name=3D=
"networkType" value=3D"bridged">
> -                    <label>$_("Bridged: VMs are connected to physical ne=
twork directly")</label>
> +                    <label for=3D"networkTypeBri">$_("Bridged: VMs are c=
onnected to physical network directly")</label>
>                   </div>
>                   <div class=3D"destination">
>                       <label>$_("Destination"): </label>
> @@ -78,7 +78,7 @@
>                   <div class=3D"VLAN">
>                       <label>$_("Enable VLAN"): </label>
>                       <input id=3D"enableVlan" type=3D"checkbox" value=3D=
""/>
> -                    <label>$_("VLAN ID"): </label>
> +                    <label for=3D"enableVlan">$_("VLAN ID"): </label>

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


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


--===============1531211948279899130==--