HartleySan Posted July 7, 2012 Share Posted July 7, 2012 I'm in the midst of writing the HTML for a fairly complex form. After researching the matter extensively, it seems like there are several popular ways to write the HTML forms. The following are the three main ones: 1) label elements for each input element 2) dl, dt and dd elements for for each input element 3) An HTML table for the entire form If possible, I want to use the label method, as it seems the most semantically correct, but I'm running into some issues with how to handle various things. For example, imagine the following simple form (note that the underscores represent text inputs and the circles represent radio buttons): First name: _______________ Last name: _______________ Gender: o Male o Female Here's where I'm stuck though. How do I attach label tags to the Male and Female radio buttons, but still make the form styleable with CSS? More specifically, the HTML for the form above might look like the following: <form> <label for ="fn">First name: <input type="text" id="fn"></label> <label for="ln">Last name: <input type="text" id="ln"></label> Gender: <input type="radio" id="male"><label for="male">Male</label> <input type="radio" id="female"><label for="female">Female</label> </form> The problem with this though is that I can't easily style the form in CSS without adding some additional (non-semantic) tags to the Gender label. Unfortunately, it's not semantically sound to attach one label tag to multiple inputs. As such the following would not be valid HTML: <label for="gender">Gender: <input type="radio" id="male"> <input type="radio" id="female"></label> So yeah, I'm at a loss about how to semantically write HTML for things like the Gender radio buttons above while still making the form easy to style without having to attach additional, non-semantic tags to the "Gender:" part, etc. If anyone can offer any advice, it'd be greatly appreciated. Thank you. Link to comment Share on other sites More sharing options...
Jaepee Posted July 7, 2012 Share Posted July 7, 2012 http://www.sitepoint.com/style-web-forms-css/ or http://www.smashingmagazine.com/2006/11/11/css-based-forms-modern-solutions/ are some pretty good links I hope those help... You could also style the radio buttons like <input type="radio" class="your_css_style" id="male"> <input type="radio" class="your_css_style" id="female"> CSS code: #your_css_style { your_nice_styling:here; } Well I'm not an expert however Larry's book on PHP has taught me a little HTML, CSS, and PHP. (Plus javascript, ajax, mysql, and a lot more so I'm just adding my two cents). Best wishes jp Link to comment Share on other sites More sharing options...
HartleySan Posted July 7, 2012 Author Share Posted July 7, 2012 Thanks for the links and advice, but unfortunately, that doesn't help. What I want is all the labels on the left side, and all the input/options on the right side. However, using semantically correct HTML, I don't see how it's possible to do this with radio buttons. It's very possible that it's not possible, at which point, I will have to compromise either by using semantically unsound HTML or by changing the appearance to something else. I hope it is possible, but either way, I find it annoying that there are no good devices in HTML for properly designing and styling forms the proper way. Edit: Maybe I'll compromise halfway by adding divs/spans where necessary. It annoys me that such a thing is required since it's not semantic, but perhaps this is one of those situations where I just have to give up on being so strict. Link to comment Share on other sites More sharing options...
margaux Posted July 7, 2012 Share Posted July 7, 2012 I'm pretty certain you will have to compromise and add some extra markup to style your radio buttons. Radio buttons and checkboxes are difficult form elements to style. It will help if you put the label tags before the input tags and you may want to use the name attribute so that they are part of the same group, otherwise both buttons could be checked. <label for="male">Male</label> <input type="radio" name="gender" id="male"> <label for="female">Female</label><input type="radio" name="gender" id="female"> 1 Link to comment Share on other sites More sharing options...
Edward Posted July 8, 2012 Share Posted July 8, 2012 use custom images or style generic divs which encapsulate input tags. Link to comment Share on other sites More sharing options...
HartleySan Posted July 9, 2012 Author Share Posted July 9, 2012 margaux, thank you for noting the use of the name attribute. I was fully intending to do that, but to keep the sample HTML as simple as possible, I didn't include it. Thanks. Also, yeah, just like you and Edward both noted, I think the use of some generic divs (or some other generic element) is the only way to get what I want. Why I acknowledge that this discussion is overly pedantic and I'm being rather extreme, from a very practical standpoint, it really annoys me that it's not possible to create flexible, practical and aesthetically-pleasing forms by using only semantically correct elements. Oh well, I suppose I should go crying somewhere else for now and just hope that the W3C someday proposes a new standard with the appropriate elements for forms. Link to comment Share on other sites More sharing options...
hallaplay835 Posted July 10, 2012 Share Posted July 10, 2012 HartleySan, you can always use CSS attribute selectors to target specific elements with certain attributes; this way there is no need to add unnecessary markup that will make it less semantic. So in your CSS file you would write: input[type="radio"] { /* CSS declarations.*/ } CSS attribute (and value) selectors are a neat way of achieving this. They have been around for lots of time now (CSS2), it is just that people do not use them much. They are supported by every major browser, including IE > 6. CSS3 advanced pseudo-selectors can offer better ways of targetting specific elements without adding unnecessary classes, IDs or extra markup, but be careful with those if you intend to support older browsers. Similar things can be achieved using JavaScript. Lastly, experiment and check out how your form could be styled. Also, in your earlier post, make sure to close correctly the <input> element in order to write correct XHTML, if you are so keen on writing perfect code that will validate. Tags like input or br that do not have a closing tag should be closed correctly like so: <input type="radio" name="gender" id="male" /> <br /> Link to comment Share on other sites More sharing options...
HartleySan Posted July 10, 2012 Author Share Posted July 10, 2012 I prefer HTML over XHTML, which is why I did not "properly close" the input element. Also, thanks for your advice with the attribute selectors. Unfortunately, it does not solve my problem. However, I have already given up on perfectly semantic HTML, and will just throw a couple of divs at the problem to solve it. Link to comment Share on other sites More sharing options...
Antonio Conte Posted July 11, 2012 Share Posted July 11, 2012 I do a those extra divs too. No need to think to much about a small thing like this. Focus at the more complex stuff. Link to comment Share on other sites More sharing options...
HartleySan Posted July 11, 2012 Author Share Posted July 11, 2012 Yeah, that's what I did, and it worked like a(n unsemantic) charm! Link to comment Share on other sites More sharing options...
Recommended Posts