HTML and CSS Reference
In-Depth Information
</fieldset>
…
Below this we add another fieldset for the personal details area. The first field is a
generic text input field for gathering the tipster's name. Placeholder text is added that
hints as to the format of the information to enter:
…
<fieldset>
<legend>Personal Details</legend>
<p><label>Name: <input type="text" name="name" place-
holder="first and last name"
/></label></p>
…
Following the name input is a text area for gathering the tipster's mailing address fol-
lowed by a single-line text input for gathering the city name. For the address input, we
could use the
label
's
for
attribute in order to place a line break element between the
label and the text area. The
for
attribute wouldn't be required in this circumstance, but
you may find this to be a cleaner approach because it prevents including extra HTML
elements inside the
label
's tags:
…
<p><label for="address">Address:</label><br />
<textarea
id="address"
name="address"
cols="20"
rows="5" placeholder="mailing
address"></textarea></p>
<p><label>City: <input type="text" name="city" place-
holder="mailing address city"
/></label></p>
…
Next is the state field. One option here is to create a drop-down list using the
select
element, with all 50 states filled in. This would likely be the best course to take when
we were sure that only people in the United States would be filling out this form. But
let's say we're not certain the users will necessarily be coming from the United States.
In that case, an alternative is to have a regular text input field but set its
list
attribute
to a data list containing the state names (or abbreviations). Just below the opening form
element, a new
datalist
element is added for this purpose:
<form action="form2.php" method="post">
<datalist id="statelist">
Search WWH ::
Custom Search