ࡱ > & ( # $ % #` 0 K bjbjmm . C ) ) ) ) l &* l ĩ h * * * * * y+ y+ y+ C E E E E E E $ , h i 2 y+ y+ 2 2 i * * ~ _7 _7 _7 2 R * * C _7 2 C _7 _7 b $ Ϩ * * I+1 ) 5 # V C 0 ĩ y V P 6 P Ϩ P Ϩ t y+ R - _7 s/ T 0 y+ y+ y+ i i U7 y+ y+ y+ ĩ 2 2 2 2 $ ! ! 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 forms 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.
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 elements name and value is that input elements 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 persons 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 attributes 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.Username:
How would you rate your skill in programming?
Beginner
Intermediate
Advanced
Super-hacker
How many hours do you spend programming each week?
0-10
11-20
21-30
30+
Username:
What programming languages have you used?
C
C++
Java
Perl
Python
I agree to...
work for $1.50/hour.
work 12 hours per day.
show up late every day.
comment my code.
Username:
Nickname:
This is how the markup may appear in the browser. Three optional elements control how the text box appears. The value attribute specifies the default text that should be shown when the text box is displayed. This text will be sent to the server if the user does not modify it. The size attribute specifies the width of the text box measured in characters. The maxlength attribute specifies the maximum number of characters that can be entered in the text box.Username:
Nickname:
Favorite book:
I bet you can't type "The quick brown fox jumped over the lazy dog"!
Username:
Password:
Here is how the markup may be displayed in the browser. As with text boxes, password boxes also support the size, maxlength, and value attributes; however, having a predefined value for a password box defeats the purpose of having a password at all. It is also important to note that password boxes do not provide any encryption, so it is possible for the password to be intercepted when the form data is sent to the server unless a secure connection is used (i.e., HTTPS). The primary purpose of the password box is to visually protect the text string. Text areas Text areas allow the user to provide more than one line of textual input. Text areas can be as wide as the page itself, and the browser will add scroll bars if the text provided by the user exceeds the size of the text area. To create a text area, use the textarea element, specify the number of rows and columns using the rows and cols attributes, and name the text area using the name attribute. Default text can be specified by placing it between the textarea begin- and end-tags.Username:
This is how the markup may appear in the browser. NOTE: The text in the text area was added to demonstrate that scroll bars are added if the input text exceeds the size of the text area. Hidden fields A hidden field is a form component that allows name/value pairs to be specified without any visual representation. The hidden name/value pairs will be sent to the server for processing just like the pairs corresponding to the other form widgets. To create a hidden field, use the input element, specify hidden as the type attributes value, and provide values for both the name and value attributes. Hidden fields can be specified anywhere within the form start- and end-tags. Hidden fields are useful for providing context. For example, suppose you have (1) a Web page with a form that facilitates removing records from a database, and (2) a script to process the name/value pairs and perform the deletion. Instead of simply assuming the users choice of records to delete is correct, a confirmation page should be displayed prompting the user to confirm the deletion. The processing script can be set up so that it looks for a specific name/value pair for example, confirmdelete="yes". If the form is lacking this pair, the script can generate the XHTML, which includes the hidden field , for the confirmation page. When the user submits the form data from the confirmation page, the confirm deletion pair will exist, meaning that the record deletion should take place. Submitting and resetting forms Form data is submitted to the server when the user clicks on a submit button widget. NOTE: There are other methods for submitting form data without using a button widget; however, they are beyond the scope of this document. To create a submit button, use the input element, specify submit as the type attributes value, and provide a label for the button widget via the value attribute. This is how the markup may appear in the browser. The name attribute is optional for the submit button. Suppose you have a Web page with two separate forms corresponding to creating an account and signing in using an existing account. The first form might have fields for address information, desired username, and password. The second form will likely only have two text boxes: username and password. The first forms submit button may be marked up as . The second forms submit button may be marked up as . The script on the server can simply check for the existence of newacct or signin to determine the next course of action. A typical companion to the submit button widget is the reset button widget, which resets a form to its original state (i.e., default values). To create a reset button, use the input element, specify reset as the type attributes value, and provide a label for the button widget via the value attribute. This is how the markup may appear in the browser. To create a submit or reset button with an image, use the button element with an img child element. The type, name, and value attributes for the button element should either be submit or reset depending on the desired action. This is how the markup may appear in the browser. Organizing form content Legends Things. Labels Things. Tab order Things. Keyboard shortcuts Things. Protecting form content Disabling elements Things. Read-only elements Things. ; G m q $ 5 g k ] o s y ! " ' + , . D J O U V W Z [ ^ ˬՖՖ hR hR CJ OJ QJ hR hR CJ hR h7x CJ OJ QJ hR h7x >*CJ OJ QJ hR hR CJ OJ QJ hR CJ h7x 6CJ OJ QJ h7x CJ OJ QJ h7x h7x CJ h7x CJ0 ; : ; G ' - 5 6 ] o P b / 0 1 C { gdV" gdR gdR # $d %d &d 'd N O P Q $a$ K $ ' D 5 9 O P b f l ! $ " 1 C U { } @ D ' I N P W [ · h_v CJ h_v h7x CJ OJ QJ h`N. h7x CJ OJ QJ h7x >*CJ hV" CJ aJ hR h7x CJ aJ h_v h7x >*CJ aJ h7x hR h7x CJ OJ QJ h7x 6CJ hR CJ hR h7x CJ OJ QJ h7x CJ 5 Z [ > x 2 * + - . # $d %d &d 'd N O P Q &