Creating the Form

Contact Us or call 1-877-932-8228
Creating the Form

Creating the Form

Now we'll begin creating the form. We won't add the form controls just yet. First, we want to capture the structure within a form:

Code Sample:

CssForms/Demos/JobApplication2.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Job Application</title>
<style type="text/css">
	/* added to call out fieldsets */
	fieldset {
		border-color: #000;
	}
	fieldset fieldset {
		border-style: dashed;
	}
</style>
</head>
<body>
<h1>Job Application</h1>
<form method="post" action="apply.php">
	<fieldset>
		<legend>Job Information</legend>
		<ol>
			<li>Job of Interest (Sales Manager, Account Executive, Receptionist, Marketing Director)</li>
			<li>Referral Source (Advertisement, Employee, Employement Agency, Website)</li>
			<li>Availability (Full-Time, Part-Time, Temporary, Seasonal)</li>
			<li>Location (New York, California, Texas, Pennsylvania, Kansas)</li>
		</ol>
	</fieldset>
	<fieldset>
		<legend>Personal Information</legend>
		<ol>
			<li>First Name</li>
			<li>Last Name</li>
			<li>Street Address</li>
			<li>City</li>
			<li>State</li>
			<li>Postal code</li>
			<li>Telephone</li>
			<li>Email address</li>
			<li>Citizenship</li>
			<li>Have you ever been convicted of a felony?</li>
			<li>Are you willing to relocate?</li>
		</ol>
	</fieldset>
	<fieldset>
		<legend>Employment History</legend>
		<p>Provide your employment history starting with the company for which you have most recently worked.</p>
		<fieldset>
			<legend>Company 1</legend>
			<ol>
				<li>Company</li>
				<li>Title</li>
				<li>Start Date</li>
				<li>End Date</li>
				<li>Responsibilities</li>
				<li>Reason for leaving</li>
			</ol>
		</fieldset>
		<fieldset>
			<legend>Company 2</legend>
			<ol>
				<li>Company</li>
				<li>Title</li>
				<li>Start Date</li>
				<li>End Date</li>
				<li>Responsibilities</li>
				<li>Reason for leaving</li>
			</ol>
		</fieldset>
		<fieldset>
			<legend>Company 3</legend>
			<ol>
				<li>Company</li>
				<li>Title</li>
				<li>Start Date</li>
				<li>End Date</li>
				<li>Responsibilities</li>
				<li>Reason for leaving</li>
			</ol>
		</fieldset>
	</fieldset>
	<fieldset>
		<input type="reset" id="Reset" name="Reset" value="Start Over">
		<input type="submit" id="Submit" name="Submit" value="Submit">
	</fieldset>
</form>
</body>
</html>

Code Explanation

Things to notice:

  • In JobApplication1.html, we had used a nested ordered list to capture the parent-child relationship between "Employment History" and the individual companies for which the applicant has worked. Here in JobApplication2.html, we've replaced that structure with nested fieldsets.
  • We have also replaced all the h2 tags with legend tags.
  • We have added buttons nested in a fieldset.

The result is shown below. Note that we have styled the fieldset borders some to call them out. We'll remove those styles later. Fieldset Borders Styled

The fieldset tag is used to group like form fields. The legend tag is not required in a fieldset, but it is usually a good idea to include it. It provides a title or heading for the grouped elements.

HTML5 Form Fields

HTML5, the newest version of HTML, introduced a range of new types for input tags, giving us greater control over the type of data we expect from our users in forms. Rather than presenting any single-line text field as an input of type text, we can specify more exactly that we are looking here for an email address, say, or a telephone number. These new fields are especially useful: an iPhone keypad will present the user with a phone-pad set of keys when the user taps into a field of type tel. Keep in mind that support for these newer HTML5 form tags is not 100% among all browsers; as always, if you expect significant traffic to your pages from folks who use older version of browsers, it might be best to avoid using these tags.

Note that the date type will work well - presenting a date picker - on most mobile devices, but works on desktop browsers (as of this writing) only in Chrome and Opera.

We'll use the telephone (tel), email, and date input types in our example below:

Code Sample:

CssForms/Demos/JobApplication3.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Job Application</title>
</head>
<body>
<h1>Job Application</h1>
<form method="post" action="apply.php">
	<fieldset id="jobInfo">
		<legend>Job Information</legend>
		<ol>
			<li>
				<label for="JobOfInterest">Job of Interest:</label>
				<select name="JobOfInterest" id="JobOfInterest">
					<option>Account Executive</option>
					<option>Marketing Director</option>
					<option>Receptionist</option>
					<option>Sales Manager</option>
				</select>
			</li>
			<li>
				<label for="ReferralSource">Referral Source</label>
				<select name="ReferralSource" id="ReferralSource">
					<option>Advertisement</option>
					<option>Employee</option>
					<option>Employement Agency</option>
					<option>Website</option>
				</select>
			</li>
			<li>
				<label for="Availability">Availability</label>
				<select name="Availability" id="Availability">
					<option>Full-Time</option>
					<option>Part-Time</option>
					<option>Seasonal</option>
					<option>Temporary</option>
				</select>
			</li>
			<li>
				<label for="Location">Location</label>
				<select name="Location" id="Location">
					<option>California</option>
					<option>Kansas</option>
					<option>New York</option>
					<option>Texas</option>
					<option>Pennsylvania</option>
				</select>
			</li>
		</ol>
	</fieldset>
	<fieldset id="personalInfo">
		<legend>Personal Information</legend>
		<ol>
			<li>
				<label for="FirstName">First Name:</label>
				<input type="text" size="20" name="FirstName" id="FirstName" title="First Name">
			</li>
			<li>
				<label for="LastName">Last Name:</label>
				<input type="text" size="20" name="LastName" id="LastName" title="Last Name">
			</li>
			<li>
				<label for="Address">Street Address:</label>
				<input type="text" size="20" name="Address" id="Address" title="Address">
			</li>
			<li>
				<label for="City">City:</label>
				<input type="text" size="20" name="City" id="City" title="City">
			</li>
			<li>
				<label for="State">State:</label>
				<input type="text" size="20" name="State" id="State" title="State">
			</li>
			<li>
				<label for="PostalCode">Postal Code:</label>
				<input type="text" size="20" name="PostalCode" id="PostalCode" title="Postal Code">
			</li>
			<li>
				<label for="Telephone">Telephone:</label>
				<input type="tel" size="20" name="Telephone" id="Telephone" title="Telephone">
			</li>
			<li>
				<label for="Email">Email Address:</label>
				<input type="email" size="20" name="Email" id="Email" title="Email Address">
			</li>
			<li>
				<label for="Citizenship">Citizenship:</label>
				<input type="text" size="20" name="Citizenship" id="Citizenship" title="Citizenship">
			</li>
			<li>
				<span class="label">Have you ever been convicted of a felony?:</span>
				<label><input type="radio" name="Felony" id="FelonyYes" title="Felony Yes"> Yes</label>
				<label><input type="radio" name="Felony" id="FelonyNo" title="Felony No"> No</label>
			</li>
			<li>
				<span class="label">Are you willing to relocate?:</span>
				<label><input type="radio" name="Relocate" id="RelocateYes" title="Relocate Yes"> Yes</label>
				<label><input type="radio" name="Relocate" id="RelocateNo" title="Relocate No"> No</label>
			</li>
		</ol>
	</fieldset>
	<fieldset id="employmentHistory">
		<legend>Employment History</legend>
		<p>Provide your employment history starting with the company for which you have most recently worked.</p>
		<fieldset>
			<legend>Company 1</legend>
			<ol>
				<li>
					<label for="CompanyName1">Company Name:</label>
					<input type="text" size="20" name="CompanyName1" id="CompanyName1" title="Company Name">
				</li>
				<li>
					<label for="JobTitle1">Job Title:</label>
					<input type="text" size="20" name="JobTitle1" id="JobTitle1" title="Job Title">
				</li>
				<li>
					<label for="StartDate1">Start Date:</label>
					<input type="date" size="20" name="StartDate1" id="StartDate1" title="Start Date">
				</li>
				<li>
					<label for="EndDate1">End Date:</label>
					<input type="date" size="20" name="EndDate1" id="EndDate1" title="End Date">
				</li>
				<li>
					<label for="Responsibilities1">Responsibilities:</label>
					<textarea name="Responsibilities1" id="Responsibilities1" title="Responsibilities" cols="50" rows="3"></textarea>
				</li>
				<li>
					<label for="ReasonForLeaving1">Reason for Leaving:</label>
					<textarea name="ReasonForLeaving1" id="ReasonForLeaving1" title="Reason for Leaving" cols="50" rows="3"></textarea>
				</li>
			</ol>
		</fieldset>
---- C O D E   O M I T T E D ----

	</fieldset>
	<fieldset id="buttons">
		<input type="reset" id="Reset" name="Reset" value="Start Over">
		<input type="submit" id="Submit" name="Submit" value="Submit">
	</fieldset>
</form>
</body>
</html>

Code Explanation

Adding the Form Fields

The page still uses all the default HTML styles. The result is shown below: Page Still Using HTML Styles

Our form is now well structured so that a person viewing it in a browser or using an accessibility device such as a screen reader would be able to follow it easily. A few things to note:

  • We have placed most of the "questions" in label tags and used the for attribute to tie them to their form fields.
  • We have wrapped the radio buttons with their labels in label tags and put the associated questions in span tags, which we have given a "label" class so that we can style them later.
  • We have used the title attribute on all the form fields and assigned it a descriptive value. This is for accessibility purposes. Though most accessibility devices will use the label tag to provide information about the form control, some rely on the control's title attribute.
  • We used types tel (for phone), email, and date where appropriate to the type of information being requested. Sadly, our date type present a date picker only on mobile devices and Chrome: Chrome date picker
  • We have added id attributes to the main fieldsets as hooks for our style sheet.

It's almost time to get stylish. We won't need any new CSS properties to style our form. We'll just see how we can use styles we're already familiar with. However, before we do that, we need to go on a little tangent.

Next