<h2>Forms and an Introduction to CSS</h2>
<img class="alignleft" title="Two birds" src="/images/teaching/two_birds.jpg" alt="GET and POST" width="250" height="146" />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 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 peak 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 page, but not for dressing it up. For this, 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.
<h2>Resources</h2>
<ul>
	<li><a title="Section 03 Slides" href="/teaching/section_03_slides.pdf">Section 03 Slides</a> (PDF, 9.0 MB)</li>
	<li><a title="XHTML Forms and Input" href="http://www.w3schools.com/html/html_forms.asp">XHTML Forms and Input</a></li>
	<li><a title="Accessible HTML/XHTML Forms" href="http://www.webstandards.org/learn/tutorials/accessible-forms/beginner/">Accessible HTML/XHTML Forms</a></li>
	<li><span style="color: #000000;"><a title="CSS Reference" href="http://www.w3schools.com/css/css_reference.asp">CSS Reference</a></span></li>
	<li><span style="color: #000000;"><a title="W3C CSS Validator" href="http://jigsaw.w3.org/css-validator/ ">W3C CSS Validator</a></span></li>
	<li><span style="color: #000000;"><a title="Fancy Form Design Using CSS" href="http://articles.sitepoint.com/article/fancy-form-design-css">Fancy Form Design Using CSS</a></span></li>
</ul>
<a title="Return to teaching home" href="/teaching-home/">Return to teaching home</a>