HTML5: What happens when using For attribute mismatching
Table of Contents What is the label attribute What happens when you mismatch the for with the input Why its bad to label for mismatch What is the label attribute An HTML5's label attribute is 'for' What happens when you mismatch the for with the input If you mismatch this input, lets say your label's for is 'name' and you mismatch: <!DOCTYPE html> <html lang= "en" > <head> <meta name= "viewport" content= "width=device-width, initial-scale=1.0" > <meta name= "og:url" content= "https://www.exampleweb.com" > <title> Example webpage </title> </head> <body> <main> <label for= "name" > Name (required): </label> <input id= "fullName" name= "fullName" type= "text" placeholder= "John Doe" required /> </main> </body> </html> HTML will treat the input like a seperate element therefore, clicking on the label will not put you on the input you have to click the input-box. Why its bad to label for mismatch Users on tiny mobile devices might find it annoying that you cant click the label to go to the
Continue reading on Dev.to Webdev
Opens in a new tab
