Web Application Engineering

Lab # 03

Objectives
Get basic understanding to the implementational aspects of

• Designing Web Forms (Specifically using HTML5).

• Designing Graphics using HTML5 Canvas and SVGs.

Lab Activities
1. Design the below given HTML form with all the constraints and guidelines provided
below.
Card Type

Time

Country

Video Tutorial

Audio Tutorial
Consider the following restrictions in while designing this form.
• Use the table to design the form.
• First and last name are required and must be validated before submitting.
• The width of text fields of first and second name is 20 characters.
• The length of first name can not be greater than 10 characters.
• Initial focus of the form is at Last name. Afterword’s, pressing the Tab key leads the
focus to the First name and then pressing the tab key leads to Date of Birth.
• Pressing the “Alt + e” will lead to input the email, and “Alt + u” leads to input the URL.
• User can select multiple countries in the select.
• 9 is already entered in the Shoesize and user can not edit its values.
• Upon the click of reset button, all data in the form should be cleared.
• Upon the submission of the form, it sends the data in hidden form to a PHP file
(test.php)

2. Draw the Following SVGs.

3. Add a sample YouTube video to your HTML page like

given below.