Question
In this practice , you are to develop an HTML web page that contains one form with many different types of input. No action attribute
In this practice , you are to develop an HTML web page that contains one form with many different types of input. No action attribute is required in the form, as you wont have a server set up to respond to your request. 1. HTML Static Content - Web Form Form Controls (2.5 marks) The web form must contain at least 10 controls. The form must include at least 2 text fields and at least 1 of each type of the following: checkbox, radio button, dropdown list. Mandatory Fields (0.5 marks) Choose at least 5 of the form controls to be mandatory fields. Clearly identify the mandatory form controls to the user. Regular Expressions (0.5 marks) In this assignment you will be using regular expressions to validate at least 2 text fields. For each of these text fields, indicate the pattern of a valid input string. Cohesiveness (0.5 marks) Attempt to create a cohesive web form that could be used to collect useful information. Each form element should make sense in how it is being used. For example, you could create an interactive food menu or an online store. 2. HTML Event and JavaScript - Focus (1 mark) When the web page loads, use JavaScript to manually give focus to a form control of your choice. Your decision can be based on any factor including position on the screen, the order of definition in your HTML source code, etc. 3. JavaScript - Form Validation Write a JavaScript function that will validate the us PROG1800 - Winter 2018 2 Mandatory Fields (1 mark) Check that each mandatory box is not empty. Regular Expressions (3 marks) Use at least 2 regular expressions to validate distinct input text fields. Meaningful Error Messages (1 mark) For each situation that can fail, provide a meaningful error message that will help the user to overcome the problem. Compound Error Message (1.5 marks) If any errors exist, display a compound message that includes all of the error messages. Do not use a JavaScript popup box for this purpose. Focus (0.5 marks) If any errors exist, give focus to one of the offending form controls. 4. HTML Event - Form Validation (1 mark) When the form is submitted, call the previous function to validate the users input. If the input is invalid, ensure that no data is sent. 5. JavaScript - Alphabetic Letter Case Conversion (1 mark) Write a JavaScript function that will convert all alphabetic characters within an input string to their upper case form and return the result. 6. HTML Event - Alphabetic Letter Case Conversion (1 mark) Choose one input text field. Whenever focus is removed from that text field and/or when the form is submitted, call the previous function to convert the input string from that text field. 7. JavaScript - White Space (1 mark) Write a JavaScript function that will trim the white space from both sides of an input string and return the result. 8. HTML Event - White Space (1 mark) Whenever focus is removed from any applicable control and/or when the form is submitted, call the previous function to trim the users input. 9. JavaScript - Capitalization (1 mark) Write a JavaScript function that will capitalize each word in an input string and return the result. To be specific, in the output string the first character of each word should be upper case and the remaining letters should be lower case.
Step by Step Solution
There are 3 Steps involved in it
Step: 1
Get Instant Access to Expert-Tailored Solutions
See step-by-step solutions with expert insights and AI powered tools for academic success
Step: 2
Step: 3
Ace Your Homework with AI
Get the answers you need in no time with our AI-driven, step-by-step assistance
Get Started