Simple User Form

There are some batches of code that get used over and over again in the world of web development. User forms tend to be that way - no matter what site we’re constructing; from eCommerce to social networks, it seems like the user form is a ubiquitous element of web life.

I’ve done a little leg work for those of you (like me) that end up doing user forms more often than we might like to admit. I’m actually going to do several iterations, and I’ll build on these as well to include things like better CSS standards as well as some simple Javascript error-checking to help ensure that the data going in the database is actually useful.

So, to start with, here’s the CSS style that I’m using for this little project.

<style type=”text/css”>
#textblock {
width: 250px;
margin: 2px;
padding: 2px;
/* border: solid 1px #AAA; */
}
#textinput {
font-size: 1em;
border: solid 1px #000;
width: 150px;
float: right;
}
#formhr {
color: #000;
width: 250px;
height: 1px;
float: left;
}
</style>

Next, of course, is the code for the form itself:

<!– Begin Simple Name & Address Form — Evokemg.com –>
<p id=”textblock”>Salutation
<select name=”userform_salutation” id=”textinput”>
<option value=”Mr”>Mr.</option>
<option value=”Mrs”>Mrs.</option>
<option value=”Miss”>Miss</option>
</select>
</p>
<p id=”textblock”>First Name <input type=”text” id=”textinput” name=”userform_firstname”></p>
<p id=”textblock”>Last Name <input type=”text” id=”textinput” name=”userform_lastname”></p>
<p id=”textblock”>Email <input type=”text” id=”textinput” name=”userform_email”></p>
<hr id=”formhr”>
<p id=”textblock”>Address 1 <input type=”text” id=”textinput” name=”userform_address1″></p>
<p id=”textblock”>Address 2 <input type=”text” id=”textinput” name=”userform_address2″></p>
<p id=”textblock”>City <input type=”text” id=”textinput” name=”userform_city”></p>
<p id=”textblock”>State
<select name=”userform_state” id=”textinput”>
<option value=”AL”>Alabama</option>
<option value=”AK”>Alaska</option>
<option value=”AZ”>Arizona</option>
<option value=”AR”>Arkansas</option>
<option value=”CA”>California</option>
<option value=”CO”>Colorado</option>
<option value=”CT”>Connecticut</option>
<option value=”DE”>Delaware</option>
<option value=”FL”>Florida</option>
<option value=”GA”>Georgia</option>
<option value=”HI”>Hawaii</option>
<option value=”ID”>Idaho</option>
<option value=”IL”>Illinois</option>
<option value=”IN”>Indiana</option>
<option value=”IA”>Iowa</option>
<option value=”KS”>Kansas</option>
<option value=”KY”>Kentucky</option>
<option value=”LA”>Louisiana</option>
<option value=”ME”>Maine</option>
<option value=”MD”>Maryland</option>
<option value=”MA”>Massachusetts</option>
<option value=”MI”>Michigan</option>
<option value=”MN”>Minnesota</option>
<option value=”MS”>Mississippi</option>
<option value=”MO”>Missouri</option>
<option value=”MT”>Montana</option>
<option value=”NE”>Nebraska</option>
<option value=”NV”>Nevada</option>
<option value=”NH”>New Hampshire</option>
<option value=”NJ”>New Jersey</option>
<option value=”NM”>New Mexico</option>
<option value=”NY”>New York</option>
<option value=”NC”>North Carolina</option>
<option value=”ND”>North Dakota</option>
<option value=”OH”>Ohio</option>
<option value=”OK”>Oklahoma</option>
<option value=”OR”>Oregon</option>
<option value=”PA”>Pennsylvania</option>
<option value=”RI”>Rhode Island</option>
<option value=”SC”>South Carolina</option>
<option value=”SD”>South Dakota</option>
<option value=”TN”>Tennessee</option>
<option value=”TX”>Texas</option>
<option value=”UT”>Utah</option>
<option value=”VT”>Vermont</option>
<option value=”VA”>Virginia</option>
<option value=”WA”>Washington</option>
<option value=”WV”>West Virginia</option>
<option value=”WI”>Wisconsin</option>
<option value=”WY”>Wyoming</option>
</select>
</p>
<p id=”textblock”>Zip Code <input type=”text” id=”textinput” name=”userform_zipcode”></p>
<hr id=”formhr”>
<p id=”textblock”>Home Phone <input type=”text” id=”textinput” name=”userform_homephone”></p>
<p id=”textblock”>Mobile Phone <input type=”text” id=”textinput” name=”userform_mobilephone”></p>
<p id=”textblock”>Fax <input type=”text” id=”textinput” name=”userform_fax”></p>
<hr id=”formhr”>
<p id=”textblock”><input type=”submit” value=”Submit Form” id=”textinput”></p>

Simple as that! Of course, feel free to pull and choose any slabs of code that appeal to you. Like I said, I’ll conjure up a few more iterations to help ensure there’s a form set for nearly every reasonable application, and I’ll definitely cook up some Javascript helpers to ensure things like phone numbers get entered right, and email addresses have a verification clause.