HTML and CSS Reference
In-Depth Information
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:
<legend>Personal Details</legend>
<p><label>Name: <input type="text" name="name" place-
holder="first and last name"
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 />
rows="5" placeholder="mailing
<p><label>City: <input type="text" name="city" place-
holder="mailing address city"
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