O'Reilly logo

Smashing Html5 by Bill Sanders

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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; ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required