CSS for form questions / radio buttons

[CarolW]

I just realized the forms on my site are a bit crude (to say the least!) I learn slowly (but much faster with help from here!)

So - I'm just adding a Quick Survey on one of my pages. I have some CSS for the entire form (see code examples below), but not for the varied content of the form.

So, for now, for this particular code, what I'd like to do is assign probably a class for:

radio button input fields (I'll leave checkbox fields for later)

textarea field

I don't know if I'll need a special class for the headings or paragraphs contained in the form.

Here's the HTML code for the form I want to format:


<div class="feedput">
<form method="post" action="/cgi-bin/mailit">

<!-- Validator requires a div here -->
<!-- and also closing of tags -->
<div class="questions">

<input type="hidden" name="login" value="cwhitney" />
<!-- next line returns visitor to original page following survey fill-out -->
<input type="hidden" name="reply" value="thanks11.htm" />

<input type="hidden" name="date" id="date" value="<!--#echo var='DATE_LOCAL' -->" />

<input type="hidden" name="date" value="date" />

<input type="hidden" name="file" value="quicksurvey1" />
<input type="hidden" name="format" value="human" />
<input type="hidden" name="fields" value="date message" />

<!-- end questions div here; it seems no longer needed by Validator after this -->
</div>

<div id="surveyquest">
<h3 id="survey">Quick Survey</h3>


<h4>Where are you from?</h4>
<div id="radio1">
<p>East</p>
<p><input type="radio" name="where" value="East" checked="checked" /></p>
<p>West</p>
<p><input type="radio" name="where" value="West" /></p>
<p>South</p>
<p><input type="radio" name="where" value="South" /></p>
<p>North</p>
<p><input type="radio" name="where" value="North" /></p>
</div>

<h4>Do you have a dog?</h4>
<div id="radio2">
<p>Yes, I have one or more.</p>
<p><input type="radio" name="havedog" value="Yes" checked="checked" /></p>
<p>No; I don't have any dogs.</p>
<p><input type="radio" name="havedog" value="No" /></p>
</div>

<h4>You may leave a comment if you like</h4>

<p><textarea name="message" rows="4" cols="40">Comment here</textarea></p>

<p><input type="submit" value="Reply to survey" /></p>
<p><strong>or</strong></p>
<p><input type="reset" value="Quit" /></p>
</div>

</form>

<!-- close feedput div here -->
</div>


(I'm not sure I need all those divs, and might take some out; I put in the "radio1" and "radio2" divs when I coudn't get the "checked" value to work, but Robert Wellock helped me sort that one out! - but maybe I will need them to assign a class for the CSS).

The only CSS I have that affects this form and the others on my site (about three or four others) is as follows:

CSS code


.feedput {
font-family: Verdana,Geneva,Arial,Helvetica,sans-serif;
font-size: 100%;
margin: 1em;
padding: 2em;
text-align: left;
}

.feedbutton {
margin: 1em;
padding: 2em;
font-family: Verdana,Geneva,Arial,Helvetica,sans-serif;
font-weight: normal;
font-size: 100%;
text-align: center;
}



Can anybody make suggestions about how I might format the two sets of radio-buttons, and also, maybe, if need be, the textarea part? The textarea boxes all seem to look fine anyway, but the headings and the paragraphs of text that label the boxes are a bit sloppy.

One example of what Im talking about is at:

http://www.coherentdog.org/comments.htm

Thanks!

Mon, 21 Nov 2005 11:39:23

[MstrBob]

Styling can flow easier from simpler, more semantic markup. Forms can be especially tricky to group, but I find if we take full advantage of the fullness of HTML's vocabulary, if you will, the variety of tags, it can help. So here we start:


<h1>Quick Survey</h1>
<form method="post" action="/cgi-bin/mailit">
<div>
<input type="hidden" name="login" value="cwhitney" />
<input type="hidden" name="reply" value="thanks11.htm" />
<input type="hidden" name="date" id="date" value="<!--#echo var='DATE_LOCAL' -->" />
<input type="hidden" name="date" value="date" />
<input type="hidden" name="file" value="quicksurvey1" />
<input type="hidden" name="format" value="human" />
<input type="hidden" name="fields" value="date message" />
</div>
<fieldset>
<legend>Where are You From?</legend>
<label><input type="radio" name="where" value="East" checked="checked" />East</label>
<label><input type="radio" name="where" value="West" />West</label>
<label><input type="radio" name="where" value="North" />North</label>
<label><input type="radio" name="where" value="South" />South</label>
</fieldset>
<fieldset>
<legend>Do You Have a Dog?</legend>
<label><input type="radio" name="havedog" value="Yes" checked="checked" />Yes, I have one or more.<label>
<label><input type="radio" name="havedog" value="No" />No; I don't have any dogs.</label>
</fieldset>
<fieldset>
<legend>Comments</legend>
<textarea name="message" id="message" rows="4" cols="40">Comment here</textarea>
</fieldset>
<div>
<input type="submit" value="Reply to survey" /> or <input type="reset" value="Quit" />
</div>
</form>


And now for styling. Now how exactly you want to do this depends on your design. But some general styling would be as such:


form {
font-family: Verdana,Geneva,Arial,Helvetica,sans-serif;
font-size: 100%;
margin: 1em;
padding: 2em;
text-align: left;
}
fieldset {
border:0;
margin:0 0 0 1em;
}
legend {
margin:0 0 1em -1em;
padding:0;
font-size:1.2em;
}
label {
display:block;
padding:0 0 1em 0;
}
label input {margin-right:0.5em;}


Now there is of course a number of things you can do to forms to make them more user friendly, depending on what you want. I'd help out a bit more, but I'm afraid I'm not exactly sure what you're after.

[MstrBob]

I'm sorry, looking back on my post you might be a little confused, so allow me to elaborate on my prior post.

I took your form and threw out many of the <div>'s and <p>'s. These elements tend to get abused a lot. I think this is because they conveniently default to block-level elements. Block-level elements, as you may know take up an entire line. So each <p> is on a new line. An important rule of thumb when throwing in a <p></p> is, "Is this really a paragraph?" If it isn't really, look for a more appropriate tag.

<div>'s are useful buggers, but they tend to get abused to. When you make a page, try not to be redundant. Minimize your markup (but do make sure you use enough tags to properly 'mark-up' your page!) whenever possible.

Now in the case of the form, there is a container element, called <fieldset>. This element is used to group form controls together into a set. A form control is either a Radio Button, a Checkbox, a Text Input, or a Textarea. So for something like "Where are You From?" you can group those radio buttons together in a fieldset. Fieldset's need a Legend (<legend></legend>), for which your question "Where Are You From?" works very nicely.

And finally, I also used the <label> element. This element has two important uses. The main one is accessibility. For non-visual browsers (And even your visual browsers to an extent) this assosciates text with your control (like a radio button). In this case you can specify that this radio button means "West", this one means "East", ect.

The second use of <label> is for styling purposes. This allows us to group the label text and form control together. In this way we can provide space between the options so that visually, it's clear which option goes with which radio button.

Then a little bit of structural styling goes a long way. It helps the users visually see what's a question, what's an option, and which options go with which questions. I've set the border for fieldset to 0, because by default many browsers give <fieldset> a border.

Hope that clarifies it some.

[CarolW]

Dear MstrBob,

Wow; what a wonderful set of posts - I will be studying those; should learn fairly well, since you explained so well and gave such great examples!

So, I'll be off to work on this stuff now!

Wed, 23 Nov 2005 17:54:39

[Siddan]

*removed* by myself