Intro to Dynamic HTML Intro to Forms

1. Intro to Dynamic HTMLIntro to Forms Mendelsohn – IT-130

2. Dynamic Web Pges • “Dynamic” implies a page that can change in behavior or appearance after it has already been downloaded to the client and displayed. • Contrast with static web pages, which are those that do not change in any way once the page has loaded.

3. Examples of dynamic web pages • Roll-over buttons (buttons that change appearance when the user hovers over the button) • Forms • Animations (e.g. Flash) • Client-side scripting (e.g. JavaScript, VBScript) • Server-Side Scripting (e.g. Active Server Pages, Java Server Pages) • Java applets (no longer very common)

4. Example: The BMR Calculator • A form • Allows the user to enter some information about themselves and estimates the their basal metabolic rate (the number of calories their body consumes at rest in a day). • Dynamic HTML being used: • A form to enter data • A client-side JavaScript that parses the form and uses the data to come up with a calculated value • View it here FYI: Calculating BMR is a debated topic in medical/nutrition circles. Be careful of which formula you use.

5. Another example – CDM Tutor Search • DHTML Techniques in use: • Form • Server-side scripting (Active Server Pages) • http://facweb.cs.depaul.edu/tutors/tutor_search.asp

6. Easy tiger…. • Dynamic pages such as those involving animations can be lots of fun to create, but don’t overdo it! • Long flash intros, hyper-animated gifs, distracting colors/backgrounds, etc can prolong the time to display your page—and can be very distracting. http://www.tallyhouniforms.com/ http://www.bvs.com/bank/bank-training.asp http://www.thecreationmuseum.org Think of these principles as you surf.

7. Ask yourself: • Does this technique/design increase the usability of my site? • Does this technique/design help to convey information?

8. New Topic: FORMS • Our first venture into creating interactive/dynamic web pages. • Web page takes input from the user and processes it in some way: • Calculator (e.g. BMR, Mortgage, etc) • Stores information in a database (registering a purchased product, signing up for a mailing list) • Submits information (e-mail customer support)

9. Overview of Forms • Forms are made up of a group of input elements usually referred to as ‘controls’ or ‘elements’. • Form controls such as buttons, text-boxes, drop-down boxes, check-boxes, etc are very easy to place on a page using the HTML techniques we have used so far. • Don’t forget about making your layout organized and easy on the eye – tables are usually used to organize forms on a web page. A little later in this course we will examine techniques to position elements on a web page. • Doing something with the information from a form requires writing instructions in the form of a scripting or a programming language (JavaScript, ASP scripting, etc) • For now we’ll focus on learning the elements to create and layout a form on your web page. • Once we begin JavaScript you will learn how to make your web pages respond to input from a form.

10. Basic Form - incomplete: <form> <input type="text" /> <input type="reset" /> <!-- other elements here…--> </form> • The ‘form’ tag groups the all of the elements of a form together.

11. Form outline - correct… <form name="userInformation"> <input type="text" name="txtFirstName"/> <input type="reset" name="btnReset"/> </form> • Note how each element has a ‘name’ attribute • The ‘name’ attribute in the form tag is important when you want to pass form information to a script (which is almost always the case). • It is also important if you have more than one form on a page. • For this reason, we need a way to refer to the specific form as well as to each individual element of the form. • Also note the naming conventions: • Button names begin with ‘btn’ • Text names begin with ‘txt’ • Names separated by capital letters • More on naming conventions for form elements later….

12. Forms: Text Boxes • <input type="text" name="txtFirstName" /> • Optional attributes include • maxlength: sets the maximum value of characters • It’s a good idea to include this attribute as the default value for this attribute is unlimited!. • size: sets the length of the box Note: The prompt (“Name:”) is not printed by the form. You must code for it yourself.

13. Forms: Text Areas • Similar to text boxes, but allows the user to type in lines of information. • Instead of <input> tag, uses <textarea> tag. • Optional attributes include cols and rows to specify the initial size of the box. (Not always precise). <textarea name="txtarComments" cols="25" rows="5"> </textarea> Note: You need a separate closing tag. You can NOT use the /> shortcut for the textarea tag.

14. Naming conventions • In programming it is a very good idea to come up with a consistent style of naming things. • We’ve already discussed naming conventions for FILE names. • Now we’ll add a differentnaming convention for FORM element names. • Sometimes a project manager will dictate the conventions. Other times it is up to you to decide on one. However, it is an excellent idea to have one as it will help clarify your coding. • In this course, you MUST follow naming conventions once they are introduced. In the “real” world, it looks sloppy/careless/unprofessional when programmers fail to follow conventions. • Many will thank you: • Project collaberators • Later debuggers • You! (down the road)

15. IT-130 Naming convention for form elements • For this course you are required to use the following convention when naming form elements: • Buttons: btnName • Text boxes: txtName • Text areas: txtarName • Checkboxes: chkName • Radio buttons: radName • Select menu: selName • Hidden elements: hidName • Others not specified here: you may decide… • Nb: These conventions are my own (although others may use something similar).

16. Forms: Buttons • You’ll nearly always want to include the ‘value’ attribute. This value is displayed inside the button. <input type="button" value="Obama" name="btnObama" /> <input type="button" value="McCain" name="btnMccain" /> • Later you will learn to add another component to this tag connecting the button to a script.

17. Forms: Buttons - Submit • Because submit is so common in forms, it has its own ‘shortcut’ button. • The value attribute of the submit button displays text on the button • If you don’t enter this attribute, the web page defaults to the text: ‘Submit Query’. • Eg: <input type="submit" name =" btnSubmit" /> <input type="submit" name ="btnSubmit" value="Submit Me! "/>

18. Getting your button to do something • Of course, the purpose of forms is to take the information entered by the user and do something with it. • Reading (“parsing”) the form and then “doing” something with that information is usually the job of a script. • We will use the ‘onclick’ attribute to connect our button to a script. <input type= " button" value=“Submit Form” name= " btnSubmit " onclick= " runSomeScript( ) "> More on this later…

19. Forms: Buttons - Reset • Not used very much any more as users sometimes click this button inadvertently and end up erasing everything they have typed. For this reason, many web designers do not include this button. We won’t use it in this course. <input type= "reset" />

20. Forms: Checkboxes • When you want to give the user multiple selections, use a checkbox. If you want to limit the user to ONE selection, use a radio button. • Clicking in the box places a checkmark inside. • Notice that unlike with buttons, the value attribute has NO bearing on the appearance of the box. The value of ‘value’ becomes important when it is passed to a script. More on this later.

21. Forms: Checkboxes contd Who are your favorite composers? <br /> Beethoven: <input type="checkbox“ name=“chkBeethoven“ /> <br /> Bach: <input type="checkbox“ name=“chkBach“ " /> <br /> Mozart: <input type="checkbox" name=“chkMozart" /> <br /> Brahms: <input type="checkbox" name=“chkBrahms" /> <br /> Stravinsky: <input type="checkbox" name=“chkStrav" /> <br />

22. Forms: Checkboxes contd Do you agree to these terms? <br /> I agree: <input type="checkbox" name="chkAgree" checked="checked" /> <br /> I disagree: <input type="checkbox" name="chkDisagree“ /> <br /> • Note the ‘checked’ attribute. This places a check in the box automatically when the page is displayed.

23. Forms: Checkboxes contd Do you agree to these terms? <br /> I agree: <input type="checkbox" name="chkAgree" /> <br /> I disagree: <input type="checkbox" name="chkDisagree“ /> <br /> • Pop quiz: Why is the checkbox a poor choice here? • Answer: Because the user could check both buttons.

24. An aside: • Note the fairly sloppy appearance of each line. • Any good page designer will put some thought into giving their forms a neat appearance. • We will discuss how to do this at a later time. • If you want a quick and dirty (though not entirely legitimate) way, use the &nbsp; entity.

25. Forms: Keep ‘em neat • This requires use of some slightly challenging CSS • We will discuss this later in the course • Careful thought has been given to keeping the layout neat and uncluttered.

26. Forms: Select Box • Similar to radio box, except that the options are hidden until the user clicks. Once the user has chosen, the options are re-hidden. • Useful for situations where you have many possible options to choose from. (E.g. “What year were you born?”) • While you can easily hide 100+ years inside a select box, you could not do so with a radio button! (discussed next)

27. Forms: Select • Does not use the ‘input’ tag, uses ‘select’. • Yields a drop-down box from which the user can choose from a list of options. • Each item in the menu is created using the <option> tag. • Important: Be sure that you do not confuse the value inside the option tags, with the prompt (which is what your viewers see) which is between the ‘option’ tags. What month were you born? <br /> <select name="selMonthBorn"> <option value="jan">January</option> <option value="feb">Febuary</option> <option value="mar">March</option> </select>

28. Select Box: Value vs Option • As mentioned previously, be sure not to confuse the value inside the option tags, with the prompt (which is what your viewers see) which is between the ‘option’ tags. However, there is no reason why they can’t be the same. Sometimes – though not all that often – this is an option: What year were you born? <br /> <select name="selYearBorn"> <option value="1953">1953</option> <option value="1954">1954</option> <option value="1955">1955</option> </select>

29. Forms: Radio Buttons • Similar to checkboxes except the user may only select one option out of the group. • Checking one selection automatically deselects any other. • ** All buttons in a given group must have the same name. • As with checkboxes, you can include the ‘checked’ attribute to give a default selection. Do you agree to these terms? <br /> I agree: <input type="radio" name="radAgree“ /><br /> I don't agree: <input type="radio" name="radAgree“ /> Note that the ‘name’ attribute has the same value for both.

30. Forms: Radio Buttons contd • Again, use radio buttons when you want the user to be limited to only one possible choice: Who IS your favorite composer? <br /> Beethoven: <input type="radio" name="radFavComposer" /> <br /> Bach: <input type="radio" name="radFavComposer" /> <br /> Mozart: <input type="radio" name="radFavComposer" /> <br /> Brahms: <input type="radio" name="radFavComposer" /> <br /> Stravinsky: <input type="radio" name="radFavComposer" /> <br /> Again, note how the ‘name’ attribute has the same value for all options.

31. Forms: File • Shows a textbox and a Browse button that allows the user to select a file from their computer. • E.g. Used to choose a file to attach to an e-mail message. • We will not be using this control in this course. <input type="file" name="fileAttach" />

32. Forms: Hidden • Used as a convenient way to pass information (relating to the form) to a script that the user has no need to see. <input type="hidden" name="hidCookieValue" value="cookie_info" />