7:53 a.m.
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(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-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>
<input type="text" id="networkVlanID"
disabled>
</div>
</div>
--
1.8.4.2