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

Get Smashing Html5 now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.