Wed, 2009-10-21 12:18
Hi All,
I have created a web form with the use of tables. I would now like to convert this into a tableless design, however I can't find anything on the web with *perfect* markup. What I mean by that is, in all the blogs/tutorials, there is always a someone with a response/comment to say this is not valid, or you should have done it this way etc etc....
I know forms a bit of a nightmare, but does anyone know a really simple a good tutorial that has valid markup and is easy to maintain and understand.
If I can't crack it myself, anyone send me a cost rate to produce a form with two columns, labels aligned with valid code......can show you ascreenshot of what I am trying to achieve.
Cheers
Jalz
Wed, 2009-10-21 16:54
#1
http://woork.blogspot.com/200
Wed, 2009-10-21 17:58
#2
I always do it this
I always do it this way:
<form> <fieldset> <p> <label>Field_1</label> <input type="text" name="field1" id="field_1" /> </p> <p> <label>Field_2</label> <input type="text" name="field2" id="field_2" /> </p> <p> <and so on for rest of fields> </p> </fieldset> </form>
I then give my form a width, have the labels floating left with a width and text align left or right, and you can also give the inputs a width to if you like, if you set the labels to align right you will need to give them a right margin.
form.main { width:550px } form.main fieldset { border:0 } label.main { width:150px; float:left; text-align:left; margin-right:20px; color:#4C4C4C; font-weight:bold; font-family:garamond,tahoma,verdana,sans; font-size:1.2em }
You can see it in action at www.write-about-property.com/seo-services/
Wed, 2009-10-21 21:20
#3
@ljbailey
Your label should have the for="" attribute in them, as reference to which input they are labeling.
Wed, 2009-10-21 21:42
#4
Thanks to all
Thanks to all that have responded,
Could use either code, is it fairly easy to align checkboxes and radiobuttons so they all look neat....
Deuce, why does the ljbailey's code need a "for" in the label attribute? Is it for accessibilty?
I suppose making a two column form is basically creating two divs a left-col {floating left} and a right-col {floating right}, and then placing the markup of the code above in each div..... does that sound sensible?
Cheers again
Jalz
Wed, 2009-10-21 22:33
#5
jalz wrote: Deuce, why does
Deuce, why does the ljbailey's code need a "for" in the label attribute? Is it for accessibilty
Accessibility and standards.
Same reason a <span> tag is relatively useless without a class.
You can use it and it does what you want, but it has no real purpose or definition.
I mean, think of organizing your basement in a bunch of waterproof tubs. Are you going to pull out your label maker and just print out 20 blank labels and stick them on everything or are you actually going to write something on the label so you know what's in that box?
Wed, 2009-10-21 23:40
#6
ljbailey wrote: I always do
I always do it this way:
<form> <fieldset> <p> <label>Field_1</label> <input type="text" name="field1" id="field_1" /> </p> <p> <label>Field_2</label> <input type="text" name="field2" id="field_2" /> </p> <p> <and so on for rest of fields> </p> </fieldset> </form>
What is the point of the paragraph tags? Those aren't paragraphs.
Thu, 2009-10-22 23:35
#7
delete this. double post
double tap. please delete. 
Thu, 2009-10-22 21:50
#8
Hi Guys, I've been using the
Hi Guys,
I've been using the example kindly given by Deuce to kind of start developing a form that I would like to eventually use in one of my apps. I've checked the code and it seems valid (transitional-strict produces a lot of errors). Is this this the correct way to progress?
Would really appreciate advice before I get "really" deep into adding aload of fields.
Thanks
Jalz
<!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=UTF-8" /> <title>Untitled Document</title> <style type="text/css"> body{ font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif; font-size:12px; } p, h1, form, button{border:0; margin:0; padding:0;} .spacer{clear:both; height:1px;} /* ----------- My Form ----------- */ .myform{ margin:0 auto; width:1000px; padding:14px; } /* ----------- stylized ----------- */ #left-col{ width:400px; float:left; } #right-col{ width:400px; float:left; } #stylized{ border:solid 2px #b7ddf2; background:#ebf4fb; } #stylized h1 { font-size:14px; font-weight:bold; margin-bottom:8px; } #stylized p{ font-size:11px; color:#666666; margin-bottom:20px; border-bottom:solid 1px #b7ddf2; padding-bottom:10px; } #stylized label{ display:block; font-weight:bold; text-align:right; width:140px; float:left; } #stylized .small{ color:#666666; display:block; font-size:11px; font-weight:normal; text-align:right; width:140px; } #stylized input{ float:left; font-size:12px; padding:4px 2px; border:solid 1px #aacfe4; width:200px; margin:2px 0 20px 10px; } #stylized button{ clear:both; margin-left:150px; width:125px; height:31px; background:#666666 url(img/button.png) no-repeat; text-align:center; line-height:31px; color:#FFFFFF; font-size:11px; font-weight:bold; } </style> </head> <body> <div id="stylized" class="myform"> <form id="form1" name="form1" method="post" action=""> <div id="left-col"> <h1>My Test Form</h1> <label>Name <span class="small">Add your name</span> </label> <input type="text" name="textfield" id="textfield" /> <label>Email <span class="small">Add a valid address</span> </label> <input type="text" name="textfield" id="textfield" /> <label>Password <span class="small">Min. size 6 chars</span> </label> <input type="text" name="textfield" id="textfield" /> <p> <label>On</label> <input type="radio" name="RadioGroup1" value="On" id="RadioGroup1_0" /> <label>Off</label> <input type="radio" name="RadioGroup1" value="Off" id="RadioGroup1_1" /> <br /> </p> <div class="spacer"></div> </div> <div id="right-col"> <br/><br/><br/><br/><br/> <label>Address</label> <input type="text" name="textfield" id="textfield" /> <label> </label> <input type="text" name="textfield" id="textfield" /> <label>Town/City</label> <input type="text" name="textfield" id="textfield" /> <label>Postcode</label> <input type="text" name="textfield" id="textfield" /> <div class="spacer"></div> </div> <button type="submit">Sign-up</button> </form> </div> </body> </html>
Thu, 2009-10-22 23:19
#9
Unless you're going to use
Unless you're going to use the label tags implicitly then you've got to include a "for" attribute.
Implicit label example:
<label>Ape Juice: <input id="apeJuice" type="text" /></label>
Explicit label example:
<label for="apeJuice">Ape Juice:</label><input id="apeJuice" type="text" />
You can also employ both:
<label for="apeJuice">Ape Juice: <input id="apeJuice" type="text" /></label>
I'd also dump the spacer div. There's no reason for that, especially when it's inside of another div.
I'm still wondering the point of the paragraph tags. Is that in any way semantic or am I picking nits?
Fri, 2009-10-23 05:24
#10
People essentially seem to
People essentially seem to fall into two camps, those that would advocate using a div for grouping and those that use a 'p' element. I know two respected members on the forum who respectively use divs and paragraphs.
Personally I prefer the approach to using an element that conveys no meaning since I'm simply using it for visual styling convenience; outside of that context the element has no real reason for existence and I prefer that I convey as little meaning in it's use as possible.
Fri, 2009-10-23 12:09
#11
Hugo wrote: People
People essentially seem to fall into two camps, those that would advocate using a div for grouping and those that use a 'p' element. I know two respected members on the forum who respectively use divs and paragraphs.
Personally I prefer the approach to using an element that conveys no meaning since I'm simply using it for visual styling convenience; outside of that context the element has no real reason for existence and I prefer that I convey as little meaning in it's use as possible.
I see. In my case I prefer to use fieldset for grouping items such as a radio button or check box list. Implicit use of the label tag also negates the need to wrap the individual items in anything else.
Admittedly, I may have never run into a situation where wrapping the items becomes necessary. I'd have to see some examples, I suppose.
Fri, 2009-10-23 12:15
#12
No a fieldset would be used
No a fieldset would be used regardless but you wouldn't use a fieldset to wrap two elements such as label/input pairs that would be bad use of the fieldset, it's to group sections of controls or of the form, to logically group areas.
The wrapping had nothing to do with linking controls; 'for' has an entirely different reason for existence. The wrapping being talked about here is simply to ease positioning of the pairs.
Fri, 2009-10-23 13:22
#13
Thanks Guys, You guys are
Thanks Guys,
You guys are awesome, think I almost have a form I can use now. As Verschwindende added the "for" attribute in the label so its more standards based. An issue I'm hoping someone can guide help me with is the radio buttons. Is it possible to get the radio buttons to be displayed horizontally on one line neatly (as I have two divs, left-col and right-col) I would want them to flow only in the left-col and wrap around if I had more options. I've also been reading I should be using tag to group things, so presumably the radio buttons need this around them (u'll notice the labels then dont align nicely)?
Really appreciate your help, hopefully I can truely move away from tables when it comes to forms.
Jalz
<!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=UTF-8" /> <title>Untitled Document</title> <style type="text/css"> body{ font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif; font-size:12px; } p, h1, form, button{border:0; margin:0; padding:0;} /* ----------- My Form ----------- */ .myform{ margin:0 auto; width:1000px; padding:14px; } /* ----------- stylized ----------- */ #top{ height:30px; width:100%; } #left-col{ width:400px; float:left; } #right-col{ width:400px; float:left; } #stylized{ border:solid 2px #b7ddf2; background:#ebf4fb; } #stylized h1 { font-size:14px; font-weight:bold; margin-bottom:8px; } #stylized p{ font-size:11px; color:#666666; margin-bottom:20px; border-bottom:solid 1px #b7ddf2; padding-bottom:10px; } #stylized label{ display:block; font-weight:bold; text-align:right; width:140px; float:left; } #stylized2 label{ display:block; font-weight:bold; text-align:right; width:40px; float:left; } #stylized .small{ color:#666666; display:block; font-size:11px; font-weight:normal; text-align:right; width:140px; } #stylized input{ float:left; font-size:12px; padding:4px 2px; border:solid 1px #aacfe4; width:200px; margin:2px 0 20px 10px; } #stylized button{ clear:both; margin-left:150px; width:125px; height:31px; background:#666666 url(img/button.png) no-repeat; text-align:center; line-height:31px; color:#FFFFFF; font-size:11px; font-weight:bold; } fieldset { padding:0; float:left; } </style> </head> <body> <div id="stylized" class="myform"> <form id="form1" name="form1" method="post" action=""> <div id="top"> <h1>My Test Form</h1> </div> <div id="left-col"> <label for="Name">Name <span class="small">Add your name</span> </label> <input type="text" name="textfield" id="textfield" /> <label for="Email">Email <span class="small">Add a valid address</span> </label> <input type="text" name="textfield" id="textfield" /> <label for="Password">Password <span class="small">Min. size 6 chars</span> </label> <input type="text" name="textfield" id="textfield" /> <fieldset> <label for="Badge" class="stylized2">Red</label> <input type="radio" name="RadioGroup1" value="red" id="RadioGroup1_0" /> <label for="Badge">Yellow</label> <input type="radio" name="RadioGroup1" value="yellow" id="RadioGroup1_1" /> <label for="Badge">Green</label> <input type="radio" name="RadioGroup1" value="green" id="RadioGroup1_2" /> <label for="Badge">Blue</label> <input type="radio" name="RadioGroup1" value="blue" id="RadioGroup1_3" /> </fieldset> </div> <div id="right-col"> <label for="Address_Line_1">Address</label> <input type="text" name="textfield" id="textfield" /> <label for="Address_Line_2"> </label> <input type="text" name="textfield" id="textfield" /> <label for="Town_or_City">Town/City</label> <input type="text" name="textfield" id="textfield" /> <label for="Postcode">Postcode</label> <input type="text" name="textfield" id="textfield" /> </div> <button type="submit">Sign-up</button> </form> </div> </body> </html>
Fri, 2009-10-23 13:53
#14
Hugo wrote:No a fieldset
No a fieldset would be used regardless but you wouldn't use a fieldset to wrap two elements such as label/input pairs that would be bad use of the fieldset, it's to group sections of controls or of the form, to logically group areas.
That's not what I meant to imply. In the example provided (edit before the last one above) there are two radio buttons wrapped in a paragraph. That makes more sense in a fieldset to me. For example instead of this:
<p> <label>On</label> <input type="radio" name="RadioGroup1" value="On" id="RadioGroup1_0" /> <label>Off</label> <input type="radio" name="RadioGroup1" value="Off" id="RadioGroup1_1" /> <br /> </p>
Use this:
<fieldset> <label> <input type="radio" name="RadioGroup1" value="On" id="RadioGroup1_0" />On</label> <label> <input type="radio" name="RadioGroup1" value="Off" id="RadioGroup1_1" />Off</label> </fieldset>
The wrapping had nothing to do with linking controls; 'for' has an entirely different reason for existence. The wrapping being talked about here is simply to ease positioning of the pairs.
I see. As you said before DIV makes more sense than P. Am I being too much of a stickler?
Fri, 2009-10-23 14:11
#15
I didn't test it in anything
I didn't test it in anything other than Firefox and I didn't fix the validation errors (the for attribute value must match the ID of an input which has the nice effect of selecting the input by clicking the label text) but it may spark an idea:
<!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=UTF-8" /> <title>Untitled Document</title> <style type="text/css"> body{ font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif; font-size:12px; } p, h1, form, button{border:0; margin:0; padding:0;} /* ----------- My Form ----------- */ .myform{ margin:0 auto; width:1000px; padding:14px; } /* ----------- stylized ----------- */ #top{ height:30px; width:100%; } #left-col{ width:400px; float:left; } #right-col{ width:400px; float:left; } #stylized{ border:solid 2px #b7ddf2; background:#ebf4fb; overflow: hidden; } #stylized h1 { font-size:14px; font-weight:bold; margin-bottom:8px; } #stylized p{ font-size:11px; color:#666666; margin-bottom:20px; border-bottom:solid 1px #b7ddf2; padding-bottom:10px; } #stylized label{ display:block; font-weight:bold; text-align:right; width:140px; float:left; } #stylized2 label{ display:block; font-weight:bold; text-align:right; width:40px; float:left; } #stylized .small{ color:#666666; display:block; font-size:11px; font-weight:normal; text-align:right; width:140px; } #stylized input{ float:left; font-size:12px; padding:4px 2px; border:solid 1px #aacfe4; width:200px; margin:2px 0 20px 10px; } #stylized button{ clear:both; margin-left:150px; width:125px; height:31px; background:#666666 url(img/button.png) no-repeat; text-align:center; line-height:31px; color:#FFFFFF; font-size:11px; font-weight:bold; } fieldset { padding:0; float:left; } #stylized .radioList input { width: 1em; margin-right: .7em; } #stylized .radioList label { float: left; display: block; text-align: left; } </style> </head> <body> <div id="stylized" class="myform"> <form id="form1" name="form1" method="post" action=""> <div id="top"> <h1>My Test Form</h1> </div> <div id="left-col"> <label for="Name">Name <span class="small">Add your name</span> </label> <input type="text" name="textfield" id="textfield" /> <label for="Email">Email <span class="small">Add a valid address</span> </label> <input type="text" name="textfield" id="textfield" /> <label for="Password">Password <span class="small">Min. size 6 chars</span> </label> <input type="text" name="textfield" id="textfield" /> <fieldset class="radioList"> <label for="Badge" class="stylized2"> <input type="radio" name="RadioGroup1" value="red" id="RadioGroup1_0" />Red</label> <label for="Badge"> <input type="radio" name="RadioGroup1" value="yellow" id="RadioGroup1_1" />Yellow</label> <label for="Badge"> <input type="radio" name="RadioGroup1" value="green" id="RadioGroup1_2" />Green</label> <label for="Badge"> <input type="radio" name="RadioGroup1" value="blue" id="RadioGroup1_3" />Blue</label> </fieldset> </div> <div id="right-col"> <label for="Address_Line_1">Address</label> <input type="text" name="textfield" id="textfield" /> <label for="Address_Line_2"> </label> <input type="text" name="textfield" id="textfield" /> <label for="Town_or_City">Town/City</label> <input type="text" name="textfield" id="textfield" /> <label for="Postcode">Postcode</label> <input type="text" name="textfield" id="textfield" /> </div> <button type="submit">Sign-up</button> </form> </div> </body> </html>
Fri, 2009-10-23 14:50
#16
Thank you!! Looking really
Thank you!! 
Looking really good (well to me anyway), still messing around with it, making sure padding on the radio buttons is right etc. Next object is to ad a combo list, but if I wanted to see/test how/what screen readers interpreted my form, see the sequence of the fields etc - whats the best method to do this. Been further supplimenting my reading on the subject, it looks like I should use the tag if I want to put headings into sections.
Jalz
Fri, 2009-10-23 15:10
#17
The legend tags work with the
The legend tags work with the fieldsets and make a nice looking and easily styled heading for them.
You can also nest fieldsets like this: http://majorcontractors.com/apply.aspx
Sat, 2009-10-24 00:09
#18
Hi All, Nearly finished. I
Hi All,
Nearly finished. I have two final questions which I'm hoping you kind folks can shed some light on. Hopefully this thread will help another newbie to do a two column form as I've used al the elements for a form and the css is understandable.
First question is, I would like my checkboxes to flow horizontally in a similar way the radio buttons flow. I thought I could use the same CSS as the radio buttons, which does work in FireFox 3.5.3, however when I look at the form in Safari 4.0.3 on a Mac, the checkboxes seem to floating left against right-col div. I can't seem to get it to display the same in both browsers. It would also be nice to get the first checkbox input Steve to line up with with the notes input field above.
Secondly, cleaned my code and now it passes the w3 validator test with one warning. The problem is I don't know what the error or warning is, previous warnings actually said what line there was a problem on, but this jhas nothing in which I can identify a problem.
All it says more or less is the following
Using Direct Input mode: UTF-8 character encoding assumed
Unlike the “by URI” and “by File Upload” modes, the “Direct Input” mode of the validator provides validated content in the form of characters pasted or typed in the validator's form field. This will automatically make the data UTF-8, and therefore the validator does not need to determine the character encoding of your document, and will ignore any charset information specified.
If you notice a discrepancy in detected character encoding between the the “Direct Input” mode and other validator modes, this is likely to be the reason. It is neither a bug in the validator, nor in your document.
This is the final code Im posting to anyone else that maybe thinking of creating a tableless form. There maybe better ways then this to do this, but as a starting point its not too bad,
<!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=UTF-8" /> <title>Untitled Document</title> <style type="text/css"> body{ font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif; font-size:12px; } .spacer{clear:both; height:1px;} p, h1, form, button{border:0; margin:0; padding:0;} /* ----------- My Form ----------- */ .myform{ margin:0 auto; width:1000px; padding:14px; } /* ----------- stylized ----------- */ #top{ height:30px; width:100%; } #left-col{ width:400px; float:left; } #right-col{ width:400px; float:left; } #stylized{ border:solid 2px #b7ddf2; background:#ebf4fb; overflow: hidden; } #stylized h1 { font-size:14px; font-weight:bold; margin-bottom:8px; } #stylized p{ font-size:11px; color:#666666; margin-bottom:20px; border-bottom:solid 1px #b7ddf2; padding-bottom:10px; } #stylized label{ display:block; font-weight:bold; text-align:right; width:140px; float:left; } #stylized .small{ color:#666666; display:block; font-size:11px; font-weight:normal; text-align:right; width:140px; } #stylized input, select, textarea{ float:left; font-size:12px; padding:4px 2px; border:solid 1px #aacfe4; width:200px; margin:2px 0 20px 10px; } #stylized .short input{ float:left; font-size:12px; padding:4px 2px; border:solid 1px #aacfe4; width:100px; margin:2px 0 20px 10px; } #stylized button{ clear:both; margin-left:150px; width:125px; height:31px; background:#666666 url(img/button.png) no-repeat; text-align:center; line-height:31px; color:#FFFFFF; font-size:11px; font-weight:bold; } fieldset { float:left; border:0px; } #stylized .radioList input { width: 1em; margin-right: .8em; } #stylized .radioList label { float: left; display: block; text-align: left; padding-left: 50px; width:80px; } #stylized .checkBox1 input { width: 1em; margin-right: .8em; } #stylized .checkBox1 label { display:block; font-weight:bold; text-align:right; width:140px; float:left; } </style> </head> <body> <div id="stylized" class="myform"> <form id="form1" name="form1" method="post" action=""> <div id="top"> <h1>My Test Form</h1> </div> <div id="left-col"> <label for="full_name">Name <span class="small">Add your name</span> </label> <input type="text" name="full_name" id="full_name" /> <label for="email">Email <span class="small">Add a valid address</span> </label> <input type="text" name="email" id="email" /> <label for="password">Password <span class="small">Min. size 6 chars</span> </label> <input type="text" name="password" id="password" /> <fieldset class="radioList"> <label for="RadioGroup1_0"> <input type="radio" name="RadioGroup1_0" value="red" id="RadioGroup1_0" />Red</label> <label for="RadioGroup1_1"> <input type="radio" name="RadioGroup1_0" value="yellow" id="RadioGroup1_1" />Yellow</label> <label for="RadioGroup1_2"> <input type="radio" name="RadioGroup1_0" value="green" id="RadioGroup1_2" />Green</label> <label for="RadioGroup1_3"> <input type="radio" name="RadioGroup1_0" value="blue" id="RadioGroup1_3" />Blue</label> </fieldset> <label for="OpSystem">Choose OS</label> <select name="OpSystem" id="OpSystem"> <option value="Mac">Apple Mac OS X</option> <option value="Vista">Microsoft Vista</option> <option value="Windows7">Microsoft Windows 7</option> </select> </div> <div id="right-col"> <label for="Address_Line_1">Address</label> <input type="text" name="Address_Line_1" id="Address_Line_1" /> <label for="Address_Line_2"> </label> <input type="text" name="Address_Line_2" id="Address_Line_2" /> <label for="Town_or_City">Town/City</label> <input type="text" name="Town_or_City" id="Town_or_City" /> <label for="Postcode">Postcode</label> <span class="short"> <input type="text" name="Postcode" id="Postcode" /> </span> <div class="spacer"></div> <fieldset class="checkBox1"> <label for="People1">Steve</label> <input name="People1" type="checkbox" value="Steve" id="People1" /> <label for="People2">Larry</label> <input name="People2" type="checkbox" value="Larry" id="People2" /> <label for="People3">Bill</label> <input name="People3" type="checkbox" value="Bill" id="People3" /> </fieldset> <label for="notes">Notes</label> <textarea name="notes" cols="15" rows="10" id="notes"></textarea> <div class="spacer"></div> </div> <button type="submit">Sign-up</button> </form> </div> </body> </html>