Tutorial 13: Giving Form to Forms - HTML with Style | 15

Tutorial 13: Giving Form to Forms

Forms and CSS

One of the things you'll probably want to do sooner or later is make your forms look pretty. Admittedly, all the examples I've given here, although functional, don't rate very high for looks. And of course, you'll want to use CSS for this.

The first thing about forms and CSS is that, well, it doesn't always work well. Navigator in particular is not very keen on making controls look like anything other than what they do by default, so you'll probably have little luck getting anywhere with that. Internet Explorer fares a bit better, and allows you to change some things such as font styles and color on text inputs, but sort of does it.

Mozilla is a different story, of course, offering complete control of looks, color, positioning, alignment, size and anything else you can think of.

What I want to make special mention of, however, is of a certain mystery bug in Navigator. Proving once more that CSS support in Navigator 4.0 is more of an afterthought pasted onto the browser at the last possible moment, it seems that CSS layouts and forms don't go very well together. This is because Navigator has a strange tendency to end enclosing DIV elements after a form is over. Navigator does this a lot in general, and seems to do it because it encounters stray end-tags.

Let me make this clear: Sometimes, not always, if there is an end-tag in a document that Navigator doesn't recognize, either because it's an element that it doesn't process such as LABEL or OPTGROUP or because the tag could have been omitted, Navigator processes it as a DIV end-tag. This is not very strict behaviour, and sometimes it works, some times it doesn't, but be on the lookout for it. You can trust Netscape to not even be able to implement a bug consistently.

What do you do to work around this? Short of supplying extra DIV elements, which could well break your document structure, the only thing I could find is that the bug sometimes disappears if you omit implied end-tags. This is the only case where I would advise you to omit implied end-tags instead of always including them. If you never get this problem, don't worry about it. But if users complain of strange layouts, have a look at this solution.

Conclusion

Well, that was a long one, so let's have a look at you've learned in this tutorial: You learned a bit of how forms came about and why, how they were initially implemented, how they grew and got to be able to do nice things. You learned how to use various types of controls in your forms, and when to use the various submission methods and encodings. Finally, you got some tips for giving your forms structure and making them useful. If you want to implement forms on your Web site, you can now read up on the server-side methods that can be used to process their output, such as CGI and ASP if you feel you're up to it. The links above also point to various libraries of off-the-shelf programs that process simple form data, which you might want to use instead. And while you wait for the next tutorial, have a look at our exercises.

Produced by Stephanos Piperoglou

URL: https://www.webreference.com/html/tutorial13/21.html

Created: May 28, 1998
Revised: February 25, 1999