/    Sign up×
Community /Pin to ProfileBookmark

lay out an html ORDER FORM without tables…

Y’all are probably tired of seeing my name…

I’m trying to lay out an order form. Every form I’ve looked at that is similar to what I want to do uses tables for the layout.

Can it be done reasonably easy using CSS? or is a 2 column table the answer?

John

to post a comment
CSS

11 Comments(s)

Copy linkTweet thisAlerts:
@toicontienFeb 25.2004 — Yup. For a quick example, visit http://mjw.cmich.edu/contact.php

The following page will be up temporarily for the next couple months: http://www.cm-life.com/pages/newdesign/calendarAddEvent.html

It's an example of a more complex form that contains just about every kind of form element.
Copy linkTweet thisAlerts:
@jasnjohnFeb 25.2004 — A few months back I completely converted my site from tables to CSS layout, however, the only use I have for tables these days is still the FORM.

It's a very easy way of laying out the boxes and the associated labels.

I don't think it's necessarily a bad thing to use tables for the presentation of data/forms anyway, it's when you use them to layout your entire page that's frowned upon.

I'm still relatively new to this too, so my word is not gospel.

I'll go away and think about a CSS method anyway.


PS, It seems I've no need now as GREG has come up with a solution.

Well done!
Copy linkTweet thisAlerts:
@BigjohnauthorFeb 25.2004 — thanks.

I think, since I don't give a damn if google can search my form, I'll just stick to a quick and easy table based layout.

It will make my life MUCH easier.

John
Copy linkTweet thisAlerts:
@TimeBanditFeb 25.2004 — I'd go for a table but maybe someday it'll be easy and quick to do CSS. Or maybe someday make it a project for yourself to figure it out for future use (i'm talking to myself here also!) ?

Here's a link on using TH in your table and how it helps disabled folks use your table more easily:

[URL=http://www.doghousestudio.com.au/ozwebweaver/tables2.html]http://www.doghousestudio.com.au/ozwebweaver/tables2.html[/URL]

Here's a link to LABEL tag and how that helps associate elements in a form for disabled folks:

[URL=http://www.w3schools.com/html/attr_label.asp]http://www.w3schools.com/html/attr_label.asp[/URL]
Copy linkTweet thisAlerts:
@Robert_WellockFeb 25.2004 — I am one of the "disabled folks" generally it is preferable to say you are making your form more "accessible" to a wider audience.
Copy linkTweet thisAlerts:
@Paul_JrFeb 25.2004 — I figured I'd throw in [URL=http://www.pauljunior.no-ip.com/research/csslaidoutform.php]my li'l example[/URL]. ?
Copy linkTweet thisAlerts:
@BigjohnauthorFeb 25.2004 — [i]Originally posted by Paul Jr [/i]

[B]I figured I'd throw in [URL=http://www.pauljunior.no-ip.com/research/csslaidoutform.php]my li'l example[/URL]. ? [/B][/QUOTE]


Paul -

I've never seen this before. Can you explain what you're doing here:
<i>
</i>div#form form div input, div#form form div textarea


Thanks!

John
Copy linkTweet thisAlerts:
@Paul_JrFeb 25.2004 — [i]Originally posted by Bigjohn [/i]

[B]Paul -

I've never seen this before. Can you explain what you're doing here:

<i>
</i>div#form form div input, div#form form div textarea


Thanks!

John [/B][/QUOTE]

I'm grouping multiple selectors so I can apply the styles to both without having to type the same styles for both selectors.

I wouldn't have to do that, except I have a <textarea> tag thrown in there for the message body. So instead of doing it like this:
<i>
</i>div#form form div input {
/*Blah blah blah*/
}
div#form form div textarea {
/*Blah blah blah again*/
}

I can assign styles to multiple selectors by separating them with a comma, like I did. ?

But if you're wondering why I've got all sorts of form div textarea ect., those are descendant selectors. So only the input which is a descendant of a div which is a descendant of a form which is a descendant of another div whose id is "form" will have those styles applied.

Since that's just an example page, I don't really have to do that; and in most cases, you don't. But it's just a habit I have. ?

More info [URL=http://www.w3.org/TR/REC-CSS2/selector.html]here[/URL].
Copy linkTweet thisAlerts:
@Paul_JrFeb 25.2004 — [i]Originally posted by Robert Wellock [/i]

[B]:) [/B][/QUOTE]
?
Copy linkTweet thisAlerts:
@Robert_WellockFeb 25.2004 — You are a faster typer.
Copy linkTweet thisAlerts:
@Paul_JrFeb 25.2004 — [i]Originally posted by Robert Wellock [/i]

[B]You are a faster typer. [/B][/QUOTE]

Thank you. ?

I basically taught myself except for this really, really, really old book I got from my grandmother. ?
×

Success!

Help @Bigjohn spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...