Go: Special use of label labels

the easy-to-ignore label label is the original function of the label label, which is the HTML native label, whose original function is referenced here as label label for the INPUT element definition callout (tag). The label element does not present any special effects to the user. However, it improves usability for the user of the mouse. This control is triggered if you tap text inside a LABEL element.     That is, when the user selects the label, the browser automatically shifts the focus to the label-related form controls. Label Label's forThe attribute should be the same as the id attribute of the relevant element user experience label is very important in improving the user experience, refer to the following section of code<input type="Radio"Name="Demo"Value="1"/>option 1<input type="Radio"Name="Demo"Value="2"/>Option 2<input type="Radio"Name="Demo"Value="3"/>option 3<input type="Radio"Name="Demo"Value="4"/>Option 4<input type="Radio"Name="Demo"Value="5"/>Option 5 Renders the effect in the browser is, a row of side by side of the radio, but you have to choose the Radio circle, you can put the option point if we change the code to<input type="Radio"Id="Demo1"Name="Demo"Value="1"/><label for="Demo1"> Options 1</label> <input type="Radio"Id="Demo2"Name="Demo"Value="2"/><label for="Demo2"> Options 2</label> <input type="Radio"Id="Demo3"Name="Demo"Value="3"/><label for="Demo3"> Options 3</label> <input type="Radio"Id="Demo4"Name="Demo"Value="4"/><label for="Demo4"> Options 4</label> <input type="Radio"Id="Demo5"Name="Demo"Value="5"/><label for="Demo5"> Options 5</label>The user experience is improved, because when you click on the text, the corresponding single-selection circle is ticked. Of course, if you think it's too much trouble for every radio to have an ID, you can do it.<label><input type="Radio"Name="Demo"Value="1"/> option 1</label> <label><input type="Radio"Name="Demo"Value="2"/> option 2</label> <label><input type="Radio"Name="Demo"Value="3"/> option 3</label> <label><input type="Radio"Name="Demo"Value="4"/> option 4</label> <label><input type="Radio"Name="Demo"Value="5"/> option 5</label>can kill a lot of brain cells in less (because of the ID name!) ) to achieve the same user experience. Mobile on mobile devices, because the traditional mouse into the finger, the accuracy of the click is much worse, so we need to increase the focus of input area. This time the label has a very large function, refer to the following code. mobi-input{Display:block;    width:300px;    height:30px; }<labelclass="Mobi-input"> Tips 1<input type="text"Name="Demo"/></label>adjustment. mobi-With the definition of input, we can more freely define the size of the box in which input is focused, thus achieving the above purpose. Compatibility in Samsung's mobile phone, using the above code, in addition to input in the focus will have a clear outline, but also the label innertext into the input placeholder (visually). At the beginning of this problem, the average person will solve this issue:. mobi-input{Display:block;    width:300px;    height:30px; }. mobi-input input,.mobi-input input:focus{Outline:none; } <labelclass="Mobi-input"> Tips 1<input type="text"Name="Demo"Placeholder=""/></label>and find out that it can't be solved! So I find some out-of-the-box UI framework, and then use the phone, Compatibility good reference its source code, finally found a ui:http://joapp.com/live/samples/kitchensink/index.htmlcan solve this problem, look at its code, the original very simple sentence contenteditable="true"It will solve the problem ~ ~ ~. mobi-input{Display:block;    width:300px;    height:30px; }<labelclass="Mobi-input"> Tips 1<input type="text"Name="Demo"contenteditable="true"/></label>You can then encapsulate the personalized mobile device UI control based on the above basics.

Ext.: http://www.cnblogs.com/p2227/p/label_tag.html

Go: Special use of label labels