DTP


 
Lively discussions on the graphic arts and publishing — in print or on the web


Go Back   Desktop Publishing Forum > General Discussions > Web Design

Reply
 
Thread Tools Display Modes
Old 03-17-2010, 01:43 AM   #1
john_b
Member
 
Join Date: May 2006
Location: Scottish Borders, UK
Posts: 208
Default 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
john_b is offline   Reply With Quote
Old 03-17-2010, 05:15 AM   #2
donmcc
Member
 
Join Date: Feb 2005
Location: Sarnia, Canada
Posts: 1,122
Default

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.
donmcc is offline   Reply With Quote
Old 03-17-2010, 09:53 AM   #3
john_b
Member
 
Join Date: May 2006
Location: Scottish Borders, UK
Posts: 208
Default

Quote:
Originally Posted by donmcc View Post
For best tutorials, look to http://www.w3schools.com
Thanks for that and funnily enough, it was just one of their examples that I looked at last. It doesn't use paragraph tags but does use <br /> to throw a new line and it was this that I just thought looked out of place.

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
john_b is offline   Reply With Quote
Old 03-17-2010, 12:08 PM   #4
Kelvyn
Staff
 
Kelvyn's Avatar
 
Join Date: Feb 2005
Location: In the Heart of the English Lake District
Posts: 1,381
Default

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

Kelvyn is offline   Reply With Quote
Old 03-17-2010, 11:37 PM   #5
john_b
Member
 
Join Date: May 2006
Location: Scottish Borders, UK
Posts: 208
Default

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
john_b is offline   Reply With Quote
Old 03-18-2010, 01:34 AM   #6
LoisWakeman
Staff
 
LoisWakeman's Avatar
 
Join Date: Jan 2005
Location: Uplyme, Devon, England
Posts: 1,402
Default

Well, semantically speaking it is a label for the form field - and there are tags for that too!
LoisWakeman is offline   Reply With Quote
Old 03-18-2010, 04:49 AM   #7
john_b
Member
 
Join Date: May 2006
Location: Scottish Borders, UK
Posts: 208
Default

Quote:
Originally Posted by LoisWakeman View Post
Well, semantically speaking it is a label for the form field - and there are tags for that too!
Well that certainly makes sense and I'm pleased to see that it does have some sort of 'status', if that's the right term.

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
john_b is offline   Reply With Quote
Old 03-18-2010, 08:47 AM   #8
LoisWakeman
Staff
 
LoisWakeman's Avatar
 
Join Date: Jan 2005
Location: Uplyme, Devon, England
Posts: 1,402
Default

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.
LoisWakeman is offline   Reply With Quote
Old 03-18-2010, 09:51 AM   #9
john_b
Member
 
Join Date: May 2006
Location: Scottish Borders, UK
Posts: 208
Default

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
john_b is offline   Reply With Quote
Old 03-18-2010, 01:41 PM   #10
ktinkel
Founding Sysop
 
ktinkel's Avatar
 
Join Date: Oct 2004
Location: In Connecticut, on the Housatonic River near its mouth at Long Island Sound.
Posts: 11,187
Default

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]
ktinkel is offline   Reply With Quote
Reply

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

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


All times are GMT -8. The time now is 09:20 PM.


Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2024, vBulletin Solutions, Inc.
Contents copyright 2004–2019 Desktop Publishing Forum and its members.