Simmons University



Class by class assignments for Chapter 4Assignment 0 – Chapter 4 – Basic FormsIn the first part of this assignment you will learn about the kinds of elements you can put on a form and what each is used for.At this point do not worry about the method and action attributes in the <form> tag --- that will come soon. Just focus on the kinds of elements you can put in a form.Read: For this assignment I would like you to read the following and in this order:A very short introduction – read and This will give you 'the lay of the land' and why you need fieldset, legend, label. Don't worry about all the details – they are coming next.Either the forms tutorials at or the one at are many, many input types – most of which you will rarely use. Read over the list and know where you can find them if you need them.Do Create a page which has a form on it. The form should ask the user for a first name, a last name and an email address ( of type= ''email"). Each element should have a name and id. (Note: The name attribute in HTML has been deprecated, but it is still used when we send data from a form to a script on a server.)Do not worry initially about the choice of method; we will discuss this a bit later.Pay attention to:When you use a text vs when you use a textarea.When you use radio buttons vs when you use check-boxes.How you find out which radio button was selectedHow you find out whether or not a check box was checked.How you find which option in a drop-down list was selected..Read: The_name_vs_id_attribute in this folder. about events. Button, button, who's got the button in this folder. Forms_and_Events_Notes0 and Forms_and_Events_Note1 in this folder, which refers you to Forms_and_this, also in this folder.Do: Drill yourself on the syntax for the various form elements. You need to know these cold. Starting from scratch, design a form with the two parts. The first should have the legend ‘personal information’ and a place for name, phone number and email. (Use the new email input type, per w3schools). The second part should be called ‘demographic information’ and have radio buttons to choose student type from undergraduate/graduate/other and a drop-down box to select citizenship (U.S., Canadian, Dual, Other; best practices are for the first entry to have a short phrase such as Select One). All form elements should be labeled appropriately on the page and have appropriate id’s. Put a very simple style sheet in the head. Design a page for a pizza parlor – i.e. to order on line. Allow a maximum of 3 pizza styles, but up to 4 pizzas of any given style. Plan first how you want to do this. Use a simple style sheet in the head, but don't worry about finding the best images to use. If you wish, include a aria compliant icon for some of the toppings. Clicking on the icon should have some result. We will have a more interesting form problem in class, which will include buttons and this.Read This is part of a tutorial on forms and, oddly enough, the table of contents is at the bottom of the page. As you read it, do not worry about the styling. Some of this is very sophisticated, but try to get up to thruogh the section on Drop-down controls in the page "Other Form controls". Note: On the page "How to structure a web form" you will come across this odd bit of code: <label for="username"> <abbr title="required" aria-label="required">*</abbr> </label> To understand this, please read (now) How to Require a Form Element in an ARIA_Compliant Way (in this folder.) Read on how to make sure your forms are accessible. As always, making forms accessible to all benefits even those users who don't depend on accessibility accomodations.Assignment 1 – Chapter 4 – Basic EventsRead: Forms_and_Events_Notes 0, 1, and 2. Some of this is review from Assignment 0.Read as Review: and NOTE: I don't know why they includes dataset which has less wonderful support and when the very common element is select.Do: When in doubt, there are two sites that let you see how widely something is implemented, and you should become famililiarr with both. Please check out both type = email and dataset at and These sites are different --- caniuse is great for a one-off question, and quirksmode has tables which make it easy to see many things at once.Do: Create a very basic webpage with a fieldset for personal information (holding familyName, givenName and email) and a set of radio buttons for expected year of graduation. (3 choices- you select one to be checked initially) and checkboxes fortype of music enjoyed (3 choices) Read: as a simple introduction to events. Read: Forms_and_Events_Note2A in Chapter 4. You will find it helpful if you download the summary in Forms_and_Events_Note3. Both of these documents are concerned with how to get data from a form and use it to make different things happen. There are a lot of small programs here. As you examine them,write a note of what is going on in each program, and mark anything which doesn't make sense. Your note should be informative about what attributes are used and how. For example: In lst23-01.html there are several button are on the page, each with a value attribute of half of a well-known duo. When a button is clicked on the onclick( ) event handler sends this (which refers to the button being clicked) to a displayTeam function, defined in the head. The displayTeam( ) function checks the value attribute of what was passed to it and puts up an alert box, with a message appropriate to that value. Send your note(s) to yourself by email so that you can discuss them with small groups as needed. Do: Take the web page you just created and add two buttons. The first should have the value "When I graduate" and should alert what radio button was selected. The second button should have the value "Show music favs". When that button is clicked it should call a function which concatenates the types of music favored and alerts it. Read: This page will tell you NOT to use inline event handlers. For now we will ignore this advice. We are writing fairly strraightforward code, and inline handlers are fine for this. When we get to Unit 5 and jQuery we will cycle back on events and event handlers and learn how to handle more complex situations. Forms_and_Events_Note2A in Chapter 4. You will find it helpful if you download the summary in Forms_and_Events_Note3. Both of these documents are concerned with how to get data from a form and use it to make different things happen. We NEVER use frames; so you may ignore any material you come across on that matter.Do NOT worry about event handlers which are specific to particular browsers. We will use code which works for all browsers. As noted above, for complex event handling, we will use advanced tools, but, with or without those techniques, you will find it easier to make your code clean by using functions. In class we will be discussing what you have said, going over this and examining roll- overs. The information on rollovers is in theWord docx Rollovers_imagine_that and the URLs are near the bottom of the Note2a, both in this folder. You will also be designing a page with event handlers in class. Assignment 2 – Form validationThere are 4 subsections to this work. Parts A and D are mandatory. Parts B and C depend on your knowlede and comfort level – use your own discretion.Read: Forms_and_events_Note3 in this folder; it is will remind you about how to get a hold of attributes and choices the user made for client-side form validationGetting Ahold of Form Elements?using various methods – this will help organize the various methods preferred by different authors. (This file is in the Reference section of Chapter 4.)Examine the PrototypeSelectValue script in the same place. It shows you 3 different ways to find out what element in a dropdown (option in a select element) has been selected. Regular expressions: We are going to need to know a little bit about regular expressions. If you are already fairly comfortable with basic regular expressions, you make skip this reading and just review them with the very short Regular Expresssions – part 0 and 1 in Chapter 4.If you have never seen regular expressions before, or if the details are fuzzy, I suggest that you start with the Regular Expressions tutorial , linked to from the Chapter 4 page.Then, in the Simmons Library go to the eBook Beginning Regular Expressions and Read Chapter 19 on how to use regular expressions in JavaScript. (Chapters 3 -7 have an explanation of how to build regular expressions.)If you don’t like the Beginning Regular Expressions book, go to the excellent JavaScript Bible by Danny Goodman 6th edition in the Simmons Library and read Chapter 42 (or Chapter 45 of the 7th editon at) on regular expressions. Both books show you how to use regex in your script.Another alternative is Introducing Regular Expressions by Jrg Krause or Beginning Regular Expressions by Andrew Watt, both in the Simmons Library Cementing your knowlede of form elements – Do as much as you need. Go to Chapter 9 of the JavaScript Bible 6th edition by Danny Goodman . in the Simmons Library. This is one of my favorite references, even though its discussion of much older browsers is dated. (My other favorite is JavaScript: the Definitive Guide- the edition is from 2011 and the Seventh is from 2020.. ) However, that book is better for cementing your knowledge than for learning from scratch. Also, please note that I prefer the syntax document.myForm or document.forms[‘myForm’] to document.forms[0] Because it is easier to follow and the numbering of the forms may change if you re-arrange your page. No matter what syntax you use, the window. qualifier is unnecessary. As you read through Chapter 9, it may help you to write an explanation of what is happening in all the following listings:Short bit of code on same page as Figure 9.1 in the subsection named form.elements[] property4 equivalent references in the section named Forms Controls as Objects (what is the logic behind each reference?)Listing 9.1Listing 9.2Listing 9.3Listing 9.4Listing 9.5 Why is onsubmit coded to return false?Listing 9.6At the end of that chapter, do Exercises 2-4 (note that the answers are right below the exercises.)Read Fortunately for us, HTML5 introduced features which make our client-side validation easier. In preparation for that project, and gradually building in complexity and sophistication, please read: As usual a gentle introduction. Please notice that in one of the examples near the end of the page they check to see that the data entered is a number. This is more complete than the w3schools page, and is nice and organized. It's modern in terms of the elements it uses, but it doesn't include the use of patterns, min, max etc. On the other hand, I like the way it returns the focus to the problem element. This is an excellent article on how to use the pattern attribute and some simple regular expressions. The email type may now be validated automatically by HTML5, and the "Going More Advanced" introduces an approach which is better handled after you know jQuery and more about events (so skip it.) This is a modern article, and it includes ways to have your css change when the input is invalid (you can skip over that for now,; you will return to it in the Form Validation project.) The article has some common patterns (e.g. for phone numbers in North America) and also links on how to make sure a credit card number is valid, and other useful topics. Read it once, but expect to return to it. It has examples using patterns, but you'll need to look for them. ................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download