14.11. Adding the form element
Once you know the URL of the Web application that will process your form, all you need to do is plug it into the action
attribute of your <form> element, like this (follow along and type the changes into your XHTML):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" >
<head >
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>The Starbuzz Bean Machine</title>
</head>
<body>
<h1>The Starbuzz Bean Machine</h1>
<h2>Fill out the form below and click submit to order</h2>Here's the form element.
<form action="http://www.starbuzzcoffee.com/processorder.php" method
="POST">The
action attribute contains the URL of the Web application.And remember we're using
the "POST" method to deliver the form data to the server. More on this later.
</form>Go ahead and add the form closing tag too.
</body>
</html>
So far so good, but an empty <form> element isn't going to get you very far. Looking back at the sketch of the form, there's a lot there to add, but we're going to start simple and get the "Ship to:" part of the form done first, which consists of a bunch of text inputs. You already know a little about text inputs, but let's take a closer look. Here's what the text inputs for the Starbuzz form look like:
<input
type="text" name="name" />We've got one text input for each input area in
the form: Name, Address, City, State, and Zip.
<input type="text" name="address" />
<input type="text" name="city" />
<input type="text" name="state" />
<input type="text" name="zip" />
We use the <input> element for a few different controls. The type attribute determines
what kind of control it is.Here the type is "text" because this is going
to be a text input control.The name attribute acts as an identifier for the data
the user types in. Notice how each one is set to a different value. Let's see how this works...
| 
No comments:
Post a Comment