SitePoint Sponsor |
|
User Tag List
Results 1 to 25 of 42
Thread: form layouts for purists
-
Nov 2, 2004, 10:50 #1
- Join Date
- Jan 2004
- Location
- Chester, UK
- Posts
- 214
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
form layouts for purists
I'm looking into updating a few web forms, but have come unstuck on the layout. Normally, tables would be the answer, but that doesn't really work with the old semantic accuracy business.
I can use CSS to style the form elements, which looks ok, but can find no way of producing a structure where all of the input boxes etc line up nicely.
Anyone managed to get over this problem in the past? Examples or links to resources would be tip top.Hello, hello, what's all this shouting?
We'll have no trouble here
(Helping a pal... http://www.funkdub.info)
-
Nov 2, 2004, 10:51 #2
http://alistapart.com/articles/practicalcss/
But a table isn't so bad for forms, especially when they get really complex.
-
Nov 3, 2004, 08:58 #3
- Join Date
- Jan 2004
- Location
- Chester, UK
- Posts
- 214
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Good link that. It's a start.
Trouble is, I don't think the code they use for the form is particularly accurate. They don't label the input boxes as you should...
<label for="forename">Forename/label>
<input name="forename" type="text" id="forename" value="" size="20">
I've made the row and cell table style layouts like that with css in the past, but this doesn't seem to work because, in the case of forms, the labels are connected to the input boxes making the position of those boxes dependant on the label length.
Does that make sense?Hello, hello, what's all this shouting?
We'll have no trouble here
(Helping a pal... http://www.funkdub.info)
-
Nov 3, 2004, 09:22 #4
Originally Posted by bradley317
Originally Posted by bradley317
Code:div.row { clear: both; padding-top: 10px; } div.row label { float: left; width: 100px; text-align: right; display: block; } div.row span.formw { float: right; width: 335px; text-align: left; display: block; }
HTML Code:<form> <div class="row"> <label for="firstname">First Name:</label> <span class="formw"> <input type="text" name="firstname" id="firstname" /> </span> </div> </form>
-
Nov 3, 2004, 09:30 #5
- Join Date
- Jul 2003
- Location
- Springfield, MO
- Posts
- 1,867
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I would agree with Vinnie. I did a similar exercise and found myself thinking this is not practical. But every solution calls for something.
-
Nov 3, 2004, 09:37 #6
Originally Posted by rbutler
.
-
Nov 3, 2004, 10:32 #7
- Join Date
- Jan 2004
- Location
- Chester, UK
- Posts
- 214
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Nice one. I think I'm getting this now. I've worked out a way of producing a more complex layout, similar to the one vinnie highlighted...
Code:CSS... .row{ clear:both; width: 100%; } .cellx{ float: left; } HTML... <div class="row"> <div class="cellx"> <label for="forename">Forename:</label> <br /> <input blah blah blah /> </div> <div class="cellx"> <label for="surname">Surname:</label> <br /> <input blah blah blah /> </div> </div> <div class="row"> <label for="address1">Address 1:</label> <br /> <input blah blah blah /> </div>
By not specifying a width on the 'cellx' class, you can use as many of them as you like in each row (within reason) and then match everything up with the input box sizes.
I think this is fairly robust, and will take about the same amount of code as a table based version. What's more, semantically, it's clean as a whistle.Hello, hello, what's all this shouting?
We'll have no trouble here
(Helping a pal... http://www.funkdub.info)
-
Nov 3, 2004, 10:55 #8
Originally Posted by bradley317
.
Originally Posted by bradley317
-
Nov 3, 2004, 11:09 #9
- Join Date
- Jan 2004
- Location
- Chester, UK
- Posts
- 214
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally Posted by vgarcia
Hello, hello, what's all this shouting?
We'll have no trouble here
(Helping a pal... http://www.funkdub.info)
-
Nov 3, 2004, 11:23 #10
- Join Date
- Jul 2003
- Location
- Springfield, MO
- Posts
- 1,867
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I'm pretty sure w/out declaring widths on floats you get 100% width, which maybe isn't what you want.
I still say for a simple contact form or any form for that matter, table is still practical, but maybe I just like to disagree with Vinnie
-
Nov 3, 2004, 11:27 #11
- Join Date
- Oct 2004
- Location
- downtown
- Posts
- 145
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
You don't want to go there, trust me
By default (IMHO) you should declare margin, padding and a width for each DIV you have just to keep things ticking over nicely
-
Nov 3, 2004, 11:39 #12
Originally Posted by rbutler
-
Nov 3, 2004, 22:14 #13
- Join Date
- Sep 2003
- Location
- Perth, Western Australia
- Posts
- 44
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
As we've seen, CSS based table-like layout is pretty darn easy really. So I personally think it is best to stick to CSS layout for your forms.
All it takes is a little fiddling and a few minutes of tweaking, and you will still be able to call yourself a semantics guru
-
Nov 4, 2004, 02:38 #14
- Join Date
- Apr 2003
- Location
- sowth afreeka
- Posts
- 374
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
As we've seen, CSS based table-like layout is pretty darn easy really. So I personally think it is best to stick to CSS layout for your forms.
same thing goes for spitting out rows of results underneath eachother,would you then also use a bunch of divs, or try creating a small calendar with divs?
Use a table where but only where it is nessesarry, if tables werent meant to be, they would have been discontinued.My postings are a natural product.
The slight variations in spelling and grammar enhance its
individual character and beauty and in no way are to be
considered flaws or defects - http://www.guinnesspig.net
-
Nov 4, 2004, 03:27 #15
- Join Date
- Feb 2004
- Location
- Scottsdale, Arizona
- Posts
- 909
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I think forms are tabular enough to use tables, and they also provide a bit more sematic meaning than a big mess of wrapper <div>s all over the place.
-
Nov 4, 2004, 04:43 #16
- Join Date
- Jan 2004
- Location
- Chester, UK
- Posts
- 214
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Deja vu? Change the word 'form' for the word 'website' in some of those comments and we've gone back to the same old debate of tables vs css and when it's appropriate to use each approach.
If you're going to create semantically accurate pages, then surely you should go for it 100%. A form does not contain tablular data. Simple as that. There are plenty of examples where the use of tables make things more straightforward, but that's how we got into this mess in the first place.
Anyway... I thought not giving a div a width attribute makes it shrink to the width of the largest element within it. Is this not the case? Looks like I'm heading for another afternoons testing in obsolete browsers. Maybe tables is the way forward after all...Hello, hello, what's all this shouting?
We'll have no trouble here
(Helping a pal... http://www.funkdub.info)
-
Nov 4, 2004, 05:49 #17
- Join Date
- Oct 2004
- Location
- The Netherlands
- Posts
- 8
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally Posted by bradley317
On the other hand, most forms are not that complex to get the old table-in-table-in-table-etc. issue again.
I'm rooting for CSS, but if it can be done easier in a SIMPLE, preferrably non-nested table I have no objections...
-
Nov 4, 2004, 07:14 #18
Originally Posted by bradley317
Originally Posted by bradley317
HTML Code:<table summary="my stats"> <caption>My stats</caption> <col width="200" /> <col width="200" /> <tbody> <tr> <td scope="row">First Name:</td> <td>Vinnie</td> </tr> <tr> <td scope="row">Height:</td> <td>5 feet 10 inches</td> </tr> </tbody> </table>
HTML Code:<table summary="stats"> <caption>My stats</caption> <col width="200" /> <col width="200" /> <tbody> <tr> <td scope="row"><label for="fn">First Name:</label></td> <td><input type="text" name="fn" id="fn" /></td> </tr> <tr> <td scope="row"><label for="height">Height:</label></td> <td><input type="text" name="height" id="height" /></td> </tr> </tbody> </table>
Originally Posted by bradley317
-
Nov 4, 2004, 09:46 #19
- Join Date
- Jan 2004
- Location
- Chester, UK
- Posts
- 214
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
In that example, there is no differance. But that's a pretty simple and could be styled with CSS alone.
Back to your original point, when the layout becomes more complicated, tables could be the way to go. I'm not sure I agree, because you'd struggle to get the clarity of markup similar to what you have above. For tables to work, as I understand them, the data within the table must relate to either the end column, or the top row. Which it does in your example, but with a few more columns that goes belly up...
Code:<table summary="stats"> <caption> My stats </caption> <col width="200" /> <col width="200" /> <tbody> <tr> <td scope="row"><label for="fn">First Name:</label></td> <td><input type="text" name="fn" id="fn" /></td> <td><label for="sn">Surname:</label></td> <td><input type="text" name="sn" id="sn" /></td> </tr> <tr> <td scope="row"><label for="height">Height:</label></td> <td><input type="text" name="height" id="height" /></td> <td><label for="height">Age:</label></td> <td><input type="text" name="age" id="age" /></td> </tr> </tbody> </table>
This is my initial problem in a nutshell. Tables aren't the answer (it seems), and css is too damn complicated. Whatever shall i do?Hello, hello, what's all this shouting?
We'll have no trouble here
(Helping a pal... http://www.funkdub.info)
-
Nov 4, 2004, 09:48 #20
Originally Posted by bradley317
I know, it won't be in browser form for a very long time, but that's the direction the W3C wants everyone to head into...
-
Nov 4, 2004, 10:53 #21
- Join Date
- Sep 2003
- Location
- Perth, Western Australia
- Posts
- 44
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I'm still not convinced. If you can't lay out your 'complex' forms with CSS, then you're obviously not trying hard enough.
Have to wonder if using lots of spans is semantically correct though. Gotta give somewhere, I guess.
-
Nov 4, 2004, 12:37 #22
Originally Posted by Bryce
-
Nov 4, 2004, 15:56 #23
- Join Date
- Oct 2004
- Location
- Scotland
- Posts
- 21
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
devil's advocate..
What's smarter and what's harder?
HTML:
<fieldset>
<legend>My Stats</legend>
<label for="fn">First Name: <input type="text" name="fn" id="fn" /></label>
<label for="sn">Surname: <input type="text" name="sn" id="sn" /></label>
<label for="height">Height: <input type="text" name="height" id="height" /></label>
<label for="age">Age: <input type="text" name="age" id="age" /></label>
</fieldset>
This could be CSS'ed to look exactly like a table alignment and it's usability/flow is intact. I still think it's tools for the job so if it's a complicated form then this may not suit but the seeds (id's) are there..
-
Nov 4, 2004, 18:15 #24
- Join Date
- Mar 2003
- Location
- Bristol, England
- Posts
- 332
- Mentioned
- 1 Post(s)
- Tagged
- 0 Thread(s)
Originally Posted by vgarcia
See Rachel's Style Web Forms With CSS article for more on forms and CSS
-
Nov 4, 2004, 20:41 #25
- Join Date
- Oct 2004
- Location
- Ontario Canada
- Posts
- 235
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I don't see the whole thing with avoiding use of tables, it seems to be a movement in the web design industry. But I find nothing wrong with tables, and they're much easier to work with.
So I would simply stick with tables. Using css classes for tables and the forms you can do wonders.
Bookmarks