Forms and an Introduction to CSS
Up until this week, our web pages have been relatively plain repositories of information with a few links scattered here and there. Make no mistake, such a page is powerful in its own right. Indeed, the early web was nothing but one page hyperlinking to the next–and yet that was its draw. But the web has grown since then. Even in the early days, web surfers clamored for interactivity, a way to send information rather than simply read it. And so forms were born.
In this section, we cover XHTML forms, from outside-in. We first discuss the magic of forms, how they send data to a web server with GET and POST methods, and we even take a peek at the data, actually see how web servers and web clients talk to each other in simple name-value pairs.
We then construct a form, adding fieldsets and legends, and explore the numerous types of input that are available: text boxes and text areas, check boxes and radio buttons, drop-down menus, buttons, and even fields hidden from the casual eye. We unravel how each can identify a name-value pair, and we make it all accessible through appropriate labels and id attributes.
But interactivity is not enough; a web page must be pleasing to the eye, conducive to the hand. XHTML in itself is fantastic at marking up content, but not for dressing it up. To add finesse to a page, another language must be learned: CSS, short for Cascading Style Sheets. We have a quick anatomy lesson, introducing CSS rules, selectors, declarations, properties, and values. And we learn how to incorporate these new rules into our page, either by embedding styles into elements, the page itself, or linking to an external sheet.
- Section 03 Slides (PDF, 9.0 MB)
- XHTML Forms and Input
- Accessible HTML/XHTML Forms
- CSS Reference
- W3C CSS Validator
- Fancy Form Design Using CSS