In this first video, we introduce the basic concepts related to forms: the form
element, 'controls', especially the input element, and CGI's - programs on the
server that respond to the submission of forms. Topics include:
Forms as place to gather information from the user
Note: I strongly suggest you view all our videos in full screen mode: click the icon
in the lower right corner of the video area (it shows four arrows pointing
to the corners of the screen). When you are done, the Esc ("escape") key
returns you to regular mode.
Lesson 17: FORMS and controls
part 1: FORMS and Input
This exercise is primarily focused on creating and using a form with various
<input> element types.
For this exercise, we're going to create a form with several types of input
elements. We'll do this by building on your earlier files FDA.html and FDAStyle.css.
We'll use FDA.html to build FDA2.html and FDAEnroll.html; well use FDAStyle.css
to build FDAStyle2.css.
Let's start with the style sheet. Open FDAStyle.css in your editor and
make the following changes then save the result as 'FDAStyle2.css':
Remove the 'border' property from style rules for body, div, footer, maincontainer,
Add a new style rule for '.bold' with property font-weight: bold;
Add a new style rule for '.controls' with these properties:
font-family: monospace; font-weight: bold; font-size:12pt;
Add a new style rule for '.in1' with properties margin-left: 3%; padding: 10px; width: 30%;
Change '.leftcolumn' to have 'width' be only 20%
Change '.rightcolumn' to have margin-left' be 23%
Next we'll build FDAEnroll.html. Open FDA.html in your editor and make the
following changes then save the result as 'FDAEnroll.html':
In the HEAD element, make sure there is just one LINK to a stylesheet, and it should
point to FDAStyle2.css
Change the text in the title_box DIV to be "Apply to enroll in the Flying Drones Academy"
In the leftcolumn, below the link for "Customer History", add a new link to
FDAEnroll with text "Sign up for our courses"
In the rightcolumn area, replace the content with the following:
An h2 element with text "We need just a little information from you."
A P element with text "Fill in the fields below and and click the 'Apply' button."
A P element with classes 'bold' and 'in1' and text "All fields are required."
A form element with action=pretendCGI.html method=get enctype=application/x-www-form-urlencoded
Within the form:
A P element with five INPUT elements with it:
"Your first name:" type=text name=fName id=fn size=20 maxlength=30 required
"Your last name:" type=text name=lName id=ln size=30 maxlength=40 required
"Choose a user name:" type=text name=uName id=un size=20 maxlength=30 required
This exercise is primarily focused on working with some of the just introduced
<input> element types: file, color, and range.
For this exercise, we're going to update FDAEnroll.html, converting it to
("x" for "extra"). So Open FDA.html in your editor and make the
following changes then save the result as 'FDAEnroll-x.html':
In the form element itself, make these changes:
Change the action to be cgis/sample_cgi_post.php
Change the method to be post
Change the enctype to be multipart/form-data
Then add a paragraph inside the form:
Begin with Creativity Test and skip two lines (two <br> elements)
Ask "What is your favorite color?" and follow with an input type=color name=fc
element and skip two lines
Ask the user to choose two continents, follow with an input type=file name=cont
element; accept .gif and .jpg file extensions; be sure to include 'multiple'
and set the name field to be followed by ''
Ask the user to choose a prime number between 1 and 38, follow with an
input type=range: min 1, max 38, step 1, value 17, name=pn; skip one line and
add "current selection: 17", with a span element around the 17; use name=val
In this range element, add an event handler of "onchange" to update
the current selection value in the "val" span (see lecture example)
In this video, we demonstrate how a user could do a hack, and discuss
ways to minimize data entry errors and coding hacks. Topics include:
For this exercise, we're going to update FDAEnroll-x.html, converting it to
So Open FDAEnroll-x.html in your editor and make the
following changes then save the result as 'FDAEnroll-x2.html':
Add a new paragraph in your form, after the "Creativity test", labeled
Promotional code: and skip two lines
Add the text "Enter your promotional code here:" followed by an <input>
element the input element should be type=text, length and max length of 6,
id and name both 'code', and a required field
In the <form> element, add an "onsubmit" routine as "return checkCode();"
In the <head> element, add a <script> element that contains the
checkCode() function, which should verify
The first character is lowercase alpha
The second character is a dash
The third character is a numeric digit
The fourth character is an asterisk
The last two characters are uppercase alpha
The checkCode() function should also issue an error message
for each kind of error found, and set the focus on to the
element with id=code, selecting the content
if you would like additional information.
We would love to see your comments and
recommendations for our site.
of where you are on the site, but we do not
leave cookies on your site; we do not track
your visits; we do not disseminate any
information about you because we do not
gather any information about you.