HTML and CSS Reference
In-Depth Information
Adding the form element
Once you know the URL of the server script 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 HTML):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
The Starbuzz Bean Machine
</title>
</head>
<body>
<h1>
The Starbuzz Bean Machine
</h1>
<h2>
Fill out the form below and click “order now” to order
</h2>
<form action="http://starbuzzcoffee.com/processorder.php" method="POST">
T
he action at
tribute con
tains the
U
RL of the
server scrip
t.
And
reme
mber
we're
using
the
POST
met
hod t
o deli
ver
</form>
</body>
</html>
the
form
data
to th
e ser
ver.
Mo
re on
this l
ater.
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 and a
number input. 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:
We've go
t one text
input fo
r each input
area in t
he form:
Name, A
ddress, City,
State, Z
ip, and Phone
.
<input type="text" name="name">
<input type="text" name="address">
<input type="text" name="city">
<input type="text" name="state">
<input type="text" name="zip">
<input type="tel" name="phone">
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…
