HTML and CSS Reference
In-Depth Information
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
(t
his 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.