From alinefm at linux.vnet.ibm.com Wed Jan 29 18:04:28 2014
Content-Type: multipart/mixed; boundary="===============2863949947908996857=="
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: Wed, 29 Jan 2014 21:04:22 -0200
Message-ID: <52E988F6.2010008@linux.vnet.ibm.com>
In-Reply-To: 1391025939-29498-2-git-send-email-vianac@linux.vnet.ibm.com

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


Reviewed-by: Aline Manera <alinefm(a)linux.vnet.ibm.com>

On 01/29/2014 06:05 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 14ef23a..dac99fe 100644
> --- a/ui/pages/storagepool-add.html.tmpl
> +++ b/ui/pages/storagepool-add.html.tmpl
> @@ -124,7 +124,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">
> @@ -150,8 +150,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..8cd991f 100644
> --- a/ui/pages/tabs/network.html.tmpl
> +++ b/ui/pages/tabs/network.html.tmpl
> @@ -61,22 +61,22 @@
>               <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>
>                       <select id=3D"networkInterface"></select>
>                   </div>
>                   <div class=3D"VLAN">
> -                    <label>$_("Enable VLAN"): </label>
> +                    <label for=3D"enableVlan">$_("Enable VLAN"): </label>
>                       <input id=3D"enableVlan" type=3D"checkbox" value=3D=
""/>
>                       <label>$_("VLAN ID"): </label>
>                       <input type=3D"text" id=3D"networkVlanID" disabled>


--===============2863949947908996857==--