HTML Chapter 11

1
HTMLChapter 11

• Forms
• Interactive Pages

2
User Input

• So far
• Click on hyperlinks
• Scroll
• Browser features
• Tool bars
• Menus
• Time for more ...

3
Forms !

• Let user send data
• Choices
• Information
• Text
• Check box
• Radio buttons
• Selection list
• Action button

4
Bugs Bee Wee Fig. 11.1

• nameKermietheFroguseEemailkfrog40lilly.pad
  .net
• Submit button
• encrypts form data (only a little)
• sends to (remote) target
• Human can decrypt
• So can a program ! CIS 240

5
Our focus

• ltformgt ... lt/formgt
• ltformactionmailtoscarab_at_bugsbeewee.commethod
  postgt
• methodget has restrictions

6
Limits to emailpost -- User

• User needs email a/c
• Correctly configured
• Not truly encrypted

7
Tasks for emailpost -- Receiver

• Must parse data received
• Dense
• nn ? nn is numeric code for character
• in hexadecimal
• _at_ ? 40 (decimal 64)
• Store in data base (usually)
• Respond to users request (usually)

8
How to

• Design
• Easy to read
• Easy to use
• Familiar look n feel
• order of elements
• predictable clues
• graphic (shapes)
• text (prompts)
• mouse keyboard behavior

9
ltformgt ... lt/formgt

• action
• required (but there are tricks, p. 308)
• can send to server CGI script
• defaults to methodget
• ltform action http//www.bugsbeewee.com/cgi-bin
  /bugorder.cgigt
• can send to email account
• ltform actionmailtoscarab_at_bugsbeewee.com
  methodpostgt
• class
• id

10
ltformgt ... lt/formgt

• enctype p.305 research if sending non-ASCII
  data
• need if sending non-ASCII data to script
  (methodget)
• text/plain (usual)
• default
• ensures correct transmission
• not true encryption !!!
• space ?
• non-alphanum chars ? xx (hexadecimal)
• fieldnamevaluefieldnamevaluefieldnamevalue...
  
• multipart/form-data (non-ASCII data)
• used with methodpost

11
ltformgt ... lt/formgt

• method
• required (defaults to get)
• http//www.bugsbeewee.com/cgi-bin/vote.cgi?goodbug
  lb
• similar to usual GoTo URL request
• vote.cgi is a script
• Perl
• Fig. 11.3
• JavaScript
• ...
• methodpost
• sends (barely) encrypted text message to email

12
ltformgt ... lt/formgt

• name
• essential for JavaScript
• essential if different forms on same page
• onsubmit
• style
• may not cascade to buttons, text areas
• target
• put response in another window or frame
• title
• somewhat like name, see p.307

13
Intrinsic Events

• Usual (user) events can be tied to JavaScript
  code
• mouse keyboard actions
• New (in forms) events
• onsubmit
• User clicks a submit button
• onreset
• User clicks a reset button

14
Input container

• ltinput ... /gt
• empty
• checked
• maxlength
• name
• namevalue pairs KIS
• computer vs. webber
• case !!!
• programmer-friendly
• start with a letter (KIS)
• size
• title

15
Input container

• ltinput ... /gt
• checked
• maxlength
• name
• namevalue pairs KIS
• computer vs. webber
• case !!!
• programmer-friendly
• start with a letter (KIS)
• size
• title

16
ltinput gt

• type
• what UIF element will the user see
• text
• password
• file
• checkbox
• radio
• reset
• submit
• button
• image
• hidden
• value

17
Local action controls

• P.319-21 ltinput type /gt
• type
• submit
• reset
• button ??
• image ??

18
ltbuttongtcaption and/or imagelt/buttongt

• More flexible than ltinput typebutton /gt

19
Text input

• ltinput typetext /gt
• lttextarea gt lt/textareagt

20
Select container

• Drop-down list of selections
• ltselect gt
• ltoption gtlt/optiongt
• lt/selectgt
• About those
• ltoption valueabbrevgttextlt/optiongt

21
ltselect gtltoption gt

• ltoptgroup labelGroup labelgt
• ltoption gt lt/optiongt
• lt/optgroupgt

22
ltfieldsetgt

• ltfieldset gt text lt/legendgt
• ltlegendgt lt/legendgt
• Text elements
• lt/fieldsetgt

23
tabindex
24
XHTML Form module
25
CGI scripts