comp 1850 | web design and development one

lecture nine

agenda

  • what are forms?
  • common gateway interface
  • form processing
  • creating a form shell
  • form elements
  • submit/reset buttons

what are forms?

  • forms allow web visitors to interact with you:
    • give feedback
    • leave a comment in a guestbook
    • vote in a poll or survey
    • buy stuff
  • there are two basic parts to a form:
    • the structure or shell that consists of fields, labels and buttons
    • the processing script that takes that information and converts it into a format that you can read
  • the shell part is fairly easy and similar to creating other parts of a web page, allowing you to create:
    • text boxes
    • larger text areas
    • radio buttons
    • check boxes
    • drop-down menus
  • processing data from a form is a bit more complicated...

common gateway interface (cgi)

  • allows a web server to communicate with other programs running on server or outside the server
  • can also enable web pages to be created on the fly, based on input from users
  • scripts are essentially simplified programs written in a scripting language (php, perl, python, etc.)
  • cgi falling out of favour in place of server-side scripting - ASP, JSP or PHP - difference is these scripting languages allow code to be run as part of the web server instead of outside the server as a separate process; this reduces server load.
  • More on Common Gateway Interface

form processing

  • each element on a form has a name and a value associated with it
  • the name identifies the data that is being sent (e.g., visitor_name)
  • the value is the data itself (e.g., dave)
  • the value can come from the web designer (you) or from the visitor who enters data into a field
  • when submit button is clicked, the name-value pair for each element (visitor_name=dave) is sent to the server
  • script takes all the name value pairs and separates them out into something a human (or database) can understand
  • two ways to send information to the server:
    • get: appends name value to the end of an url (redirection, customization)
    • post: sends a data file with the name-value pairs to the server (feedback, guestbooks)
  • a script is executable - not a static file that does nothing; responds to input

free server-side scripts

creating a form shell

  • three important parts:
    • form tag which includes the url of the script that will process the form:
      <form method="post" action="script.url">
    • the form elements (fields, text areas)
    • submit button which sends the data to the script for processing

sample form elements

  • text boxes
    • contain one line of text
    • typically used for names, addresses, email, etc.
    • <input type="text" name="title" id="title" size="n" maxlength="n">
    • default value for size attribute is 20, but visitors can add more text than fits in the box up to the value defined for "maxlength"
  • larger text areas
    • used in cases where you want to give the visitor more room to write
    • common uses include comments and survey answers
    • <textarea name="name" id="name" rows="n" cols="n">default text</textarea>
    • visitors can enter up to 32,700 characters in a text area
  • check boxes
    • visitor can select as many as they like
    • linked by the value of the "name" attribute
    • <input type="checkbox" name="title" id="title" value="value">
    • the above used for each check box in the set
  • radio buttons
    • can only select one from a group
    • e.g., i live in canada or australia, not both
    • <input type="radio" name="set" id="radio1" value="data">
    • "data" is the text that will be sent to server
  • select menu
    • can select as may as they like, however one selection is the norm
    • normally used as select menus for countries, state, province etc
    • <select name="cars">
      <option value="audi"></option>
    • "audi" is the text that will be sent to server
  • hidden elements
    • used by the web designer (you) to store information from earlier forms or to send pre-determined variables to the cgi script
    • <input type="hidden" name="name" value="value">
  • label elements
    • The <label> tag defines a label for an <input> element.
    • The <label> element does not render as anything special for the user. However, it provides a usability improvement for mouse users, because if the user clicks on the text within the <label> element, it toggles the control.
    • The for attribute of the <label> tag should be equal to the id attribute of the related element to bind them together.

html5 form elements

submit/reset buttons

  • forms are pretty much useless without a way to let the user send the information to you/the server
    • <input type="submit" value="submit message" />
    • default submit message is "submit query"
  • should also give visitors an easy way to clear the form and start over
    • <input type="reset" value="reset message" />
    • default submit message is "reset"

homework exercise

Complete Number 5 in the Hands-On Exercises at the end of Chapter 9 in Web Development & Design Foundations. The exercise starts on page 437 and ends on page 438.

Upload the finished files to your web space and email your instructor with their location.

Exercise due in class in week ten.

comp 1850 home | about the course | readings | assignments | resources | 01 | introduction | 02 | html & ftp | 03 | css: fonts & colours | 04 | css: links & tables | 05 | css: page layout | 06 | site structure | 07 | design principles | 08 | design techniques | 09 | forms | 10 | client-side scripting | 11 | server-side & analytics | dave tanchak | jeff parker | richard hart | | | students on bcitwebdev | example projects | textbook website | my.bcit | D2L login | example projects | bcit | bcit: computing |