Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Forms + CSS 5

Status
Not open for further replies.
1DMF

1DMF

Programmer
Jan 18, 2005
8,795
GB
I have been developing a tabless website and am stuck when it comes to the form.

how do you nicely line up the form using just CSS and no tables?

I googled a bit and just kept finding people saying a form was 'tabular' data so using a table is ok.

I'm sure you guys & gals won't agree and really would like to achieve the ultimate goal, 100% X/HTML 1.1 , CSS and NO Tables, i'm close, very close , just need help understanding how you design the form and get it all nicely laid out.

Thanks 1DMF

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
Sort by date Sort by votes
There is an argument to say that a form is tabular.
However I don't agree (suprise suprise).

Sure, some forms may be for inputting tabular data but your average contact form isn't.

Some people use lists to format their forms. I've done this a couple of times. You could use a definition list I guess with each <dt> being the field title (don't forget to use <label> tags) and the input field being in the <dd> part.


Don't forget though, that there are quite a few form tags you can hook styles into.

<form>(obviously)
<fieldset>
<legend>
<label>
<input>
<textarea>


Using fieldsets is very useful both from a style perspective AND a usability perspective.

There's an article on A List Apart about making pretty forms, it's quite good.


<honk>*:O)</honk>
Foamcow Heavy Industries - Web site design in Cheltenham and Gloucester
Earl & Thompson Marketing - Marketing Agency Services in Gloucestershire
 
Upvote 0 Downvote
Heya - glad to hear you are still progressing on CSS :)

Take a peek at the following URL (blatant plug for my site) - this is a "contact us" page and have non-table based form layout. It may not be quite what you are looking to achieve... some of the css may work for you however.


Cheers,
Jeff

[tt]Jeff's Page @ Code Couch
[/tt]

What is Javascript? FAQ216-6094
 
Upvote 0 Downvote
Thanks guys, i'll go check them out and see how I get on.

Foamy what are <dt> and <dd> tags?, new one on me!

Heya - glad to hear you are still progressing on CSS :)
Click to expand...

Yup I know I might seem anti CSS and get very irate at times, but that's just me throwing my toys out of my pram with frustration, and know that I really want to do it right and standards compliant, so will keep on at it.

OK this project is based on a 'free template' I downloaded, but i have made massive changes and learned alot about how to acheive things with CSS, and the correct usage of tags, padding, margins, pseudo classes etc.. it's been a steep learning curve, but I'm actually starting to get somewhere - finally!


PS what's the differenc between XHTML 1.0 Strict and XHTML 1.1 - is 1.1 a final proper 'strict' version of XHTML.

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
Upvote 0 Downvote
<dl>,<dt> and <dd> tags are for use in definition lists

Code: 
<dl>
<dt>Term</dt>
<dd>Definition for term A</dd>

<dt>Term B</dt>
<dd>Definition for term B</dd>
</dl>
[code]


If you want an example of doing a form with an Ordered List as per the ALA article take a look at

[URL unfurl="true"]http://ftp1.dns-systems.net/~designease/development/register.php[/URL]

It's a bit fussy and I'm not convinced it's the best way but I employ the same forms stylesheet in a number of places on that site (and a few others). It works well.

Here's one using the same basic stylesheet but no ordered list (the site is horrible, I was just copying an old layout and making it lighter). It's still work in progress, but should give you an idea.

[URL unfurl="true"]http://ftp3.dns-systems.net/~intoco/f55superduplex/enquiry.php[/URL]

Personally I hate doing forms markup, it's so laborious, so I'm trying to work out a way to make it quicker to type!

<honk>*:[COLOR=red]O[/color])</honk>
[url=http://www.foamcow.com]Foamcow Heavy Industries - Web site design in Cheltenham and Gloucester[/url]
[url=http://www.earl-thompson.co.uk]Earl & Thompson Marketing - Marketing Agency Services in Gloucestershire[/url]
 
Upvote 0 Downvote
Pete: [smile] make sure you let us know when the site is done so I can pile on the praise!

1DMF: To my knowledge 1.1 doesn't come in a strict flavour (implying, I think, that it's more formal in it's implementation).

If you want to see a DL/DD/DT in use in a slightly different way... again check out the coedit site.


That page is a bit text heavy... but it's using the DL in a correct way (albeit not looking like a list).

Cheers,
Jeff

[tt]Jeff's Page @ Code Couch
[/tt]

What is Javascript? FAQ216-6094
 
Upvote 0 Downvote
much prefer this one , but am trying out the which will hopefully get me on the right track.

I love the way fieldset / ledgend draws that box around the input fields, I will probably break my form into two fieldset sections, floating 2 divs side by side, yup , think this way will suit my needs, thanks a million [cheers]

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
Upvote 0 Downvote
Thanks for all your great help guys, I like this fieldset / label / legend thing, looks nice.

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
Upvote 0 Downvote
Jeff, the F55 thing is never going to have my name on it unless they let me redesign it.

It's actually 1 of about 10 sites that sell different types of stainless steel... fascinating topic.

This was a new site for them, so I'm building it "right" to demonstrate how much more effective it will be for them. Hopefully they'll then let me redo the others - and hopefully redesign the look of them too.

<honk>*:O)</honk>
Foamcow Heavy Industries - Web site design in Cheltenham and Gloucester
Earl & Thompson Marketing - Marketing Agency Services in Gloucestershire
 
Upvote 0 Downvote
Oh and the Designease thing is the longest job I've ever done.

It's been finished (again) for over a month - just takes an age to hear anything from the client.

There's a whole load of backend stuff I did that I'm waitin for approval on - and for the proper domain name to be repointed.

I've been working on that site from the day I started working at this place and it's still not live. I was told it was finished when I started working on it... so I redid it from scratch hahaha

<honk>*:O)</honk>
Foamcow Heavy Industries - Web site design in Cheltenham and Gloucester
Earl & Thompson Marketing - Marketing Agency Services in Gloucestershire
 
Upvote 0 Downvote
i'm stuck guys, why won't my labels line up?

Code: 
.formdiv {
float:left;
width: 380px;
margin: 0px 0px 0px 10px;
}

.formdiv legend, .formdiv em {
color: #3DB6FF;
}

.formdiv label {
width: 150px;
}

HTML...
Code: 
<form name="advice" action="/cgi-bin/leadform.cgi" method="post">
					<div class="formdiv">
                        <fieldset>
                            <legend>Personal Details</legend>
                                <ol>
                                    <li>
                                        <label for="name">Name<em>*</em></label>
                                        <input id="name" />
                                    </li>
                                    <li>
                                        <label for="address1">Address<em>*</em></label>
                                        <input id="address1" />
                                    </li>
                                    <li>
                                        <label for="address2">Address 2</label>
                                        <input id="address2" />
                                    </li>
                                    <li>
                                        <label for="town">Town/City</label>
                                        <input id="town" />
                                    </li>
                                    <li>
                                        <label for="county">County<em>*</em></label>
                                        <input id="county" />
                                    </li>
                                    <li>
                                        <label for="postcode">Postcode<em>*</em></label>
                                        <input id="postcode" />
                                    </li>
                                </ol>
                        </fieldset>
                    </div>
                    </form>

result...
"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
Upvote 0 Downvote
By deafult label is an inline element and does not take the width. In the A List Apart article they changed the labels display property to inline-block to have them accept the widths. That should help you out.

On the other hand, you should really not use the outer div -- all the styling of the div you could simply apply to the fieldset.
 
Upvote 0 Downvote
would that still work having 2 fieldsets float next to each other without using a surounding div?

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
Upvote 0 Downvote
Of course. Float divs and if you need to restrict their container in width, just restrict the form element. It is best to avoid using too many elements when you don't need to.
 
Upvote 0 Downvote
cool, i'll scrap the formdiv and simply place the CSS on the fieldset instead, thanks!

P.S. inline-block worked a treat, though I notice something about FF not supporting this, is this still true?

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
Upvote 0 Downvote
works a treat...
Code: 
fieldset {
float:left;
width: 220px;
margin: 0px 0px 0px 15px;
}

fieldset legend, fieldset em {
color: #3DB6FF;
}

fieldset label {
display: inline-block;
width: 80px;
margin: 0px 0px 0px 5px;
}

input {
width:120px;
}
select {
width:123px;
}

result...
though why do i have to set input = 120px and select = 123px for them to display the same size ?

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
Upvote 0 Downvote
Has anyone managed to get this line up lables thing to work for mozilla? I've added the Javascript, downloaded the jquery.js but all I get is an error in the jquery.js file...
this.stack is null or not an object
Click to expand...


any ideas?


"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
762
pmonett
pmonett
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
608
PeDa
PeDa
PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
647
PeDa
PeDa
tyutghf
  • Locked
  • Question
Achieving this grid layout in css
Replies
1
Views
207
tyutghf
tyutghf

Part and Inventory Search

Sponsor

Back
Top