February 2011
Beginner
368 pages
8h 30m
English
Chapter 14: Adding Forms
One of the most important features of any Web page is its ability to interact with a person. In computer science lingo, there’s a subfield called human computer interface, which treats humans as another type of interface like a printer, USB drive, or Webcam. This doesn’t dehumanize people using computers. Instead, it treats people like something they’re not, and that’s bound to get you in trouble sooner or later. This chapter shows both how to add interactive forms and treat people like people.
Adding a Form
Forms are really in two parts (even more in some cases). The first part is the <form> tag that sets up a container for different kinds of input. The typical form can be envisioned as the following:
Begin Form
Input 1
Input 2
Input 3
Input 4
End Form
So in discussing forms, we’re really talking about the form and its attributes and input elements and their attributes. With HTML5 forms, you’ll find plenty of new attributes and elements.
Just so that you don’t get bored, the following (degree2radians.html in this chapter’s folder at wiley.com/go/smashinghtml5) is an example of a simple calculator for converting degrees into radians (see Chapter 13 for a practical use for the converter). Just enter the degrees you want converted, and you’ll be presented with the equivalent radians.
<!DOCTYPE HTML>
<html>
<head>
<script type=”text/javascript”>
FormMaster=new Object();
FormMaster.resolveForm=function()
{
const RADCON=Math.PI/180;
degreesNow=document.converter.degrees.value; ...
