diff options
Diffstat (limited to 'old/published/Webmonkey/htmlforms.txt')
| -rw-r--r-- | old/published/Webmonkey/htmlforms.txt | 1 |
1 files changed, 1 insertions, 0 deletions
diff --git a/old/published/Webmonkey/htmlforms.txt b/old/published/Webmonkey/htmlforms.txt new file mode 100644 index 0000000..e52fe3a --- /dev/null +++ b/old/published/Webmonkey/htmlforms.txt @@ -0,0 +1 @@ +Web forms are one of the uglier elements on most pages -- they're often blocky and look awkward and out of place in the overall design of the page. There's a good reason for that, styling forms is challenging.
The problem is complicated by the myriad of ways to mark up a form using HTML. Since the markup often changes from site to site it's difficult to create a clean, reusable code base you can move from one website to the next.
However, while web forms are one of the more complex things you'll find yourself working with, they're also one of the things that separates the good web designer from the friend of a friend who once read some book on HTML.
To help you out, we're going to break down the elements of web forms and talk about how to handle them in your stylesheets.
== Understand the HTML ==
There are a number of tags available for form and not all of them are necessary, but here's an overview of some of the tools at your disposal:
# '''form''' -- hopefully obvious, this is the container tag
# '''fieldset''' -- often overlooked the <code>fieldset</code> tag is a handy way of grouping related from elements.
# '''legend''' -- used in conjunction with <code>fieldset</code>, legend allows you to add a caption to each fieldset. Think of it as a title for your fieldsets.
# '''label''' -- the label has two purposes, first it tells the user what sort of data the input requires and it also creates a code-level link between the data being collected and the control element.
# '''input''' -- the meat of your form, this is the tag that actually collects the user data and passes it on.
As an example of how you might use these elements to markup you're form, let's take a look at one of the most common forms on the web -- the comment form. Here's what your HTML might look like:
<pre>
<form action="#" class="myform">
<fieldset>
<legend>Leave a Comment</legend>
<ul>
<li>
<label for="name">Name:</label>
<input id="name" />
</li>
<li>
<label for="email">Email:</label>
<input id="email" />
</li>
<li>
<label for="comment">Comments:</label>
<textarea id="comments" rows="7" cols="25"></textarea>
</li>
<li>
<label for="remember">Remember Me:</label>
<input type="radio" name="remember" value="true" />Yes
<input type="radio" name="remember" value="false" checked/>No
</li>
</ul>
</fieldset>
<p><input type="submit" value="Leave comment" /></p>
</form>
</pre>
Let's break this down and see what's going on. First off we have the form container tag. Obviously you'd want to switch out the "#" for the path to your form processing script. Next we use a <code>fieldset</code> tag to group together all our form elements (except for the button at the bottom which we've wrapped in paragraph tags).
Next up we add a legend tag so that people will know this is the comment form. Then we use an unordered list to group our form elements. Why? Well, for one thing it makes it easy to style -- each <code>li</code> tag acts as a container for a row in our form with the label and input conveniently grouped together. The other reason is semantic, a form is gathering a list of data. Now you could make the argument that a definition list might be the more semantically valid choice, but it makes styling a bit more complicated so, for simplicity's sake, we'll stick with the unordered list.
== Adding some style ==
Okay, now that we have the HTML elements in place let's add some CSS styles to make our form look better.
<pre>
form.myform {
margin-left: 155px;
width: 300px;
}
form.myform fieldset {
margin-bottom: 10px;
margin-left: -155px;
}
form.myform legend {
padding: 0 2px;
font-weight: bold;
font-size: 1.6em;
}
form.myform fieldset ul {
margin: 0 0 0 155px;
padding: 0;
}
form.myform fieldset li {
list-style: none;
padding: 10px;
margin: 0;
clear: both;
}
form.myform label {
font-weight: bold;
float: left;
text-align:right;
margin-left: -155px;
width: 150px;
}
form.myform p{
margin-left: 155px;
}
</pre>
What we've done here is just add some basic margin and padding so that all our elements nicely spaced and then remove the default list element styles (note that if you're using a reset stylesheet to fix these issues, then you can skip them here).
The only thing slightly tricky in this CSS is that we're adding a left margin to the whole form and then pulling the fieldset and label tags back with a negative left margin. This has the effect of creating a two column look to our form -- the left side holds all the labels, the right side all of the inputs.
Here's roughly what your form should now look like (screenshot taken in Firefox 3.0):
forms-shot1.jpg
It's a bit spartan, but a good starting point. Before we move on we should point out that, while it doesn't affect our form, the Internet Explorer 6 "3 pixel bug" often pops up when start styling multi-line forms. It can make things like inline checkboxes very difficult to deal with. Fortunately there's a solution that isn't too hard to implement. Check out [http://www.positioniseverything.net/explorer/threepxtest.html Position is Everything] for more details.
== Making to Prettier ==
Now that we have a nice structure to our form there are countless possibilities for styling the various elements. Here's one take that we whipped up. This code will create a nice pale blue form with shaded text inputs and highlighting for the active text box. Paste the following code into the style definition, below what we used above:
<pre>
form.myform input, form.myform textarea {
border: solid 1px #85b1de;
background: #fff url('formbg.gif') repeat-x;
background-position: top;
}
form.myform input:focus, form.myform textarea:focus {
background-image: none;
background-color: #ffffff;
border: solid 1px #fded7f;
}
</pre>
This adds a nice blue border around all our input areas and includes an image with a slight gradient to shade the text areas. To round out the bluish look, add a background the fieldset tag like so:
<pre>
form.myform fieldset {
margin-bottom: 10px;
margin-left: -155px;
background: #d0d9fd;
}
</pre>
Your form should now look like this screenshot, which shows the new blue look with the yellow highlight to let users know what field is currently selected (note that the yellow highlight CSS won't work in IE 6, to accomplish something similar in a way that IE 6 can handle you'll need to resort to JavaScript).
forms-shot1.jpg
(screenshot in Safari on a Mac.)
One thing to note about styling the background using the fieldset element -- IE 6 will apply the background beyond the fieldset border, causing a bit of spillover. The problem is that IE 6 applies the background color to the legend tag as well. The solution is to position the legend tag outside the usual document flow by using <code>position:absolute;</code>. Check out [http://www.mattheerema.com/web-design/2006/04/getting-fieldset-backgrounds-and-legends-to-behave-in-ie/ Matt Heerema's blog for more details] on how to handle the IE 6 workaround.
== Conclusion ==
As we've seen, styling forms is not the easiest thing in the world, but once you understand the basic tags and the options available it isn't too terribly difficult and well styled forms can go a long way to making your site that much more usable and attractive.
If the whole thing seems just too much for you, have a look at the JavaScript library [http://www.emblematiq.com/projects/niceforms/ Niceforms] which can handle some of the heavy lifting for you. Note though that Niceforms doesn't degrade well in all situations.
Other good resources for styling forms include A List Apart's [http://www.alistapart.com/articles/prettyaccessibleforms Pretty Accessible Forms] and Eric Meyer's [http://meyerweb.com/eric/thoughts/2007/05/15/formal-weirdness/ Formal Weirdness] which covers some of the cross-browser issues you might encounter.
\ No newline at end of file |