Expanding the Form - Exercise

Contact Us or call 1-877-932-8228
Expanding the Form - Exercise

Expanding the Form

Duration: 10 to 25 minutes.

In this exercise, you will add an "Education" section to the form.

  1. Open CssForms/Exercises/JobApplication.html in your editor.
  2. Expand the form to cover the following:
    1. Education
      1. Degree 1
        1. Institution
        2. Type of Degree
        3. Year Completed
        4. Comments
      2. Degree 2
        1. Institution
        2. Type of Degree
        3. Year Completed
        4. Comments

Challenge

Try to layout the form in two columns like this: Two-Column Layout

Note that there are several ways to do this; our solution uses relative positioning and the screenshot is from Firefox. It would look almost the same in other modern browsers.

Solution:

CssForms/Solutions/JobApplication.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="../reset-meyer.css">
<link type="text/css" rel="stylesheet" href="style.css">
<title>Job Application</title>
</head>
<body>
<h1>Job Application</h1>
<form method="post" action="apply.php">
---- C O D E   O M I T T E D ----
<fieldset id="education">
		<legend>Education</legend>
		<fieldset>
			<legend>Degree 1</legend>
			<ol>
				<li>
					<label for="Institution1">Institution:</label>
					<input type="text" size="20" name="Institution1" id="Institution1" title="Institution">
				</li>
				<li>
					<label for="TypeOfDegree1">Type of Degree:</label>
					<select name="TypeOfDegree1" id="TypeOfDegree1" title="Type of Degree">
						<option>Please select...</option>
						<option>High School</option>
						<option>Bachelors</option>
						<option>Masters</option>
						<option>PhD</option>
					</select>
				</li>
				<li>
					<label for="YearCompleted1">Year Completed:</label>
					<input type="text" size="20" name="YearCompleted1" id="YearCompleted1" title="Year Completed">
				</li>
				<li>
					<label for="Comments1">Comments:</label>
					<textarea name="Comments1" id="Comments1" title="Comments" cols="50" rows="3"></textarea>
				</li>
			</ol>
		</fieldset>
		<fieldset>
			<legend>Degree 2</legend>
			<ol>
				<li>
					<label for="Institution2">Institution:</label>
					<input type="text" size="20" name="Institution2" id="Institution2" title="Institution">
				</li>
				<li>
					<label for="TypeOfDegree2">Type of Degree:</label>
					<select name="TypeOfDegree2" id="TypeOfDegree2" title="Type of Degree">
						<option>Please select...</option>
						<option>High School</option>
						<option>Bachelors</option>
						<option>Masters</option>
						<option>PhD</option>
					</select>
				</li>
				<li>
					<label for="YearCompleted2">Year Completed:</label>
					<input type="text" size="20" name="YearCompleted2" id="YearCompleted2" title="Year Completed">
				</li>
				<li>
					<label for="Comments2">Comments:</label>
					<textarea name="Comments2" id="Comments2" title="Comments" cols="50" rows="3"></textarea>
				</li>
			</ol>
		</fieldset>
	</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

Challenge Solution:

CssForms/Solutions/style-challenge.css
body {
	background-color: #ccc;	
}

h1 {
	width: 1000px;
	margin: 5px auto;
	padding-bottom: 10px;
	border-bottom: 1px solid #930;
	font-size: xx-large;
	color: #930;
}

/*Begin Form Styles*/
form {
	width: 1000px;
	margin: auto;
	padding-bottom: 20px;
	color: #930;
}

fieldset {
	width: 480px;
	margin-bottom: 10px;
	border-bottom: 1px solid #930;
	background-color: #eec;
}
---- C O D E   O M I T T E D ----
#buttons input {
	height: 100px;
	width: 350px;
	font-size: 1.5em;
	background-color: #cc9;
	color: #930;
	border: 1px solid;
	font-variant: small-caps;
	margin: 10px;
	cursor: pointer;
}

#buttons input:hover {
	background-color: #dda;
}

#jobInfo {
	height: 164px;
}

#personalInfo {
	display: block;
	position: relative;
	left: 520px;
	top: -175px;
	height: 419px;
}

#employmentHistory {
	display: block;
	position: relative;
	top: -430px;
	height: 1021px;
}

#education {
	display: block;
	position: relative;
	top: -1205px;
	left: 520px;
	height: 458px;
}

#buttons {
	display: block;
	padding: 27px 0px;
	position: relative;
	top: -1205px;
	left: 520px;
	text-align: center;	
}
/*End Form Styles*/

Code Explanation

Open CssForms/Solutions/JobApplication-challenge.html in your browser to see the result.

Next