HTML - Label Element Semantics
Hi,
I know the label element is for associating a text label with a control, and that when you click it the control gets focus. But is that its only purpose? Is it supposed to be used for describing a more general semantic relationship. In particular can/should/is it intended to be used to associate key value pairs to describe a semantic relationship sort of like <dt> <dd>? For example say I have a listing of key values pairs from say a config file. Should I do this: <label for="val0">screenheight:</label><span id="val0">7560</span> I dont know, maybe I should use <dt> <dd> and re-style with CSS? Or maybe thats what the ":" is for(!) and I dont need to express this in HTML (Thinking about the boundary between presentation and semantics makes my crazy, its very fuzzy in my opinion). Any thoughts appreciated. Thanks. Similar TutorialsMy Html code is as follows: HTML Code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Services - Wellington Florida Lawn Salon and Service</title> </head> <body> <h1>Wellington Lawn Salon</h1> <header> <nav role="navigation"> <ul> <li><a href="filename">Services</a></li> <li><a href="filename">Pictures</a></li> <li><a href="filename">Contact Us</a></li> <li><a href="filename">History</a></li> <li><a href="filename">Testimonials</a></li> </ul> </nav> </header> <article> <h1>Services available:</h1> <section> <h2>General and special lawn maintenance</h2> </section> <section> <h2>Landscaping</h2> </section> <section> <h2>Sod installation</h2> </section> <section> <h2>Irrigation</h2> <section> <h3>Installation</h3> </section> <section> <h3>Repair</h3> </section> </section> <section> <h2>Tree Trimming</h2> </section> </article> </body> </html> When I run the code through the HTML5 Oulliner I receive this: 1.)Wellington Lawn Salon 1.)Untitled Section 2.)Services available: 1.)General and special lawn maintenance 2.)Landscaping 3.)Sod installation 4.)Irrigation 1.)Installation 2.)Repair 5.)Tree Trimming My question is about the "untitled section". What part of the code is "untitled"? Why? How does it relate to your SEO? Also any other semantic markup tips, in general or specifically in regards to this example, are greatly appreciated. i have added dropdown list and associated label with it and i want to know the value for label and the value selected in dropdown list. How can I access both values inside javascript? can anybody help? I have a <select> drop down list. I have a label associated with this element. Here is the code; <select name="v" id="v" value="0" size="1"> <option>0</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> </select> <label for="v">No. required</label><br /> The problem is that when the user clicks on the text of the label, the value in the <select> list is changed back to 0. For example, the user selects 3 using the drop down list. Then if the user ever clicks on the label's text, this value returns to 0. How can I stop this from happening and maintain the initially diisplayed value of the <select> list as 0? Afternoon everyone, I have a table with many rows and a checkbox in the first cell of each row. I want the user to be able to click anywhere on the row and activate the checkbox, so I'm using a label tag in front of each row. The following code works in IE7, but not Firefox or Chrome. Any ideas how to make it work cross-browser? Code: <table> <label for="X"> <tr> <td> <input type="checkbox" id="X"/> </td> <td> THIS TEXT SHOULD ACTIVATE THE LEFT CHECKBOX </td> </tr> </label> </table> Thanks! Is there a way to dynamically create text in html/jsp based on a value the user chooses? I have the following code in a jsp and based on the value of the returntype that the user chooses. The value SSN: has to change to SSN/FEIN: depending on what is choosen in the return type drop down (note, the change has to be in the text and not the inputType field). Is there an easy way to do this? Here is the form code... <form action="CompareData" method="post"> <center> <table cellspacing="5" border="0"> <col width=450> <tr> <td align = "LEFT" colspan=2><b>Please enter the parameters below to retrieve the information:</b></td> </tr> </table> </center> <center> <table cellspacing="5" border="0"> <col width=200> <col width=100> <tr> <td align = "LEFT"><b>SSN:</b></td> <td><input type="text" name = "SSN" value="000000000" ></td> </tr> <tr> <td align = "LEFT"><b>End Year:</b></td> <td><input type="text" name = "ENDYEAR" value="2007" ></td> </tr> <tr> <td align = "LEFT"><b>Num of Years:</b></td> <td><input type="text" name = "NUMYEARS" value="2" ></td> </tr> <tr> <td align = "LEFT"><b>Return Type:</b></td> <td> <select name="ReturnTypeDropDown" > <option value="WI">WI</option> <option value="IRS">IRS</option> <option value="Informational">Informational</option> </select> </td> </tr> <tr> <td><input type="hidden" name="RETURNTYPE" value="" ></td> <td><input type="button" value="Retrieve" onClick="validate(this.form)"></td> </tr> </table> </center> </form> Hi, I'm a HTML newbie (have some programming experience though), so please forgive me if my question is maybe unclear or naive. I've managed to build a newsletter that displays nicely in the most-used webmail clients and offline clients. For personalization I can add form fields (like: name) to the html code that graphicmail will fill with the indivual recipient's data (like: Bob) on sending out the newsletter. To add an "Unsubscribe" link to the newsletter, graphicmail recommends to insert this code: <DIV><LABEL class=FormField data="Unsubscribe">Unubscribe</LABEL></DIV> This results in a simple: Unsubscribe text in the newsletter. If the reader clicks on it, the unsubscribe webpage is opened. I would like to achive the same functionality but with something different than the LABEL tag, since this plain text "Unsubscribe" doesn't fit the design of the newsletter. Ideally I'd like to be able to use an image that when clicked provides the same functionality as the label tab does. Sorry for the confused description. Thanks for your help. Mark 2 Quick questions: 1) Is it considered good, poor, or indifferent programming style to implicitly connect labels with other form tags. For instance, is one of these preferable to the other? Code: <label for="username">Username</label> <input type="text" name="username" id="username" /> <label>Username: <input type="text" name="username" id="username" /></label> 2) Is it good or bad programming style to have the name and id of a tag the same? For instance, in the example above, the input object has an id and name of "username". Is this considered ok? Tahnks for all the help~ Good day guy's. Im very new to html programming and scripting, but I was wondering if it would be possabe to insurt a dynamic label field in you body where to content must be fetch from a notepad or wordpad ( /docs/someting.txt ) Thanks How do I place a label for a radio button above the radio button? I have a form element (radio) that currently has an ID and a Name. But I need a third identifying parameter. (The third reference-able parameter is used as an argument in another form element's onClick event.) Knowing that class="x" can actually have class="x y z" and it seems to work, can I also have id="pa1 pa2 pa3"? (I suppose I could try it and see what breaks...) Why the <img> tag does not have or does not need an ending tag like <p> and </p> > Thank you I'm a beginner and I need to know exactly how to put together and img tag. I know how to do it with the other ones but I don't exactly know how to do it with just one tag. Please someone help me out simple question I hope. Hi, is it possible to add a number of tables (or td's or any rectangluar html container element) in the same vertical level but as long as there is room. But if there is no more room the new ones will be added in the next line the behaviour i am need is the like the behaviour of the img element. Am I clear enough? Merci! Hello, I am Delphi programmer and PHP web development, I have a problem with the AJAX which is: how to free or close the element, in the Delphi when I create an object in runtime it can be free the object and close it like query, anyway how to close or free the result in AJAX language? below is an exmple: Code: var Buffer= document.body; var getDivBox= document.getElementById("div_box"); var EDivBox= document.createElement("div"); if (getDivBox != null) { getDivBox.style.visibility = "visible"; } else { EDivBox.setAttribute("id","div_box"); Buffer.appendChild(EDivBox); } with the above code, for first loading it will create to element and while you are in the page it will still create my question is how to close the created element in order to make the page fast because in the localhost I checked the CPU performance and I surprised: it was 100%, when I close the page it go back normal. any help with this topic is highly appreciated Regards Hi there How is every one doing? I am new to HTML and just wanted to know so I understand is a element the text that gos between the tag and is the tag Altitude </> im just a bit lost . thank you for your time Matt I have a FORM element that I'm trying to have displayed within a P element with a bit of CSS but for some reason the FORM element displays outside the P element. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <style type="text/css"> #link { border-top: 1px dotted #bbb; border-bottom: 1px dotted #bbb; margin-top: 5px; padding: 3px 0; width: 300px; } </style> </head> <body> <p id="link"> <form> <input type="image" src="http://www.google.ca/intl/en_ca/images/logo.gif"> </form> </p> </body> </html> im looking for a way to be able to enter numbers into a form so that it changes a certain link that i need to be changed. for example: if you put 1234 in the submit form (or w/e) the url would change to http://url.com/lalala/hmm=1234 then you switch it to 7890 and the url would change to http://url.com/lalala/hmm=7890 thanks for any help Hi, I am a complete novice - been in a workbook for about a month or two and just getting into frames and ran into a browser display problem. The following code will display a "red" border in IE but not in Firefox or Opera. Its a workbook example and I wrote the code exactly as it says but I'm assuming something has changed since the book was published. <frameset rows="85,*" border= "0" spacing="0" frameborder="0" framespacing="0"> <frame src="topbanner2.html" scrolling="no" marginheight="0"> <frameset cols="150,*" style="border-top: 5px ridge red"> <frame src="sidebar3.html" marginheight="0" marginwidth="10px"> <frame src="main3.html" name="main" style="border-left: 5px ridge red"> </frameset> Any Suggestions. Thanks, Ralph Hi everyone, Our website:- alternativeroutefinance.co.uk - has some issues with moving elements. The problem seems to be with Widescreen monitors, as well as the Firefox browser. I'm not quite sure what the problem might be, does anyone have ANY idea? Feedback would be greatly appreciated! Cheers, Nick |