Forms

1
Forms

• Most application interface with users through a
  Graphical User Interface (GUI)
• GUI objects are components that allow users to
  enter information. They are largely standard
  across many modern applications
• A form is a collection of GUI objects that work
  together to interact with a user and accomplish a
  task.

2
Examples of GUI Components

• Text ?
• Text area ?
• Clickable Components
• Radio button ?
• Check box ?General Buttons ?
• Drop down menu ?
• Reset and submit ?

3
The Input Tag
Use this tag to create most of the GUI components

• ltinput type"button" value"button name" /gt
• ltinput type"text" size"10" /gt
• ltinput type"button" value "click to display" /gt
• ltinput type"submit" value "click to submit" /gt
• ltinput type"reset" value"click to reset" /gt
• ltinput type"hidden" value"user does not see
  this" /gt
• mathltinput type"checkbox" value"math" /gt
• yesltinput type"radio" name"group" value"yes" /gt

Note hidden components are useful for adding
data to a form that a user does not have to
enter, like time of day.
4
Creating a group of radio buttons

• yesltinput type"radio" name"group" value"yes"
  checked"checked" /gt
• noltinput type"radio" name"group" value "no"
  /gt
• maybeltinput type"radio" name"group"
  value"maybe" /gt

• Notes
• Users can select ONLY one of a group of related
  ratio buttons. In the above example, clicking on
  'no' will deselect 'yes'
• The name attribute ties radio buttons together
• Related radio buttons set the name attribute
  value to the same text
• The above example uses the attribute value
  'group'.
• The value attribute is needed to submit properly

5
Creating a Group of Check Boxes

• mathltinput type"checkbox" name"math"
  checked"checked" /gt
• englishltinput type"checkbox" name"english/gt
• scienceltinput type"checkbox" name"science"/gt

• Notes
• You can click more than one check box.
• The name attribute can have different values

6
Creating a Drop Down Menu

• ltselect name"sodas" gt
• ltoption value"coke"gtcokelt/optiongt
• ltoption value"Pepsi"gtPepsilt/optiongt
• ltoption value"Dr. Pepper"gtDr. Pepperlt/optiongt
• lt/selectgt
• Notes
• The ltselectgt tag must have a name attribute, or
  it will not submit
• You need the value attribute for proper form
  submission.

7
Text areas and text components

• ltinput type"text" size"10" name"firstname"
  /gtltbr /gt
• lttextarea rows"3" cols"20" name"comments"gt
• lt/textareagt
• Notes
• Text components only allow users to enter one row
  of information the size attribute specifies the
  width of the component
• Text areas allow multiple rows using the rows.
  The cols attribute specifies the width of each
  row.
• Text area components use the lttextareagt tag, with
  its closing counterpart
• The value attributes for these components
  contains the data the user types.

8
Constructing a form in HTML

• ltform gt
• . . .
• Insert all your form elements here
• . . .
• lt/formgt
• Use the form tag makes all of the GUI elements
  are grouped together in a single unit

9
Submitting Forms

• ltform method"post" enctype"text/plain"
• action"mailtoharveyd_at_sou.edu" gt
• . . . Put all your GUI components here . . .
• ltinput type"reset" value"click to reset" /gt
• ltinput type"submit" value"click to submit"
  /gtlt/formgt
• Notes
• Forms can submit by email (above example), to a
  server side program, or be processed locally with
  JavaScript
• The reset button clears all user input the
  submit button sends the form for processing
• IMPORTANT Any component missing a name attribute
  WILL NOT SUBMIT

10
Submitting to Server Side Programs

• ltform method"post" enctype"text/plain"
  action"http//www.mydomain.com/handler.cgi"gt
• Advantages over e-mail submission
• It does not matter if users have e-mail set up
• Some browsers output warning messages that will
  discourage users from submitting
• Submits automatically without bringing up the
  e-mail program
• Another consideration
• text/plain is not encrypted data. There are no
  security protections. For e-commerce
  applications, it is important to encrypt data so
  critical information like social security, and
  credit card numbers are not revealed to programs
  listening for malevolent reasons

11
Common Gateway Interface (CGI)
CGI is the protocol for sending Web information
between computers

• GUI components submit as namevalue pairs of data
• ltinput type"radio" name"myGroup"
  value"myValue" /gt submits as myGroupmyValue
• Every letter has a hexadecimal character code
  (ASCII). CGI replaces some characters with their
  ASCII codes. Spaces with 20, colon with 3A, and
  slashes with 2F.
• The plus is for lines of text area components
• The character is a delimiter between pairs
• The following is a CGI example
• namedangroupyesinteresthighareaoregoninfo
  cool20sitesitehttp3A2F2Fcs.sou.edu/harvey
  d
• e-mail programs show the CGI in a more readable
  form

12
Processing Forms Locally
We need JavaScript!!

• HTML can display forms. It cannot process them.
• JavaScript can process forms locally
• Advantages of local processing
• Lesson Internet traffic
• Reduce the load on server computers
• Greater security, since the local computer is not
  seen by other computers
• Ensure that data sent to servers is correct
  before submitting

13
Important Reminders Regarding GUI Components

• Field without a name attribute will NOT submit to
  a server or to e-mail
• Will Submit ltinput type"text" name"data" /gt
• Will not submit ltinput type"text" /gt
• Radio buttons must have a value attribute for
  servers to parse correctly.
• ltinput type"radio" name"rads" value"myRadio"
  /gt
• ltinput type"radio" name"rads" /gt
• The first will submit CGI radsmyRadio, the
  second will submit radson. The server will not
  know which one of a group was selected.
• All radio buttons of a group must have their name
  attributes set to the same thing. Otherwise, they
  will work like check boxes.

14
JavaScript can do more

• JavaScript begins where HTML leaves off
• How?
• Perform calculations
• Interacts with the user
• Adds to the browsing experience of the user
• Manipulates and alter the HTML tags, and what
  displays

• Examples
• Roll over images
• Games
• Process Forms at the client side
• Quotes of the day
• Slide Shows
• Todays Date
• Calculators
• Online quizzes

15
(No Transcript)
16
Programming Languages

• First Generation Machine Language
• All ones and zeroes (11100101 could be an
  instruction)
• Second Generation Assembly Language
• One line of symbols for each machine language
  instruction
• Examples add ax, 14 or mov bx, 6 or cmp ax, bx
• High Level General Purpose Imperative (Java)
• More readable to most human beings
• Tell the computer step by step what to do and how
  to do it
• Scripting interpretive languages
• Designed for a special purpose
• JavaScripts purpose is to work with HTML
• Declarative English like (SQL)
• Special purpose
• Tell the computer what to do, how is its problem

Note Visual Basic falls between high level and
declarative
17
Basic Control Structures
All computer processing done this way

• Sequence Structure
• Do this
• Do that
• Do something else
• Do that again
• Do another thing
• Condition or Transfer Structure
• IF this THEN do that
• ELSE do the other thing
• Iteration or Loop
• WHILE this true DO something
• DO something UNTIL this false
• FOR many times DO something

18
JavaScript verses Java
These languages have similar syntax, but are very
different

• Java (General Purpose)
• Create any computer applications
• Create applets to work in their own browser
  window area
• JavaScript (Special Purpose)
• Mini-language that only executes in a browser
• Initial purpose Validate client-side forms
• Present purpose Enhance HTML capabilities
• Netscapes original name LiveScript
• Syntax is very similar to Java

19
Getting Into JavaScript
Similar concepts to CSS style sheets

• In-line Script
• Use special event attributes, like onclick,
  onmouseover, onload, and many more
• Document Level Script
• Use the ltscriptgt tag
• This differs from CSS in that the ltscriptgt tag
  can go anywhere in a document
• External Script
• Use the ltscriptgt tag and refer to an external
  javascript file.
• This method is preferred because JavaScript will
  often make it impossible to validate the Web
  pages.

20
Starting a Script
Examples http//cs.sou.edu/harveyd/classes/cs210/
examples/week5/alertHtml.htm http//cs.sou.edu/ha
rveyd/classes/cs210/examples/week5/alertScriptHtml
.htm

• The Script tag (To display a message in a dialog
  box)
• ltscript type"text/javascript"gt
• alert("HelloWorld!")
• lt/scriptgt
• We need the type attribute (identifies the
  scripting language)
• perlScript, vbScript Other client side scripts
• php, asp Other server side scripts
• Script to an external file ltscript
  src"hello.js" type"text/javascript"gtlt/scriptgt
• Older deprecated version of the script tag. Do
  not use!!ltscript language"JavaScript1.3"
  type"text/javascript"gt

21
Words of Caution

• Browsers try to do something when HTML syntax is
  wrong. They will just ignore what they do not
  understand
• Browsers ignores CSS styles that it does not
  understand.
• Browsers will ignore all JavaScript once there is
  even one error in syntax.
• Be very careful about exact syntax, and save
  yourself lots of grief
• If your script does not work, go to Firefox
  tools, and click on Error Console. It will point
  out the line of the error

22
A JavaScript Example
http//cs.sou.edu/harveyd/classes/cs210/examples/
week5/whoThere.htm
Key Definition A string is a sequence of letters

• ltscript type"text/javascript"gt
• alert("Who is there?")
• lt/scriptgt
• ltbr /gtFirst alert done
• ltscript type"text/javascript"gt
• alert("I\'m back!")
• lt/scriptgt
• ltbr /gtAll done
• lt/bodygt
• lt/htmlgt

• lthtmlgt
• ltheadgt
• ltscript type"text/javascript"gt
• alert("HelloWorld!")
• lt/scriptgt
• lt/headgt
• ltbodygt
• JavaScript Test

Note Always end JavaScript statements with a
semicolon Note Always enclose strings of text
with single or double quotes Note The \'
illustrates a break sequence (we really mean ').
23
JavaScriptwith Check Boxes

• lttablegt
• lttrgtlttd align"center" colspan"3"gtWhich
  Languages do you know?lt/tdgt
• lt/trgtlttrgt
• lttdgtJavaScriptltinput type"checkbox"
• onclick"alert('I know JavaScript')" /gtlt/tdgt
• lttdgtHTMLltinput type"checkbox"
• onclick"alert('I know HTML')"/gtlt/tdgt
• lttdgtXMLltinput type"checkbox"
• onclick"alert('I know XML')"/gtlt/tdgt
• lt/trgtlt/tablegt

Note The JavaScript instruction executes when
the user clicks the checkbox. Question Why does
the alert command use single quotes?
24
JavaScript and Radio Buttons

• lttablegt
• lttrgt
• lttd align"center" colspan"3"gt
• Select a Sodalt/tdgt
• lt/trgtlttrgtlttdgtCokeltinput type"radio" name"group"
  
• 
  onclick"alert('It\'s the real thing')" /gtlt/tdgt
• lttdgtPepsiltinput type"radio"
  name"group"
• 
  onclick"alert('the pepsi generation')"/gtlt/tdgt
• lttdgtDr. Pepperltinput type"radio"
  name"group"
• 
  onclick"alert('Be a pepper')"/gtlt/tdgt
• lt/trgtlt/tablegt

Question The name attribute is the same for all
radio buttons. Why? Question Why does the alert
commands use single quotes? Note The \' is an
escape sequence (we want the ' to be part of the
string)
25
JavaScript and submitting forms

• ltform method"post" enctype"text/plain"
  actionhttp//www.mydomain.com/handler.cgi
• onsubmit"alert('I\'ll not submit') return
  false" gt
• ltinput type"text" name "data" size"5" /gt
• ltinput type"submit" /gt
• lt/formgt
• Notes
• Note the single and double quotes and the escape
  sequence
• Note the second statement. It stops the browser
  from submitting the form to the server.
• JavaScript has a vocabulary of reserved words,
  and we will use more of them later. The word
  'return' is our first. All JavaScript reserved
  words are lower case.

26
Review Questions

• What is GUI stand for?
• How do you create a drop down menu?
• What is the principle difference between text and
  text area components?
• What are the three ways a form can be processed?
• What is a hidden form element? When would it be
  useful?
• What is the disadvantages to submitting forms
  using the e-mail interface?
• Why do radio buttons need the same name attribute
  values, and unique value attribute values?
• What is CGI?
• Why are tables often combined with forms?
• What is JavaScript?
• What is an escape sequence?
• What does alert do in JavaScript?
• How do you execute in-line JavaScript?
• How do you link to an external JavaScript file?
• Why is it wrong to use the language attribute?