Assembling Forms and Applications
Instead, the rest of this chapter focuses on the markup you’ll need to be familiar with to assemble forms for
display and use. Actually making them work... well, that’s a subject for another book.
The form Element
As its name implies, the form element defines a portion of an HTML document that can receive input from
the user. It acts as a container for other interactive form elements, as well as any other elements needed
to give the form structure. The form element is flow content and can contain any other flow elements
except another form. To include multiple, separate forms within a single document, each must be
contained by its own form element—you can’t nest a form within a form. However, as of HTML5, you can
now associate a control anywhere in the document with a different form elsewhere on the same page
using the form attribute.
The new form attribute for form controls compensates for the inability to nest forms.
Without it, any controls outside the form element aren’t included in that form’s data set.
A form attribute explicitly associates a control with a form, even when the control isn’t
inside that form element. Many current browsers support form attributes already, but
alas, not yet all of them at the time we’re writing this. For the time being you should still
keep all your controls within the same form element.
The optional action attribute, if present, carries the URL of the form handler, or in other words, the
address where the data is going to end up. That form handler may be a document or script elsewhere on
the website, a back-end application, or the very same document the form resides in if its data will be
handled exclusively on the client side by JavaScript, or if the HTML document has been integrated with
some kind of scripting language such as PHP, Ruby, Python, or ASP.NET. If the action attribute is
missing from the <form> start tag, and if no other controls specify an action, then the browser assumes
the form’s handler is the current document. If the document lacks any form handling code and no other
form handler is specified, the form won’t do anything at all.
A method attribute is optional and can accept two values, get or post, to indicate the particular HTTP
method to use when the form is submitted. If the method attribute is missing, the default method is get.
When the form’s method is get, the submitted data will be appended to the form handler’s URL (taken
from the action attribute, or else the current document’s URL) in a query string consisting of all the form’s
name-value pairs. You may have seen URLs with query strings that look something like
http://example.com/watch?video=funnycats.mp4&width=480&height=320 (this is just an example
we made up; there are no funny cat videos on the Internet). The question mark (?) in the URL marks the
beginning of the query string, with each name-value pair connected by an equal sign (=), and additional
values are appended with an ampersand (&). A form handler can interpret and process that URL,
extracting values from the exposed query string.
The get method is best for requesting static data from the server for temporary use—for example,
searching the Web for a definition of the word “idempotent”—especially when the URL, including its query
string, might be reused in a link or bookmark.
