HTML and CSS Reference
In-Depth Information
used in searches. I chose the
post
method here because I don't want to send the user's
password back in plain sight as part of the URL. Now add some form controls and infor-
mation to make it easy for a visitor to understand how to fill out the form. Within the
form
element, begin by adding a helpful description of the data to be entered by the user,
and then add a
text
form control. This prompts the user to enter her name in a text-entry
field. Don't worry about positioning just yet because you'll put all the form controls into
a table later:
<form action=“/form-processing-script” method=
post>
<label for=”username”>Username</label>
<input type=“text” name=“username” />
</form>
Next, add another bit of helpful text and a password control:
<form action=“/form-processing-script” method=“post”>
<label for=”username”>Username</label>
<input type=“text” name=“username” />
<label for=”password”>Password</label>
<input type=“password” name=“password”
/>
</form>
Notice that both these form controls are created using the
input
element. The
type
attribute defines which type of control will be created. In this case, you have a text con-
trol and a password control. Each type of control has a distinct appearance, accepts a dif-
ferent type of user input, and is suitable for different purposes. Each control is also
assigned a name that distinguishes it and its data from the other form controls.
The labels for the form fields are specified using the
<label>
tag. Each label is attached
to the form field it is associated with through the
for
attribute, which should match the
name
or
id
attribute of the form tag with which it is associated. The
<label>
element
doesn't provide any formatting by default, but you can make it appear however you want
using CSS.
Finally, add a Submit button so that the user can send the information she entered into
the form. Here's the form so far:
Input
▼
<form action=”/form-processing-script “ method=”post”>
<div>
<label for=”username”>
Username
</label>
<input type=”text” name=”username” />
</div>
