Easy to ignore label, ignore label

Easy to ignore label, ignore label

# Easy to ignore label labels # the original 'label' label is a native HTML label. For the original function, refer to [here] ( http://www.w3school.com.cn/tags/tag_label.asp Label defines tags for input elements ). The label element does not present any special effects to users. However, it improves availability for mouse users. If you click Text in the label element, this control is triggered. That is to say, when the user selects the tag, the browser automatically redirects the focus to the form control related to the tag. The for Attribute of the label should be the same as the id attribute of the relevant element # the user experience label plays a very important role in improving the user experience, refer to the following 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''' rendering effect in the browser yes, A row of parallel radio, but you must select the single-choice circle, in this case, if we change the code to ''' <input type = "radio" id = "demo1" name =" Demo "value =" 1 "/> <label for =" demo1 "> Option 1 </label> <input type =" radio "id =" demo2 "name =" demo" value = "2"/> <label for = "demo2"> Option 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 "> Option 4 </label> <input type =" radio "id =" demo5 "name =" demo "value =" 5 "/> <label for = "demo5"> Option 5 </label> ''' improves the user experience. Because when you click the text, the corresponding radio circle is hooked up. Of course, if you think it is too troublesome for every radio to start an id, you can also set ''' <label> <input type = "radio" name = "demo" value = "1"/> Option 1 </label> <input type = "radio" name = "demo" value = "2"/> Option 2 </label> <input type = "radio" name = "demo" value =" 3 "/> Option 3 </label> <input type =" radio "name =" demo "value =" 4 "/> Option 4 </label> <label> <input type = "radio" name = "demo" value = "5"/> Option 5 </label> ''' can die in many brain cells because id is required. name !) To achieve the same user experience. # When the mobile terminal is on a mobile device, because the traditional mouse turns into a finger, the accuracy of the click is much lower, so it is necessary to increase the input to get the focus area. At this time, the label function is very great. refer to the following code '''. mobi-input {display: block; width: 300px; height: 30px ;} ''' <label class = "mobi-input"> prompt 1 <input type = "text" name = "demo"/> </label> ''. mobi-input', We can freely define the box size of the input to obtain the focus, so as to achieve the above purpose. # Compatibility on Samsung's mobile phone. Using the above Code, apart from the obvious outline when the input gets the focus, it also changes the innerText of the label to the placeholder of the input (visually ). When you see this problem at the beginning, the average person will solve it like this :'''. mobi-input {display: block; width: 300px; height: 30px ;}. mobi-input ,. mobi-input: focus {outline: none ;} ''' <label class = "mobi-input"> prompt 1 <input type = "text" name = "demo" placeholder = ""/> </label> '* * The problem cannot be solved! ** So I found some ready-made UI frameworks on the Internet, and then used the mobile phone to check the source code for compatibility and finally found a UI: http://joapp.com/live/samples/kitchensink/index.html To solve this problem, check its code. The original simple phrase 'contenteditable = "true" 'can solve this problem ~~~~ '''. Mobi-input {display: block; width: 300px; height: 30px ;} ''' <label class = "mobi-input"> prompt 1 <input type = "text" name = "demo" contenteditable = "true"/> </label>' then, you can encapsulate personalized mobile device UI controls based on the above basics.