INP 170: Web Coding II

1
INP 170 Web Coding II

• Lecture 11 Forms Accessibility

2
Objectives

• Forms
• Forms and Accessibility

3
Forms overview

• Introducing Forms
• Creating a Form
• Text Input Fields
• Textarea Boxes
• Radio Buttons
• Checkboxes
• Drop-Down Menus
• Uploading a File
• Hidden Fields
• Submitting the Form

4
Introducing Forms

• Uses of forms
• Logging in (database request)
• Search feature (database request)
• Site feedback (submitting information)
• Registering (submitting information)
• File upload (submitting information)

5
Laying out a form

• You can use either tables or CSS-based layouts,
  as usual
• However, Netscape 4 requires that all form
  elements appear in the same DIV

6
Creating a form...

• Please download the XHTML skeleton code from the
  course links page...
• Rename the skeleton page to forms.html
• As we go through each item, add to page!

7
Creating a form

• The form includes the following
• text input fields
• textarea boxes
• radio buttons
• checkboxes
• drop-down menus
• hidden fields (not visible to the user)
• button or buttons to click (generally to submit
  the form)
• Most of these should be accompanied by a label

8
ltformgt...lt/formgt

• All form elements should go within the
  ltformgt...lt/formgt tags, which are block-level
• method chose post or get as HTTP methods
• action specifies relative location of a CGI
  script to process the form
• The following form tag will not process a form
• ltform method"post" action""gt
• The following will use a file called process
• ltform method"post" action"cgi/process.php"gt

9
Text input

• ltinput typetext /gt
• Creates a textual input box
• name used to specify variable name for input.
• size size of text box in characters.
• maxlength maximum characters allowed. Optional.
• id usually same as name, used for accessibility
  purposes and for styling. Optional, but
  suggested.
• value offer a default value. Optional.
• type either text or password
• Expect big differences in how this will appear
  from one browser to the next...

10
E.g.,

• ltinput typetext nameusername idusername
  size8 classregister /gt
• ltinput typepassword namepassword
  idpassword size8 classregister /gt
• ltinput typetext namefirstname
  idfirstname size12 classregister /gt
• ltinput typetext namelastname idlastname
  size12 classregister /gt

11
Textarea

• lttextareagt...lt/textareagt
• Used for short blurbs of information, such as
  suggestions
• rows Set height of textarea.
• cols Set width of textarea.
• wrap"wrap" unfortunately, does not validate
  XHTML. Most browsers do this automatically, but
  Netscape will not. To support Netscape, you
  should include.
• name and id
• As with other text input, expect big
  cross-browser differences

12
E.g.,

• lttextarea namebackground idbackground
  classregister rows5 cols25gtOffer a
  little information about yourself...lt/textareagt

13
Radio buttons

• ltinput typeradio /gt
• name multiple radio buttons will have the same
  name, which is how they will be grouped
• value each radio button, however, will have a
  different value. This is what is submitted.
• checkedchecked Use for the default value.
  Only use with one!
• id

14
E.g.,

• ltpgtWhat is your primary browserlt/pgt
• ltulgt
• ltligtltinput typeradio namebrowser
  valueie checkedchecked /gt IElt/ligt
• ltligtltinput typeradio namebrowser
  valuemozilla /gt Mozilla/Firefoxlt/ligt
• ltligtltinput typeradio namebrowser
  valueopera /gt Mozilla/Firefoxlt/ligt
• lt!-- add Safari, Konquerer, and a misc --gt
• lt/ulgt

15
Checkboxes

• ltinput typecheckbox /gt
• name the same name will be used for each
  checkbox in the group
• value this, however, will be unique for every
  checkbox
• checkedchecked the checkbox is selected by
  default. Can use with multiple checkboxes
• id

16
E.g.,

• ltpgtI would automatically like to receive
  information aboutlt/pgt
• ltulgt
• ltligtltinput typecheckbox namenewsletters
  valueweb2 checkedchecked /gt Web 2.0lt/ligt
• ltligtltinput typecheckbox namenewsletters
  valuecss /gt CSS hackslt/ligt
• ltligtltinput typecheckbox namenewsletters
  valuejavascript /gt Javascript hackslt/ligt
• lt!-- Add digital divide, SEO --gt
• lt/ulgt

17
Drop-down menus

• The following is the general format
• ltselectgt
• ltoptiongtOption 1lt/optiongt
• ltoptiongtOption 2lt/optiongt
• ltoptiongtOption 3lt/optiongt
• lt/selectgt

18
Select

• ltselectgt...lt/selectgt
• name meaningful variable name
• size used for height in rows
• multiple"multiple" use if you want to allow
  user to select multiple entries while holding
  down ltCTRLgt
• id

19
Option

• ltoptiongt...lt/optiongt
• value associated value of menu item
• selectedselected default value. Only one item
  should be selected.

20
E.g.,

• ltpgtWhat operating systems do you use?ltbr /gtltbr /gt
  To select more than one, hold down
  ltemgtcontrollt/emgt while you choose on your
  selections.lt/pgt
• ltselect nameos idos classregister
  multiplemultiplegt
• ltoption valuewingtMS Windowslt/optiongt
• ltoption valuemacgtMac OSlt/optiongt
• ltoption valueunixgtLinux/Unixlt/optiongt
• ltoption valueothergtOtherlt/optiongt
• lt/selectgt

21
Uploading a File

• ltinput typefile /gt
• Creates a textbox and an associated browse
  button
• name offers a file a variable name
• size for the size of the input box, not the
  file!
• id

22
E.g.,

• ltinput type"file" name"upload" id"upload
  size"25" /gt

23
Hidden fields

• ltinput typehidden /gt
• Used to pass information along with other form
  information that a user doesn't need to see
• E.g., a multiple-page form can pass information
  from one page to the next
• name
• value
• Note hidden is not meant as a secure way to hide
  data, such as passwords! They can be viewed in
  source, and they are not encrypted unless entire
  page is encrypted!

24
E.g.,

• ltinput typehidden namedate
  valuegetDate() /gt
• ltinput typehidden nameform valueregister
  /gt

25
Submitting a form

• ltinput typesubmit /gt
• Textual submit button
• value label of button. The default for most
  browsers is 'Submit Query'. I highly suggest you
  don't use the default.
• ltinput typesubmit valueSubmit
  classregister /gt
• ltinput typeimage /gt
• Graphical submit button
• ltinput type"image" src"submit.gif" border"0"
  alt"search" /gt

26
Reset button

• ltinput typereset /gt
• I personally don't use this ... it is far too
  easy to accidentally click on this.

27
Forms and accessibility

• Introduction to Forms Accessibility
• Forms Accessibility in Interface Design
• tabindex Attribute
• ltlabelgt Tag
• accesskey Attribute
• ltfieldsetgt and ltlegendgt Tags
• ltoptgroupgt Tag

28
Introduction to Forms Accessibility

• Accessibility with forms was addressed in HTML 4
• Support is generally better in Win PC browsers
  than in Mac browsers
• Netscape 4 does not support these tags and
  attributes

29
Forms Accessibility in Interface Design

• Make sure label is on the same line as form
  element
• Even at larger text sizes
• For drop-down menus, the first element should be
  a description such as Please choose one...
• Older adaptive technology functions better when a
  default value is offered for textboxes and
  textareas

30
tabindex attribute

• tabindex
• Offer an order for tabbed browsing of form
• E.g.,
• Last name ltinput typetext size"12"
  namelastname idlastname tabindex1 /gt
• First name ltinput typetext size"12"
  namefirstname idfirstname tabindex2 /gt
• This is especially useful for accessibility
  purposes since different browsers tab in
  different ways, e.g., IE only tabs first radio
  button, other tab all radio buttons

31
ltlabelgt tag

• Give a form element a label. The form element
  must have an id!
• User can click on label, and the focus will move
  to the associated form element
• E.g.,
• ltlabel forlastnamegtLast namelt/labelgt ltinput
  typetext ... idlastname /gt

32
Support of ltlabelgt

• Internet Explorer and Opera 7.x support this for
  text input boxes, textarea boxes, radio buttons,
  checkboxes, and drop-down menus
• Netscape 6 supports this for radio buttons and
  drop-down lists
• Netscape 7 and Mozilla 1.4 support this for text
  input boxes, textarea boxes, radio buttons,
  checkboxes, and drop-down menus
• Netscape 4 will ignore

33
accesskey Attribute

• You can apply accesskey to label or form element
  however, if applied to form element, may result
  in validation error
• Hold alt for Win or ctrl for Mac and type access
  key to move focus to form element
• E.g.,
• ltlabel forlastname accesskeylgtltugtLlt/ugtast
  namelt/labelgt ltinput typetext ... idlastname
  /gt
• Generally well supported, except by Opera, which
  assigns its own access keys

34
ltfieldsetgt and ltlegendgt

• ltfieldsetgt
• Groups together related form elements, e.g.,
  first name, last name, middle initial
• ltlegendgt
• A label for a fieldset

35
E.g.,

• ltfieldsetgt
• ltlegendgtNamelt/legendgt
• ltlabel for"firstname"gtFirst Namelt/labelgt ltinput
  type"text" name"firstname" id"firstname"
  size"12" tabindex"4" /gt
• ltlabel for"lastname"gtLast Namelt/labelgt ltinput
  type"text" name"lastname" id"lastname"
  size"12" tabindex"5" /gt
• lt/fieldsetgt
• ltfieldsetgt
• ltlegendgtContact Informationlt/legendgt
• ltlabel for"street"gtStreet Addresslt/labelgt
  ltinput type"text" size"14" name"street"
  id"street" tabindex"6" /gt
• ltlabel for"city"gtCitylt/labelgt ltinput
  type"text" name"city" id"city" size"10"
  tabindex"7" /gt
• lt/fieldsetgt

36
optgroup

• Allows you to group together elements in a drop
  down menu
• PC IE 5 and Netscape 4 do not support this tag
• IE 6, Mac IE 5, the Gecko-based browsers and
  Opera 7 all support
• IE 5 has the best support creates a cascading
  drop-down menu!

37

• ltselect nameos idosgt
• ltoption valuegtSelect an operating
  system...lt/optiongt
• ltoptgroup labelwingt
• ltoption value"win95"gtWindows 95lt/optiongt
• ltoption value"win98"gtWindows 98lt/optiongt
• ltoption value"winxp"gtWindows XPlt/optiongt
• lt/optgroupgt
• ltoptgroup labelmacgt
• ltoption value"os9"gtMac OS 9lt/optiongt
• ltoption value"osx"gtMac OS Xlt/optiongt
• lt/optgroupgt
• ltoptgroup labellinuxgt
• ltoption value"redhat"gtRedhat/Fedoralt/optiongt
• ltoption value"suse"gtSuSelt/optiongt
• ltoption value"ubuntu"gtUbuntult/optiongt
• ltoption value"linux"gtOther Linuxlt/optiongt
• lt/optgroupgt
• ltoptgroup labelothergt
• ltoption value"freebsd"gtFreeBSDlt/optiongt