Label labels that are easy to ignore

# easy to ignore label label # # Original action ' label ' tag is HTML native tag, its original function reference [here] (http://www.w3school.com.cn/tags/tag_label.asp) label tag for INP        The UT element defines the 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. The For property of the label tag should be the same as the ID property of the related element # # User Experience the role of label in improving the user experience is very large, refer to the following section of code "<input type=" Radio "Name=" Demo "value=" 1 "/&    gt; 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 " The effect of rendering in the browser is, a row of side-by-side radio, but you have to choose the circle of the radio, in order to 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" > Option 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 has improved all of a sudden, because when you click on the text, the corresponding single-selection circle is hooked up. Of course, if you think each radio to have an ID too troublesome, you can also "<label><input type=" Radio "Name=" Demo "value=" 1 "/> option 1</label> &L T;label><input type= "Radio" Name= "Demo" value= "2"/> option 2</label> <label><input type= "Radio" Name= "Demo" value= "3"/> Options 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.            At this time the role of label is very large, refer to the following code ". mobi-input{Display:block;            width:300px;        height:30px; } "' <label class=" mobi-input "> Hint 1<input type=" text "Name=" demo "/></label> ' TuneWhole '. Mobi-input ' definition, we can more freely define the size of the box in which input gets the focus, 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 very obvious 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; } "' <label class=" mobi-input "> Hint 1<input type=" text "Name=" demo "placeholder=" "/></label>" * * and then found It's not going to work! * * 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.html can solve this problem, look at its code, the original very simple sentence ' contenteditable= ' true ' will be able to solve the ~ ~ ~ '. mobi-input{display:block;            width:300px;        height:30px; } "' <label class=" mobi-input "> Hint 1<input type=" text "Name=" demo "contenteditable=" true "/></label > ' Then you can encapsulate a personalized mobile device UI control based on the above basics.

Label labels that are easy to ignore