WBG310 Week 1 Lab Interactive Web Page Scripting with Lab
Apply skills learned in the tutorials to a real-world form specification. Create a form and validate the input, reporting errors and feedback directly to the web page.
Zip all files into one folder titled W1_Lab1_YourName.zip. When you are done, submit your assignment.
STEP 1: Create a Simple Form
1. Download the template file here: jsTemplate.zip
2. Unzip the jsTemplate.html file and save the file as w1_Lab1.html.
3. Within the form tags already coded in the template HTML file, create two text boxes, two buttons, and a radio button group (view Figure 1 for layout). Make sure the textboxes and radio buttons are labeled according to Figure 1.
4. Use the “name” attribute for all instances of the radio group set to: “skilltype.”
5. Use input type of button for the Submit button NOT input type submit.
6. Use input type reset for the clear form button.
Figure 1: Using the Form Section of the Template
STEP 2: Create a Validation Function
2. Output validation error messages by writing directly to the
with the id of “results.” (You may want to use Alert boxes for testing at first.)
3. Create a loop within the above function that collects the checked value of the radio button group. Once the value from the radio group is collected, create a function to pass the value for evaluation and return a message for the user based on his or her selected skill type using the
with the id of “more.”
STEP 3: Save and Test
1. Save the file.
2. View the page in a browser and test the program. A sample output looks like the following.
Figure 2: Series of Expected Results From Testing
STEP 4: Prep for Turn-In
1. When your application functions as expected, zip the file and submit your assignment.
There are no reviews yet.