XHTML Forms Web forms much like the analogous paper forms allow the user to provide input This input is typically sent to a server for processing Forms can be used to submit data e g placing an order for a product or retrieve data e g using a search engine There are two parts to a form the user interface and a script to process the input and ultimately do something meaningful with it This document explains how to create the form s user interface The mechanics for processing form data specifically with PHP will be covered later in the course Form syntax A form has three main components the form element form widgets e g text boxes and menus and a submit button The form element has two required attributes method and action form method post action script url form All form elements also known as widgets have a name attribute that uniquely identifies them The data is sent to the server as name value pairs where the name is the input element s name and value is that input element s value We will discuss later how this value can be used by the script Submission method The method attribute specifies how data should be sent to the server The get method encodes the form data into the URL Suppose a form has two input elements with the names name1 and name2 with respective values value1 and value2 The get method would send a URL of the form script url name1 value1 name2 value2 The post method will not include the form data encoded into the URL The post method is considered more secure because the get method allows a hacker to bypass the form by calling the script directly and passing an arbitrarily encoded URL string which could contain invalid values NOTE If the form values contain non ASCII characters or the form content of the URL exceeds 100 characters the post method must be used Submission action The action attribute specifies the script that will process the data The value for this attribute is typically a CGI script or some other type of Web based script such as a PHP script The get method is typically used when the script does not modify any state information on the server side such as when a database query is performed The post method is typically used if the script does modify any state information such as making an update to a database Selection widgets Selection widgets allow a user to select one or more items from a constrained set of choices Selection widgets should always be preferred over text input widgets when the number of constrained choices is a manageable number If the number of constrained choices is small enough so that they can all be visually displayed such as a person s gender then radio buttons or check boxes should be used If the number of constrained choices is large enough that it is infeasible to display them all such as the states in the United States then a menu is a good choice Radio buttons A radio button is a form widget that allows the user to choose only one of a predefined set of items When the user selects a radio button any previously selected radio button in the same group is deselected To create a radio button use the input element with radio as the type attribute s value specify a name using the name attribute and provide a value using the value attribute All radio buttons that have the same value for the name attribute are considered a group The value provided to the name attribute will be the name used in the name value pair that gets passed to the script To make one of the radio buttons be the default selection set the checked attribute for that button to the value checked p Username input type text name uname p p How would you rate your skill in programming br input type radio name skill value beg Beginner input type radio name skill value int Intermediate input type radio name skill value adv Advanced input type radio name skill value sup Super hacker p p How many hours do you spend programming each week br input type radio name hours value beg 0 10 br input type radio name hours value int checked checked 11 20 br input type radio name hours value adv 21 30 br input type radio name hours value sup 30 p This is how the markup may appear in the browser Note that the labels displayed next to the radio buttons are not the values of the value attributes The value attribute s content is what will be sent to the server the label description is provided within the page text Also note that the first group of radio buttons does not have a radio button selected To ensure that a selection is made use the checked attribute as shown in the example If no radio button in a group is selected that group s name value pair will not be sent to the server meaning that the input element will be undefined within the script that processes the form data Checkboxes A checkbox is a form widget that allows the user to make multiple selections from a number of items To create a checkbox use the input element specify checkbox as the type specify a name using the name attribute and provide a value using the value attribute As with radio buttons all checkboxes that have the same value for the name attribute are considered a group You may pre select one or more checkboxes using the checked attribute p Username input type text name username p p What programming languages have you used br input type checkbox name proglang value c C input type checkbox name proglang value cplusplus C input type checkbox name proglang value java Java input type checkbox name proglang value perl Perl input type checkbox name proglang value perl Python p p I agree to br input type checkbox name cheaplabor value yes checked checked work for 1 50 hour br input type checkbox name longdays value yes checked checked work 12 hours per day br input type checkbox name late value yes show up late every day br input type checkbox name usecomments value yes checked checked comment my code br p Here s how the markup may appear in the browser Suppose the checkboxes corresponding to C Java and Perl were selected in the above example Three name value pairs would be sent to the server proglang c proglang java and proglang perl Menus A menu is a form widget that allows the user to select one or possibly multiple of several predefined values Menus are useful in situations where displaying all of the values hinders page readability Suppose you want the user to select their state of residence One method is to make numerous radio buttons the alternative is to use a menu The example output on the left demonstrates how
View Full Document
Unlocking...