More Forms: fields, buttons, controls

  1. Read the Advanced Forms blog post
  2. Open index.html and review the markup of each form.
  3. Open style.css and add the styles described, reloading your page as you work. You may not edit the HTML. As you work through this exercise, adding styles to each section, reload your page frequently in both Safari and Firefox. Each browser has its own default style of form elements, and often they react to your style rules differently. Remember, your control over consistent rendering across browsers is limited, and this is especially true with forms.

Textareas and inputs

HTML5 Contact Form

HTML5 Login Form Without Labels

HTML5 Search Form Without Labels

Radio Buttons and Checkboxes

Order Your Dinner

Main Course

Extras

"Option" pop-up menus.

Free T-Shirt!

Copyright Watkins College 2011.