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

[Crístian Viana]

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