HTML 596 HTML 5 and CSS | Tutorial 7 Designing a Web Form Figure 7-65 Registration...
Fantastic news! We've Found the answer you've been seeking!
Question:
Transcribed Image Text:
HTML 596 HTML 5 and CSS | Tutorial 7 Designing a Web Form Figure 7-65 Registration form for the ACGIP Conference homepa சீனராயி சுத்ன்ாைன ன் abstract Title First Name Last Addre Company of University Conference Registration Form Required [] Computer Graphics and Image Processing progra workshop Number ACGIP Membership Namber Registration Category Ac 12th Annual Conference, March 3 March 7, Sante Fe, New Mexico La mag.com tra banque Actice of Computers and image Ⓒigorelovniow/Shutterstock.com: Jason WinteShuttock.com ACCEP tour S links ACCP Hber (695) gta al sessen and Stud (310) red Poster (195) Elable and captay hall and Gost (15) Et to attendongant only Professor Banjerjee has already written the HTML code for the page and the styles for the form elements. He wants you to write the HTML code for the web form and the CSS validation styles. Complete the following: 1. Using your editor, open the cg register_txt.html and cg_validate_txt.css files from the html07 casel folder. Enter your name and the date in the comment section of each file, and save them as cg_register.html and cg_validate.css respectively. 2. Return to the cg register.html file in your editor. Add a link to the cg forms.css and cg_validate. css style sheet files to the document head. 3. Add a script element to the document head that loads the cg_script.js file. 4. Scroll down to the section element and insert a web form element that employs the action at http://www.example.com/cg/register via the post method. 5. Add the labels, input controls, and textarea boxes shown in Figure 7-65 and described in Figure 7-66. Place the input boxes directly after the labels and associate each label with its form control. You do not need to enclose these elements within div elements. Note that the address field should be entered within a textarea box. Figure 7-66 Label Title First Name Last Name Address Company or University E-mail* Fields and controls from the registration form Control ID titleBox InBox InBox Phone Number ACGIP Membership Number Data Field title firstName lastName address Tutorial 7 Designing a Web Form | HTML 5 and CSS addBox groupBox mailbox phoneNumber phoneBox acgipID group email Type text text text text email tel text Required no yes yes yes no yes yes no Placeholder (nnn) nnn-nnnn acgip-nnnnnn 6. Create a data list named titleList containing the suggestions: Mr., Mrs., Ms., Prof., Dr., Assist. Prof., and Assoc. Prof. Apply the titleList data list to the titleBox control. 7. Apply the regular expression pattern ^\d{10}$ ]^(\(\d{3}\}\s*)\d(3)[\s-\d(41$ to the phoneNumber field. Apply the regular expression pattern ^acgip\-\d(6)$ to the acgipiD field. (Note: You can copy the regular expression code for the phoneNumber field from the cg_regex. txt file.) 8. Add the Registration Category label associated with the regList control. Add a selection list with the ID reglist that stores values in the register Type field. Populate the selection list with the option text: "ACGIP Member ($695), "Non-Member ($795)", "Student ($310)", "Poster ($95)", and "Guest ($35)". Make the corresponding option values equal to "member", "nonmember", "student", "poster", and "guest". 9. Within the form, add a paragraph containing a submit button with the text continue. 10. Save your changes to the file and return to the cg validate.css file in your editor to create styles for validating data entry. 11. Within the Validation Styles section, add the following style rules: a. Display all input, select, and textarea elements that have the focus with a background color of rgb(245, 245, 140). HTML 597 b. When the inBox, InBox, mailBox, phoneBox, and idBox controls have the focus and are valid, change the background color to rgb(220, 255, 220) and display the cg_valid.png image with no tiling in the right side of the background contained within the box. c. When the fnBox, InBax, mailBox, phoneBox, and idBox controls have the focus and are not valid, change the background color to rgb(255, 232, 232) and display the image cg_invalid. png with no tiling in the right side of the background contained within the box. 12. Save your changes to the style sheet and then open cg register.html in your browser. Verify that the content and layout of the form resemble that shown in Figure 7-65. Verify that you must enter all required field values in the proper format for the form to be submitted successfully. Confirm that the browser performs inline validation on the firstName, lastName, address, email, phoneNumber, and acgipiD fields. HTML 596 HTML 5 and CSS | Tutorial 7 Designing a Web Form Figure 7-65 Registration form for the ACGIP Conference homepa சீனராயி சுத்ன்ாைன ன் abstract Title First Name Last Addre Company of University Conference Registration Form Required [] Computer Graphics and Image Processing progra workshop Number ACGIP Membership Namber Registration Category Ac 12th Annual Conference, March 3 March 7, Sante Fe, New Mexico La mag.com tra banque Actice of Computers and image Ⓒigorelovniow/Shutterstock.com: Jason WinteShuttock.com ACCEP tour S links ACCP Hber (695) gta al sessen and Stud (310) red Poster (195) Elable and captay hall and Gost (15) Et to attendongant only Professor Banjerjee has already written the HTML code for the page and the styles for the form elements. He wants you to write the HTML code for the web form and the CSS validation styles. Complete the following: 1. Using your editor, open the cg register_txt.html and cg_validate_txt.css files from the html07 casel folder. Enter your name and the date in the comment section of each file, and save them as cg_register.html and cg_validate.css respectively. 2. Return to the cg register.html file in your editor. Add a link to the cg forms.css and cg_validate. css style sheet files to the document head. 3. Add a script element to the document head that loads the cg_script.js file. 4. Scroll down to the section element and insert a web form element that employs the action at http://www.example.com/cg/register via the post method. 5. Add the labels, input controls, and textarea boxes shown in Figure 7-65 and described in Figure 7-66. Place the input boxes directly after the labels and associate each label with its form control. You do not need to enclose these elements within div elements. Note that the address field should be entered within a textarea box. Figure 7-66 Label Title First Name Last Name Address Company or University E-mail* Fields and controls from the registration form Control ID titleBox InBox InBox Phone Number ACGIP Membership Number Data Field title firstName lastName address Tutorial 7 Designing a Web Form | HTML 5 and CSS addBox groupBox mailbox phoneNumber phoneBox acgipID group email Type text text text text email tel text Required no yes yes yes no yes yes no Placeholder (nnn) nnn-nnnn acgip-nnnnnn 6. Create a data list named titleList containing the suggestions: Mr., Mrs., Ms., Prof., Dr., Assist. Prof., and Assoc. Prof. Apply the titleList data list to the titleBox control. 7. Apply the regular expression pattern ^\d{10}$ ]^(\(\d{3}\}\s*)\d(3)[\s-\d(41$ to the phoneNumber field. Apply the regular expression pattern ^acgip\-\d(6)$ to the acgipiD field. (Note: You can copy the regular expression code for the phoneNumber field from the cg_regex. txt file.) 8. Add the Registration Category label associated with the regList control. Add a selection list with the ID reglist that stores values in the register Type field. Populate the selection list with the option text: "ACGIP Member ($695), "Non-Member ($795)", "Student ($310)", "Poster ($95)", and "Guest ($35)". Make the corresponding option values equal to "member", "nonmember", "student", "poster", and "guest". 9. Within the form, add a paragraph containing a submit button with the text continue. 10. Save your changes to the file and return to the cg validate.css file in your editor to create styles for validating data entry. 11. Within the Validation Styles section, add the following style rules: a. Display all input, select, and textarea elements that have the focus with a background color of rgb(245, 245, 140). HTML 597 b. When the inBox, InBox, mailBox, phoneBox, and idBox controls have the focus and are valid, change the background color to rgb(220, 255, 220) and display the cg_valid.png image with no tiling in the right side of the background contained within the box. c. When the fnBox, InBax, mailBox, phoneBox, and idBox controls have the focus and are not valid, change the background color to rgb(255, 232, 232) and display the image cg_invalid. png with no tiling in the right side of the background contained within the box. 12. Save your changes to the style sheet and then open cg register.html in your browser. Verify that the content and layout of the form resemble that shown in Figure 7-65. Verify that you must enter all required field values in the proper format for the form to be submitted successfully. Confirm that the browser performs inline validation on the firstName, lastName, address, email, phoneNumber, and acgipiD fields.
Expert Answer:
Related Book For
Income Tax Fundamentals 2013
ISBN: 9781285586618
31st Edition
Authors: Gerald E. Whittenburg, Martha Altus Buller, Steven L Gill
Posted Date:
Students also viewed these programming questions
-
Planning is one of the most important management functions in any business. A front office managers first step in planning should involve determine the departments goals. Planning also includes...
-
An impure sample (0.70 g) of potassium carbonate (K2CO3) is dissolved in enough water to make 200.0 mL of solution A. A 20.00 mL aliquot of solution A is taken and put into an Erlenmeyer flask. To...
-
The accounting records of Brighton Foods, Inc., include the following items at December 31, 2017: Requirements 1. Show how each relevant item would be reported on the Brighton Foods, Inc., classified...
-
State the research question. Is hand span a good predictor of how much candy you can grab? Using 45 college students as subjects, researchers set out to explore whether a linear relationship exists...
-
What is a paradigm?
-
Giere Manufacturing's sales slumped badly in 2012. For the first time in its history, it operated at a loss. The company's income statement showed the following results from selling 600,000 units of...
-
Research on physics used in robotics lists 3 types of robots where these robots can be used components of a robot such as power unit and manipulator, sensors, actuators controller, analog sensors vs...
-
Data for Hill Oil Company are as follows for all US properties: Acquisition costs of unproved property, net of impairment.. $ 300,000 400,000 Nondrilling evaluation costs of unproved...
-
What pricing strategy is being used? What justifications might be used to set such high price for its watch? Explain. Go to this link...
-
(3) A rectangular corral is to have a divider parallel to two of its sides. The perimeter of the corral is to be constructed of wire costing $5 per meter, but plywood for the divider costs $8 per...
-
60.Blackstone Company uses a process costing system and has 14,000 units remaining in the work-in-process inventory. These units are 75% and 40% complete with regard to materials and conversions...
-
What level of confidentiality should be attached to the preparation and handling of a memorandum of law? Why? Assume you have been working for a legal specialist in estate law for a number of years...
-
Katies Cleaning Service has cleaning contracts for 15 apartments, 45 family homes, and 25 office buildings. She estimates that an apartment takes 4 hours to clean, a home takes 6 hours to clean, and...
-
The total daily profit function, in dollars, for the food truck Crepes by Monice is given by the function P(x)=6(x2 - 600) 1/3-25, when x crepes are sold. Find the marginal profit (in dollars per...
-
Which of the following will always result in tax avoidance? Select one: O A. Making maximum capital cost allowance deductions. OB. Making contributions to an employer's registered pension plan. OC....
-
Graph the following conic sections, labeling vertices, foci, directrices, and asymptotes (if they exist). Give the eccentricity of the curve. Use a graphing utility to check your work. 10 5 + 2 cos 0
-
Jim is fired from his job as a waiter and decides to take an extended trip to Europe. After touring Europe for 3 months, Jim returns to look for a new job as a waiter. Are his job-hunting expenses...
-
Bev and Ken Hair have been married for 3 years. They live at 3567 River Street, Springfield, MO 63126. Ken is a full-time student at Southwest Missouri State University (SMSU) and Bev works as an...
-
In 2012, Michael has net short-term capital losses of $2,000, a net long-term capital loss of $45,000, and other ordinary taxable income of $45,000. a. Calculate the amount of Michael's deduction for...
-
In your opinion, why is more than 60% of todays primary research data being generated by online self-reporting survey methods?
-
Use your statistical software package to obtain descriptive statistics for variables X1 to X8. Are the results similar or different from what your answers would be regarding an effective influencer?
-
How would you improve the social media influencer questionnaire?
Study smarter with the SolutionInn App