|
|
03-17-2010, 01:43 AM | #1 |
Member
Join Date: May 2006
Location: Scottish Borders, UK
Posts: 208
|
form elements and CSS
I'm about to start re-styling some forms to use CSS but, not for the first time, had to confront my own ignorance of something fairly fundamental. I've looked around a few tutorials but haven't really found the answer I'm looking for...
...soooo is it, or was it ever, the case that simple form elements - such as input text boxes and so on - can be enclosed within <p></p> tags? Indeed, should they be? Is it OK to use <br /> tags to throw them onto a new line? I've seen examples where <br /> tags were used without <p></p> tags but it just didn't seem 'right' to me that <br /> tags could exist outside of a paragraph... I'm braced for any and all flak...;-) John |
03-17-2010, 05:15 AM | #2 |
Member
Join Date: Feb 2005
Location: Sarnia, Canada
Posts: 1,122
|
For best tutorials, look to http://www.w3schools.com
For your question, you should have your form items inside of a paragraph, table, div or something similar. You can still use <br /> to separate the items, although if you don't want all the space of individual <p> tags, then css padding and margin parameters will allow you to change that. Some may say that it works without paragraphs, as you mention, but the fact that you use </p> tags makes me think that you want it correct, not just so it works in the browser you are viewing it in. |
03-17-2010, 09:53 AM | #3 | |
Member
Join Date: May 2006
Location: Scottish Borders, UK
Posts: 208
|
Quote:
I appreciate the point you make about vertical spacing if you use <p></p> tags and I think the default behaviour here does seem to depend on the browser. As you say, though, it's possible to define your preferred options. I guess there are - as always - a number of approaches but I just wondered if any consensus had emerged. You're also correct in that I do want to make sure that the code validates, so if I can get some ground rules established then it might prevent problems later...;-) John |
|
03-17-2010, 12:08 PM | #4 |
Staff
Join Date: Feb 2005
Location: In the Heart of the English Lake District
Posts: 1,381
|
These days I would not use paragraph tags within a form as the form elements are not paragraphs. So I use <div> for each element together with different css classes where needed.
For example on this page all spacing is via divs and css which meant I could get the layout the client required and still have valid xhtml. __________________ Kelvyn Web site design, hosting and marketing, Keswick in the UK Lake District If you are planning a visit to Keswick then try Keswick Tourist Information website |
03-17-2010, 11:37 PM | #5 |
Member
Join Date: May 2006
Location: Scottish Borders, UK
Posts: 208
|
So if you have a (simplified) element like
Your address: <input type="text" name="address" /> doesn't the text "Your address: " count as being a paragraph? I realise it can inherit properties from elsewhere but it does seem a bit lonely without any tags to keep it company...;-( So I was pleased to note that the equivalent parts of the form you pointed to were enclosed in <label></label> tags. I haven't come across these before so wonder what their function is? Might it be, for example, that there are accessibility issues and that these tags help screen readers inform the user what each part of the form is for? I'm afraid this is another area where I'll need to do some research. John |
03-18-2010, 01:34 AM | #6 |
Staff
Join Date: Jan 2005
Location: Uplyme, Devon, England
Posts: 1,402
|
Well, semantically speaking it is a label for the form field - and there are tags for that too!
__________________ Lois Wakeman http://lois.co.uk http://communicationarts.co.uk http://i4info.blog.co.uk |
03-18-2010, 04:49 AM | #7 | |
Member
Join Date: May 2006
Location: Scottish Borders, UK
Posts: 208
|
Quote:
Whether that is connected to any accessibility provision is perhaps another matter and something I'll need to look into... ...just a few extra hours each day might do it...;-) John |
|
03-18-2010, 08:47 AM | #8 |
Staff
Join Date: Jan 2005
Location: Uplyme, Devon, England
Posts: 1,402
|
May take a day or two - form elements are pretty complex and making them properly accessible can be quite a lot of work - it's one of the very few areas of HTML I don't know inside out, I am ashamed to say.
__________________ Lois Wakeman http://lois.co.uk http://communicationarts.co.uk http://i4info.blog.co.uk |
03-18-2010, 09:51 AM | #9 |
Member
Join Date: May 2006
Location: Scottish Borders, UK
Posts: 208
|
Perhaps it's one of those areas that you just have to get right if you're going to do it - a botched job is maybe worse than no job at all...;-(
John |
03-18-2010, 01:41 PM | #10 |
Founding Sysop
Join Date: Oct 2004
Location: In Connecticut, on the Housatonic River near its mouth at Long Island Sound.
Posts: 11,187
|
I get a little confused about CSS with forms too, but I usually can find a good example, and just copy it. That works for search boxes and other small forms — just don’t get too ambitious in the beginning!
__________________ [SIZE=2][COLOR=LemonChiffon]::[/COLOR][/SIZE] [SIGPIC][/SIGPIC] |
Thread Tools | |
Display Modes | |
|
|
Similar Threads | ||||
Thread | Thread Starter | Forum | Replies | Last Post |
Photoshop Elements 8 (Win and Mac) | Andrew B. | Press Releases & Announcements | 1 | 03-14-2010 10:56 AM |
Spam on Form | Richard Waller | The Corner Pub | 1 | 01-01-2009 09:10 AM |
Form Processor | Cleo8 | Web Site Building & Maintenance | 2 | 02-14-2007 02:55 AM |
Info from form to database | Bo Aakerstrom | Web Site Building & Maintenance | 10 | 05-09-2006 10:10 AM |
Web Site Form Spamming | Tim Lodge | Web Site Building & Maintenance | 8 | 10-22-2005 08:21 AM |