HTML and CSS Reference
In-Depth Information
Right off the bat, you need to understand a few things about forms. First, a form is part
of a web page that you create using HTML elements. Each form contains a
form
element
that contains special controls, such as buttons, text fields, check boxes, Submit buttons,
and menus. These controls make up the user interface for the form (that is, the pieces of
the form users see on the web page). When people fill out forms, they're interacting with
these elements. In addition, you can use many other HTML elements within forms to
create labels, provide additional information, add structure, and so on. These elements
aren't part of the form itself, but they can enhance your form's look and improve its
usability.
When someone fills out an HTML form, he enters information or makes choices using
the form controls. When the user submits the form, the browser collects all the data from
the form and sends it to the URL specified as the form's action. It's up to the program
residing at that URL to process the form input and create a response for the user.
It's important that you understand the implications of this final step. The data is what
you want, after all! This is the reason you've chosen to create a form in the first place.
When a user clicks the Submit button, the process ceases to be one of pure HTML and
becomes reliant on applications that reside on the web server. In other words, for your
form to work, you must already have a program on the server that will store or manipu-
late the data in some manner.
In some cases, forms aren't necessarily submitted to programs. Using JavaScript, you can
take action based on form input. For example, you can open a new window when a user
clicks a form button. You can also submit forms via email, which is okay for testing but
isn't reliable enough for real applications.
▼
Task:
Exercise 11.1: Creating a Simple Form That Accepts a
Name and a Password
Okay, let's get right to it and create a simple form that illustrates the concepts just pre-
sented. It's a web page that prompts the user to enter a name and a password to continue.
Start by opening your favorite HTML editor and creating a web page template. Enter the
standard HTML header information, include the
body
element, and then close the
body
and
html
elements to form a template from which to work. If you already have a tem-
plate similar to this, just load it into your HTML editor:
<!DOCTYPE html>=
<html>
