Laying out the Questions

Contact Us or call 1-877-932-8228
Laying out the Questions

Laying out the Questions

Most forms can be thought of as a series of questions:

  1. What is your first name?
  2. What is your last name?
  3. What company do you work for?

But instead of being laid out as questions, they are presented as answer spaces (form controls) preceded by labels:

  1. First Name: __________________________
  2. Last Name: __________________________
  3. Company: __________________________

So, in creating an HTML page, it makes sense to use an ordered list. In fact, let's start with that: Ordered List

The code for this page is shown below:

Code Sample:

CssForms/Demos/JobApplication1.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Job Application</title>
</head>
<body>
<h1>Job Application</h1>
<h2>Job Information</h2>
<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>
<h2>Personal Information</h2>
<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>
<h2>Employment History</h2>
<p>Provide your employment history starting with the company for which you have most recently worked.</p>
<ol>
	<li>Company 1
		<ol>
			<li>Company Name</li>
			<li>Job Title</li>
			<li>Start Date</li>
			<li>End Date</li>
			<li>Responsibilities</li>
			<li>Reason for leaving</li>
		</ol>
	</li>
	<li>Company 2
		<ol>
			<li>Company Name</li>
			<li>Job Title</li>
			<li>Start Date</li>
			<li>End Date</li>
			<li>Responsibilities</li>
			<li>Reason for leaving</li>
		</ol>
	</li>
	<li>Company 3
		<ol>
			<li>Company Name</li>
			<li>Job Title</li>
			<li>Start Date</li>
			<li>End Date</li>
			<li>Responsibilities</li>
			<li>Reason for leaving</li>
		</ol>
	</li>
</ol>
</body>
</html>

Code Explanation

As you can see, there is no CSS in this file. It's a simple HTML file split into separate sections of pseudo-questions, which are presented in ordered lists.

The pseudo-questions will become our form labels.

Next