{"id":492,"date":"2008-09-14T15:43:09","date_gmt":"2008-09-14T13:43:09","guid":{"rendered":"http:\/\/www.maratz.com\/blog\/?p=492"},"modified":"2008-09-14T15:44:40","modified_gmt":"2008-09-14T13:44:40","slug":"label-element-secret-powers","status":"publish","type":"post","link":"https:\/\/www.maratz.com\/blog\/archives\/2008\/09\/14\/label-element-secret-powers\/","title":{"rendered":"Label element secret powers"},"content":{"rendered":"

In web forms, label element<\/a> plays an important role. It describes the corresponding form field, whether it’s a text field, radio button, checkbox or a drop-down. The label is an essential interface element for challenged people.<\/p>\n

If labels are properly set, user agents attach a behavior: when a label is clicked with a mouse \u2014 in most browsers \u2014 the related field gains focus. The behavior is quite useful, since it gives you possibilities to increase hit area for a field.<\/p>\n

Gaining field focus works much like tabbing with a keyboard, but there are exceptions. When a form button (for example Submit) gains focus via keyboard navigation, naturally it is selected and ready to be stroked by Enter. But, if there’s a label assigned to it, hitting the label will also submit the form automatically.<\/p>\n

There is many possibilities. One of them is hiding form button with CSS and style label more freely, since it is a plain inline element. Design\/CSS-wise, think of it like a span but with an extra behavior built in.<\/p>\n

<label for=\"send\"\r\n\tstyle=\"background-image: url(send-button.gif);\">\r\n\t<input type=\"submit\" id=\"send\" value=\"Send\"\r\n\t\tstyle=\"position: absolute; left: -9999px;\" \/>\t\r\n<\/label><\/pre>\n
You can nest fields inside labels and increase hit area, which many people do by default with checkboxes and radio buttons.<\/p>\n
<label for=\"sure\">\r\n\t<input type=\"checkbox\" value=\"1\" id=\"sure\" name=\"sure\" \/>\r\n\tAre you sure?\r\n<\/label><\/pre>\n
Another interesting application is adding multiple labels for the same field \u2014 for instance, one right next to checkbox, and another one in a supporting paragraph where you can contextually anchor keywords directly to that checkbox.<\/p>\n
<p>If you are absolutely sure, then\r\n\t<label for=\"sure\">confirm it<\/label> in the form.<\/p>\r\n\r\n<label for=\"sure\">\r\n\t<input type=\"checkbox\" value=\"1\" id=\"sure\" name=\"sure\" \/>\r\n\tAre you sure?\r\n<\/label><\/pre>\n
Last, but not least, labels provide valuable connection between two elements, which gives you opportunity for a unique interface designs<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"
In web forms, label element plays an important role. It describes the corresponding form field, whether it’s a text field, radio button, checkbox or a drop-down. The label is an essential interface element for challenged people. If labels are properly set, user agents attach a behavior: when a label is clicked with a mouse \u2014 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[18],"tags":[],"_links":{"self":[{"href":"https:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/posts\/492"}],"collection":[{"href":"https:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/comments?post=492"}],"version-history":[{"count":0,"href":"https:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/posts\/492\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/media?parent=492"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/categories?post=492"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/tags?post=492"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}