comp 1850 | introduction to web design and development

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 perl or other scripting language (asp, php, c+, etc.)
  • cgi falling out of favour in place of 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.

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)
    • not sure which to choose? this get vs post article may help you decide
  • a script is executable - not a static file that does nothing; it responds to input
client server form processing interaction

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

labels

  • accessible forms are crucial to usability
  • the <label> tag is used with every form widget
  • ensure every widget is given a unique id="" attribute, eg: <input type="text" id="username" />
  • assign a widget's id to the for="" attribute of a label tag eg: <label for="username">User name:</label>
  • each form widget must have its own label tag: especially smaller widgets such as checkboxes and radio buttons!
  • the only widgets that dont require labels are the buttons: submit, reset, etc

form elements: input

  • text boxes
    • contain one line of text
    • typically used for names, addresses, email, etc.
    • <input type="text" name="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" rows="n" cols="n" wrap>default text</textarea>
    • visitors can enter up to 32,700 characters in a text area
    • ie automatically wraps text even without the non-standard "wrap" attribute
  • check boxes
    • visitor can select as many as they like
    • grouped checkboxes share the same name attribute
    • each checkbox is assigned a unique value attribute
    • <input type="checkbox" name="title" value="value">
    • the above used for each check box in the set
  • radio buttons
    • can only select one from a group
    • all radio buttons in a group share the same name attribute
    • each radio button is assigned a unique value attribute
    • e.g., i live in canada or australia, not both
    • <input type="radio" name="set" value="data">
    • "data" 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">

form elements: textarea

  • the textarea provides a text input that may be several characters tall and/or wide. it supports multi line inputs, carriage returns, non collapsing spaces, etc. as usual, the name attribute determines how this input field is identified by the processing script
  • <textarea name="name"></textarea>
  • the cols and rows attributes permit custom sizing
  • <textarea name="name" cols="30" rows="10" ></textarea>

form elements: select / option box

  • the select/option box (a.k.a. combo box, drop down box, pop up box) is used to provide several options in a visually controlled region. each select must contain one or more options. each option must have a unique value attribute.
  • <select name="name">
        <option value="value">Display text</option>
    </select>
  • the select element supports size and multiple attributes, which can have considerable effects on how the input operates. experiment with them to see how they function.
  • <select multiple="multiple" size="3" ></select>

other form input elements

  • consider investigating the remaining inputs available to HTML forms
  • <input type="image" /> useful for replacing the Submit button with an image
  • <input type="button" /> a generic button, only used in conjunction with javascript.
  • <input type="file" /> used for file uploads

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"
home | about the course | readings | resources | 01 | introduction | 02 | html & ftp | 03 | css: fonts & colors | 04 | css: links & tables | 05 | css: page layout | 06 | information architecture | 07 | design principles | 08 | css: layout & graphics | 09 | html forms | 10 | client side scripting | 11 | scripting & analytics | jeff parker | students on bcitcomp.ca | textbook website | my.bcit | bcit | bcit: computing |