Two HTML Forms to make Form 1 - HTML 5 Forms 1. Requires Previous HTML Form assignment to modify. 2. After validating and making sure it submits and clicking labels selects the inputs, then replace...

1 answer below »
Quick assignment to create 2 HTML forms



Two HTML Forms to make Form 1 - HTML 5 Forms 1. Requires Previous HTML Form assignment to modify. 2. After validating and making sure it submits and clicking labels selects the inputs, then replace the previous doctype with the HTML 5 doctype:  This version of the form is going to look almost the same as the above: 1. Rating: Numeric Range type Minimum value is 0 and Maximum value is 1 the Step value is 0.1. 1. Optional advanced work for the curious or show off students: (Not shown in the screenshot.) Add a

for tickmarks for 0,10,20,30,40,50,60,70,80,90,100 but the values will still be in decimals. (example: value 0.10 is labeled 10 because the rating is a percent which can be written 2 ways.) The best reference for this is MDN. -HTML5- Note: Browser support is still lacking because HTML5 is a living standard so nobody ever supports it fully. You won't see full support for this in the browser and different browsers will handle it differently; hence the need for browser testing. You won't get consistent results from this one even if you do it 100% correct. 2. Birthday Type Date Input: Minimum date is last month. Maximum Date is next month. Default date is yesterday (fixed dates: all that matters is you could try it out and see it blocking outside the min/max; I don't care what dates are used.) MDN . type=date is the most reliable at this time. Validator shouldn't complain; ignore it. · Zip code requires it can not be empty (see MDN.) · Zip code validates input using regexp (see MDN): /\d\d\d\d\d(-\d\d\d\d)?/ · Zip code has a title attribute explaining what a valid zip code is (in your own words, do not paste in the regexp!) title attributes also work for tooltips on any tag. This is used by browsers to explain to users because few users can read a regexp · Spellcheck is off for zip codes but on for comments box. · As pictured, placeholder text NOT default values must be set as pictured (placeholders should be in gray text... do not use css to get the look... it's an attribute! look up the input tag in a reference!) · Comment: set autocomplete to on. . on is old enough to be ok but if the validator complains, ignore it. There are many standard values which are too new so ignore the validator and a browser lacking support will either ignore it or simply go to on. · Change the script which helps highlight commonly flawed parts of this assignment: Include this line of HTML at the bottom of your page above the closing tag to use it:  NOTE: my script just highlights common problems; ask me if confused, it's not uncommon for me to have bugs. I don't fix until I do grading... it points out things I need to look at for grading it unfortunately can not do the grading for me. · Validate. Now it will be in HTML5 mode because of the old doctype you replaced with the HTML5 doctype. Form 2 - HTML Forms 1. Create blank XHTML page; use this XHTML doctype header:  The doctype line has to be exactly at the top of the file; it's some gibberish for the browser but mostly it is to help the validator. 2. Please read and follow the directions, maybe even print this out; the paper will be worth saving your time flipping back and forth so much. Your time is money! 3. This assignment will produce the form shown in the image: Note: Matching the layout & sizes in the screenshot do not matter; I reduced window size to make for a smaller screenshot. I only used P tags to create some space for each line; but feel free to do anything appearance wise; no credit for making it pretty. 4. Form's destination: https://domfu.com/app5/cgi/echo.fcgi Browser developer test pages (used as example forms:) examples 1 , examples 2 5. Zip & Rating & birthday are textboxes. Birthday has a default value. 6. Comment box: Multi-line text input does not work with the input tag. This is where google can be useful - ask a question like How to create multiple line text input in a HTML form and that may point out the tag needed among many complex alternative solutions. Then, after you know the name of the tag you look it up in a proper reference if you wish to know details (from a reliable source.) 7. Create a hidden form input using the name NSA, set the value to classID . You will only see this information again when the form is sent to the server (assuming your form works properly.) MDN has probably the best reference on forms 8. Two fieldsets Personal Information and Mailing List Subscriptions and these labels must be put in a LEGEND tag. 9. Fields for Mailing List Subscriptions are labeled checkboxes. Use the same name lists for all checkboxes (I'm not talking about the label when I say name.) The values are '1' for the 1st box and '2' for the 2nd box. 1 Relabel the 1st checkbox to one 2 Relabel the 2nd checkbox to two 10. Yes and No are radio buttons. Radio buttons are mutually exclusive checkboxes. Their name is subscribe. When you click the text label Yes or No it MUST uncheck the other one... to make the text clickable you need a label tag too. The labels for them is the word Yes and the word No. NOT the phrase Subscribe to our Mailing List: which is a label; however, HTML only has labels for accessibility so users can hear or click on the label to trigger the button. Labels can be used for layout of the page but their primary purpose is user interaction. 11. All Form elements must use the LABEL tag. Label- try actually LOOKING UP the use of the label tag rather than just surrounding your labels... You have to get used to looking things up! labels need to be connected to the input/select/textarea tag or they are useless. MDN tutorial , MDN Reference , W3Schools Tutorial , W3Schools Reference 12. Buttons Submit and Reset buttons at the bottom of the form not in a fieldset but within the form tag Try submitting the form! The URL I gave you goes to a server program which displays your form back to you as how the server receives it! If you do not see your form information repeated back to you, then you are doing something wrong... look up attributes of the input tag, form tag, input tag type... The last button is another submit button but uses a button tag not input tag. Make the text take two lines like in the photo (that is another tag.) 13. State: uses a select tag. You do not need all 50 states, but you need at least MN & WI from the USA and QC & MB from Canada (list of abbreviations) with each country getting a special label for their county (research how to label groups of options.) Also include select a state to be similar to the example photo: 14. Extra Challenge: use regular expressions to automate the process of converting this text file into options using regular expression replacing in your text editor. A few lines of typing and this can be done in under a minute by a pro. Please feel free to ask for help on how to do this during lab time; email doesn't work out well on this one. · Process Hint: open the linked text file and use replace all with RegExp using 2 groups. The replace string is an Option Tag with \1 and \2 back references (to those groups) inserted in the right places. UNDO is your friend! · You can embargo China if it is too hard to handle them. · You'll want to add  to the head of your document if you try to handle Chinese with the validator (your editor will save UTF by default like everything today does; it's not really an issue.) 15. The labels must connect with the field they are labeling (accessibility.) You can tell when you click the label and the text box comes becomes active or the checkbox/radio is selected. 16. Validate the page NOW using the w3.org's TIDY html validator with the file upload feature, or use a local install of TIDY. The browser validator is limited compared to the online one which will catch more problems (the classic one for old Firefox is best.) · the date is just a type=text input for the old html we are using here; you can ignore the validator or make it text to shut it up. 17. Add my script which helps highlight commonly flawed parts of the assignment: Include this line of HTML at the bottom of your page above the closing tag to use it:
html-5-forms-wtxrxexk.docx
Answered Same DayFeb 25, 2021

Answer To: Two HTML Forms to make Form 1 - HTML 5 Forms 1. Requires Previous HTML Form assignment to modify. 2....

Rohith answered on Feb 27 2021
139 Votes
__MACOSX/._51210
51210/.DS_Store
__MACOSX/51210/._.DS_Store
51210/screencapture-validator-w3-org-nu-2020-02-26-22_10_36.png
__MACOSX/51210/._screencapture-validator-w3-org-nu-2020-02-26-22_10_36.png
51210/form1.html


Personal Information
Zip/Postal Code:


Subscribe to our Mailing List


Yes



No




Rating

Comment:



Mailing List Subscriptions


List to sell to spamers




Spam

Birthday:


State:
MN Minnesota
WI Wisconsin
QC Quebec
MB Manitoba





Submit
Button
51210/form2.html


Personal Information
Zip/Postal Code:


Subscribe to our Mailing List


Yes



No

Rating:


Comment:



Mailing List Subscriptions


List to sell to spamers




Spam

Birthday:


State:
MN Minnesota
WI Wisconsin
QC Quebec
MB Manitoba





Submit
Button
__MACOSX/51210/._form2.html
51210/screencapture-validator-w3-org-check-2020-02-26-21_51_08.png
__MACOSX/51210/._screencapture-validator-w3-org-check-2020-02-26-21_51_08.png
51210/~$ml-5-forms.docx
__MACOSX/51210/._~$ml-5-forms.docx
51210/html-5-forms.docx
Two HTML Forms to make
Form 1 - HTML 5 Forms
1. Requires Previous HTML Form assignment to modify.
2. After validating and making sure it submits and clicking labels selects the inputs, then replace the previous doctype with the HTML 5 doctype: 
This version of the form is going to look almost the same as the above:
1. Rating: Numeric Range type Minimum value is 0 and Maximum value is 1 the Step value is 0.1.
1. Optional advanced work for the curious or show off students: (Not shown in the screenshot.) Add a for tickmarks for 0,10,20,30,40,50,60,70,80,90,100 but the values will still be in decimals. (example: value 0.10 is labeled 10 because the rating is a percent which can be written 2 ways.) The best reference for this is MDN. -HTML5-
Note: Browser support is still lacking because HTML5 is a living standard so nobody ever supports it fully. You won't see full support for this in the browser and different browsers will handle it differently; hence the need for browser testing. You won't get consistent results from this one even if you do it 100% correct.
2. Birthday Type Date Input: Minimum date...
SOLUTION.PDF
SOLUTION.PDF

Answer To This Question Is Available To Download

Submit New Assignment

Copy and Paste Your Assignment Here
Have files?