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

• 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...

• 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

• 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

• The PHP Resource Index
• HotScripts
• Matt's Script Archive
• ScriptSearch

• 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

• 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.

• There are five areas of improvement to forms:
  • New input types
  • New attributes
  • New elements
  • Validation
  • APIs, such as the File API
• nice thing about input types is that if they are not supported by a browser, they will degrade to a basic text input
• A great overview (with demos) of the new input types, attributes and elements:
  HTML5 Forms Input Types, Attributes And New Elements – Demos, Tips And Tricks by Robert Nyman
• Other resources:
  • When can I use... - Compatibility tables for support of HTML5, CSS3, SVG and more in desktop and mobile browsers.
  • The Current State of HTML5 Forms - Browser support for the different features of HTML5 forms is quite varied. Let's explore.
  • HTML5 and CSS3 Form References, Resources and Tutorials - Over 15 resources and tutorials for HTML5 and CSS3 forms.

• 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"

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.