Form syntaxSubmission methodSubmission actionSelection widgetsRadio buttonsCheckboxesMenusText input widgetsText boxesPassword boxesText areasHidden fieldsSubmitting and resetting formsThis is how the markup may appear in the browser.This is how the markup may appear in the browser.Organizing form contentLegendsLabelsTab orderKeyboard shortcutsProtecting form contentDisabling elementsRead-only elementsXHTML FormsWeb 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 syntaxA 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 methodThe 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 actionThe 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 widgetsSelection 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 numberof 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 buttonsA 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 providedto 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 groupof 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.CheckboxesA 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 thevalue 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"
View Full Document
Unlocking...