Monitor

Lesson 17: Forms and Controls

 

Links

Your home page

Creating Websites home

Beginnings
   Introduction to the Web
   Introducing HTML
   Marking up text
   Setting Up
   FTP and FileZilla
   Links and anchors
   Getting some style

Intermediate topics
   Style sheets
   Testing and debugging
   Lists
   Images and maps
   Audio and video
   Intro to JavaScript
   The DOM and scripting
   Logic and Arrays
   Functions and document.write
   Forms and INPUT
   Other controls
   Misc. topics
   Cookies
   HTML tables
   Structuring tables
   Scripting w/ tables
   Inline frames
   Loose ends

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:

 

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

Click here for the video transcript, FormsAndInput.pdf

 

Hands on exercise

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':

 

Next we'll build FDAEnroll.html. Open FDA.html in your editor and make the following changes then save the result as 'FDAEnroll.html':

 

Next we'll build FDA2.html. Open FDA.html in your editor and make the following changes then save the result as 'FDA2.html':

 

Now, test this works on your PC / Mac:

 

If you are able to run cgis from your server:

Alternatively, you might try your hand at adding an 'onsubmit' event handler to your form that invokes a function based on the code discussed near the end of the video session ("function report()").

 

Session 2

In this video, we explore additional types for INPUT elements, as well as exploring how the POST method works.Topics include:

 

 


Lesson 17: FORMS and controls
part 2: More Input Types, and Post

Click here for the video transcript, MoreInputAndPost.pdf

 

Hands on exercise

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 FDAEnroll-x.html ("x" for "extra"). So Open FDA.html in your editor and make the following changes then save the result as 'FDAEnroll-x.html':

 

Session 3

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:

 

 


Lesson 17: FORMS and controls
part 3: Validating Form Data

Click here for the video transcript, ValidatingFormData.pdf

 

Hands on exercise

This exercise experiments with data validation.

For this exercise, we're going to update FDAEnroll-x.html, converting it to FDAEnroll-x2.html . So Open FDAEnroll-x.html in your editor and make the following changes then save the result as 'FDAEnroll-x2.html':

 

Supplemental materials

    A cumulative summary of the contents of the course so far: Click here to download the cumulative technical summary pdf file

 

 Lesson navigation 

 

 

Email us if you would like additional information. We would love to see your comments and recommendations for our site.