HTML Forms: Creating Interactive Web Content, Study notes of Web Programming and Technologies

Download HTML Forms: Creating Interactive Web Content and more Study notes Web Programming and Technologies in PDF only on Docsity!

HTML Forms

Pat Morin COMP 2405

HTML Forms

• An HTML form is a section of a document containing normal content plus some controls - Checkboxes, radio buttons, menus, text fields, etc
• Every form in a document is contained in a FORM tag - The^ FORM^ tag specifies the action that takes place when the form is submitted

GET or POST

• Forms should use METHOD="GET" when the form does not modify anything on the server: - A search engine query - A database search
• Forms should use METHOD="POST" when the form changes the state of the server or sends a large amount of data - Entering a message on a forum - Uploading a file
• GET^ and^ POST^ transport the form data in different ways

Controls

• The devices that allow input of data onto a form are called the controls
• These include
  • Checkboxes and radio buttons
  • Menus
  • Text inputs
  • File selectors
  • Hidden controls
  • Buttons

Checkboxes

• The NAME attribute names this checkbox
• The^ CHECKED^ attribute (with no value) is used to indicate a pre-checked checkbox
• The VALUE attribute specifies the value bound to name if this checkbox is submitted (default = ON) Check all that apply:
  I like dogs
  I like cats
  I like pigs

Radio Boxes

• Used when user is to select one of many mutually exclusive options
• Radio buttons with same name form a group of mutually exclusive options Select one of the following:
  I agree completely
  I agree a little
  I disagree a little
  I disagree completely
  

Passwords

• Identical to a text box, but text typed into the box is not readable
• Useful for submitting sensitive information (like passwords)

Buttons

• • Creates a button that submits the form to the server
• • Creates a button that resets all form fields to their default state
• • Creates a button that does nothing

Image Buttons

• Displays an image that behaves like a submit button
• The SRC attribute specifies the location of an image file
• The^ ALT^ attribute specifies some text to render if the image is not displayable

Hidden Control

• Creates a control similar to a text control
  • User does not see control
  • User can not easily change the value
• Useful for keeping track of data as the user traverses a collection of pages

Menus

• Drop-down menus are created using the SELECT tag
• Attribute^ SIZE^ determines how many rows to display at once
• Each option is enclosed in an OPTION tag

 ... 

Menus (Cont'd)

• The MULTIPLE attribute of the SELECT tag creates menus that allow multiple selections
• Options can be grouped hierarchically using the OPTGROUP tag

Fieldsets

• The FIELDSET tag is used to group together a set of related form elements

• The^ LEGEND^ tag assigns a caption to a field set

   Personal Information First Name: <br /> Last Name: <br /> Date of Birth: 

Summary

• HTML forms allow users to input data that is submitted to a web server
• Many types of controls are possible
• Other options
  • File selection (for upload)
  • Tabbing navigation (TABINDEX attribute)
  • Access keys (ACCESSKEY^ attribute)
  • Disabled and read-only controls
• For more information and options, see
  • http://www.w3.org/TR/html4/interact/forms.html