Intro to Dynamic HTML Intro to Forms

1
Intro to Dynamic HTMLIntro to Forms

• Mendelsohn IT-130

2
Dynamic HTML

• DHTML sounds like a standard (e.g. HTML, XHTML)
  it is not. It is simply a shorthand for dynamic
  HTML.
• Dynamic implies a page that can change in
  behavior or appearance after it has already been
  downloaded to the client and displayed.
• Many still argue over exactly what is meant by
  dynamic HTML.

3
Examples of DHTML

• Client-side scripting (e.g. JavaScript, VBScript)
• Server-Side Scripting (e.g. Active Server Pages,
  Java Server Pages)
• Forms
• Animations (e.g. Flash)
• Java applets (no longer very common)
• DOM (Document Object Model)
• CSS (Cascading Style Sheets)

4
Example The BMR Calculator

• 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.as
  p

6
Another example Nike Air

• DHTML Techniques in use
• Flash
• Interactive responses such as mouse-over effects
• http//www.bigspaceship.com/archive/nikeair/

7
Easy tiger.

• Dynamic pages such as those involving animations
  can be lots of fun to create, but dont overdo
  it!
• Long flash intros, hyper-animated gifs,
  distracting colors/backgrounds, etc can prolong
  the time to display your pageand 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.

8
Ask yourself

• Does this technique/design increase the usability
  of my site?
• Does this technique/design help to convey
  information?

9
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)

10
How to create 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.
• Dont forget about making your layout organized
  and easy on the eye tables are usually used to
  organize forms 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 well focus on learning the elements to
  create and layout a form on your web page.

11
Very basic form

• The form tag groups the all of the elements
  inside together.
• This 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.

What if you put the second form element (reset)
outside of the form tag?
12
Better

• Now we have a way of referring both to the form
  itself as well as to individual elements of the
  form.
• Note the naming conventions
• Button names begin with btn
• Text names begin with txt
• Names separated by capital letters
• More later.

13
Forms Text Boxes

• Not to be confused with text areas
• Attributes include
• maxlength sets the maximum value of characters
• Its 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.
14
Forms Text Areas

• Similar to text boxes, but allows the user to
  type in lines of information.
• Instead of tag, uses tag.
• Attributes include cols, rows to specify the
  initial size of the box. (Not always precise).
• rows"5"

15
Forms Buttons

• Youll usually want to include the value
  attribute. This value is displayed inside the
  button.
• name"btnObama" /
• name"btnMccain" /
• Later you will learn to add another component to
  this tag connecting the button to a script.

16
Naming conventions

• In programming it is a very good idea to come up
  with a consistent style of naming things.
• 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.
  
• Many will thank you
• Project collaberators
• Later debuggers
• You! (down the road)

17
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 you may decide
• Nb These conventions are my own (although others
  may use something similar). They are not
  official.

18
Forms Buttons - Submit

• Because submit is so common in forms, it has its
  own shortcut button.
• The value attribute of the submit button has a
  default value of Submit Query.
• You can override this value with your own if you
  like.
• value"Submit Me! "/

19
Forms Submit button

• Of course, the purpose of forms is to parse the
  information entered by the user and do something
  with it.
• Doing something with the information is usually
  the job of a script.
• We can use the onClick attribute to connect our
  button to a script.
• valueSubmit Form namebtnSubmit
  onClickrunSomeScript( )

More on this later
20
Forms Buttons - Reset

• Reset is also a common button and also has its
  own shortcut button.
• The submit button has a default value of Reset.
• You can override this value with your own.
• This button erases the entire form.

21
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 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.

22
Forms Checkboxes contd

• Who are your favorite composers?
  
• Beethoven namechkBeethoven" value"beethoven" /
  
• Bach value"bach" /
  
• Mozart value"mozart" /
  
• Brahms value"brahms" /
  
• Stravinsky namechkStrav" value"stravinsky" /
  
• Important 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.
• This will be explained when we do JavaScripts.

23
Forms Checkboxes contd

• Do you agree to these terms?
  
• I agree value"agree" checked /
• 
  
• I don't agree name"chkDisagree" value"disagree" /
  
• Note the checked attribute. This places a check
  in the box automatically when the page is
  displayed.
• This attribute does not require a value.

24
An aside

• Note the slightly sloppy appearance of each line.
• You might want to make a small table so that you
  can line up each prompt (Bach, Mozart, etc) with
  the checkboxes in neat rows.

25
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.
• Again you can include checked to give a default
  selection.
• Do you agree to these terms?
  
• I agree value"agrees" /
  
• I don't agree name"radAgree" value"disagrees" /

Note that the name attribute has the same value
for both.
26
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?
  
• Beethoven r" value"beethoven" /
  
• Bach value"bach" /
  
• Mozart value"mozart" /
  
• Brahms value"brahms" /
  
• Stravinsky name"radFavComposer" value"stravinsky" /
  

Again, note how the name attribute has the same
value for all options.
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
  tag.
• What year were you born?
  
• 1953
• 1954
• 1955

28
Forms Select contd

• 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. (E.g. What year were you
  born?)

29
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.

30
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.
• value"cookie_info" /

31
Forms Keep em neat

• All three versions make use of tables.
• Careful thought has been given to keeping the
  layout neat and uncluttered.

32
Lab Mortgage Calculator

• Textbook p. 91-96
• Create a folder called mortgage on your local
  computer.
• Copy the files from here to the mortgage
  directory.
• Note that this book does NOT use our naming
  conventions for form elements. For this lab, be
  sure to use the books names for all form
  elements as they are referred to in the
  JavaScript.
• The books is not following XHTML conventions
  (e.g. closing tags), but well forgive it for
  now.
• Respect cases!! (i.e. upper vs lower case)
• There is even a typo in the book on page 94 on
  the Calculate button line. It should say
  onClick. Though the lower-case might work, it
  can easily lead to problems later.