Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
60 views

Working With Forms: The Form Element

The document discusses various form controls that can be used when creating HTML forms, including: - Text boxes for single-line, password, and multi-line text entry - Radio buttons and checkboxes for selecting single or multiple options - Submit and reset buttons for submitting or resetting a form - Select menus for presenting a dropdown list of choices It provides code examples for adding these different form controls to a form, and describes their functionality and how they are rendered in the browser. The controls allow users to enter text, select options, and submit information from a form.

Uploaded by

pankajusb
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
60 views

Working With Forms: The Form Element

The document discusses various form controls that can be used when creating HTML forms, including: - Text boxes for single-line, password, and multi-line text entry - Radio buttons and checkboxes for selecting single or multiple options - Submit and reset buttons for submitting or resetting a form - Select menus for presenting a dropdown list of choices It provides code examples for adding these different form controls to a form, and describes their functionality and how they are rendered in the browser. The controls allow users to enter text, select options, and submit information from a form.

Uploaded by

pankajusb
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

Dynamic HTML and Web Designing

Working with Forms


A web form is a web page that contains fields, areas in which a visitor can enter information or select from a set of predefined options. When a visitor accesses the form, the browser displays the web page as usual, including the forms fields. The visitor can interact with the fieldsfor example, by typing text into a text field, by selecting a check box or one option button in a group of option buttons, or by choosing an item from a drop-down list. When finished with the form, the visitor clicks a command button that submits the form, usually by running a Common Gateway Interface, or CGI, script written in a programming language such as Perl, C, C++, ASP, PHP, etc.

The form Element


Forms are added to web pages using (no surprise here) the form element. The form element is a container for all the content of the form, including some number of form controls, such as text entry fields and buttons. It may also contain block elements, (h1, p, and lists), however, it may not contain another form element. This sample source document contains a form similar to the one shown in table 1. <html> <body> <form action="/cgi-bin/mailinglist.pl" method="post"> <ol> <li><label for="name">Name:</label> <input type="text" name="name" id="name" /></li> <li><label for="name">Email:</label> <input type="text" name="email" id="email" /></li> </ol> <input type="submit" value="Submit" /> </fieldset> </form> </body> </html> The output of above code that shows in the browser is:

In addition to being a container for form control elements, the form element has some attributes that are necessary for interacting with the form-processing program on the server. Lets take a look at each. The action attribute provides the location (URL) of the application or script (sometimes called the action page) that will be used to process the form. The ACTION value is required for working forms, though on some browsers a value similar to the base URL of the document will be assumed if the ACTION is left out. The method attribute specifies how the information should be sent to the server. There are only two methods for sending this encoded data to the server: POST or GET indicated using the method attribute in the form element.

Dynamic HTML and Web Designing


The POST method: When the forms method is set to POST, the browser sends a separate server request containing some special headers followed by the data. Only the server sees the content of this request, thus it is the best method for sending secure information such as credit card or other personal information. The GET method: With the GET method, the encoded form data gets tacked right onto the URL sent to the server. GET is not appropriate for forms with private personal or financial information.

Add Input controls to the Form Lets discuss some input controls, or ways for users to enter data. For example, for you to enter your name on a form, there must be a space for you to do so. This space is what Im referring to when I use the phrase input control or simply control. Figure 2 contains some input controls that are labeled for you.

Figure 2: An example of a basic input controls The majority of these controls are created with an input tag, the actual description of which control you want to include is made through the type attribute, as in the following example: <form> <input type="text" /> </form> The next sections explain the specific types of controls created with the input tag, as well as a few others that arent created by it.

Text Box controls


There are three basic types of text box fields in web forms: single-line text boxes, password boxes, and multiline text entry boxes. Single-line text box: One of the simplest types of form control is the text box field used for entering a single word or line of text. It is added to the form using the input element with its type attribute set to text, and the name attribute is required for identifying the variable name as shown here and Figure 3. Password text box: A password box field works just like a text box field, except the characters are obscured from view using asterisk (*) or bullet () characters, or another character determined by the browser. Multiline text entry box: When you want your users to be able enter more than just one line of text, for these instances, use the textarea element that is replaced by a multi-line, scrollable text entry box when displayed by the browser (Figure 3). Unlike the empty input element, the textarea element has content between its opening and closing tags. The

Dynamic HTML and Web Designing


content of the textarea element is the intial content of the text box when the form is displayed in the browser.

<form> <input type="text" name="First Name" value="Enter your Name" /> <input type="password" name="pswd" /> <textarea name="contest_entry" rows="5" cols="100" > Tell us why you love the band in 50 words or less. Five winners will get backstage passes! </textarea> </form>

Working with Radio and Checkbox Buttons


Both checkbox and radio buttons make it simple for your visitors to choose from a number of provided options. They are similar in that they function like little on/off switches that can be toggled by the user and are added using the input element. They serve distinct functions, however. A form control made up of a collection of radio buttons is appropriate when only one option from the group is permitted, or, in other words, when the selections are mutually exclusive (such as Yes or No, or Male or Female). When one radio button is on, all of the others must be off, sort of the way buttons used to work on old radiospress one button in and the rest pop out. When checkboxes are grouped together, however, it is possible to select as many or as few from the group as desired. This makes them the right choice for lists in which more than one selection is okay.

Figure 4: Radio and checkbox input controls

Radio buttons
Radio buttons are added to a form with the input element with the type attribute set to radio. The name attribute is required. Here is the syntax for a minimal radio button: In this example, radio buttons are used as an interface for users to enter their age group (a person cant belong to more than one age group, so radio buttons are the right choice). Figure 4 shows how radio buttons are rendered in the browser. <form> <input type="radio" <input type="radio" <input type="radio" <input type="radio"

name="age" name="age" name="age" name="age"

value="under24" checked="checked" /> under 24 value="25-34" /> 25 to 34 value="35-44" /> 35 to 44 value="over45" /> 45+

Dynamic HTML and Web Designing


</form> Notice that all of the input elements have the same variable name (age), but their values are different. Because these are radio buttons, only one button can be checked at a time, and therefore, only one value will be sent to the server for processing when the form is submitted. You can decide which button is checked when the form loads by adding the checked attribute to the input element. In this example, the button next to under 24 will be checked by default.

Checkbox buttons
Checkboxes are added using the input element with its type set to checkbox. As with radio buttons, you create groups of checkboxes by assigning them the same name value. The difference, as weve already noted, is that more than one checkbox may be checked at a time. The value of every checked button will be sent to the server when the form is submitted. Here is an example of a group of checkbox buttons used to indicate musical interests. Figure 4 shows how they look in the browser: <form> <input <input <input <input type="checkbox" type="checkbox" type="checkbox" type="checkbox" name="genre" name="genre" name="genre" name="genre" value="punk" checked="checked" /> Punk rock value="indie" checked="checked" /> Indie rock value="techno" /> Techno value="rockabilly" />Rockabilly

</form>

Submit and reset buttons


There are a number of different kinds of buttons that can be added to web forms. The most fundamental is the submit button. When clicked, the submit button immediately sends the collected form data to the server for processing. The reset button returns the form controls to the state they were in when the form loaded. Both submit and reset buttons are added using the input element. As mentioned earlier, because these buttons have specific functions that do not include the entry of data, they are the only form control elements that do not require the name attribute. <input type="submit" /> <input type="reset" /> Submit and reset buttons are straightforward to use. Just place them in the appropriate place in the form, in most cases, at the very end. By default, the submit button displays with the label Submit or Submit Query and the reset button is labeled Reset. Change the text on the button using the value attribute as shown in the reset button in this example (Figure 5). <p><input type="submit" /> <input type="reset" value="Start over" /></p>

Menus
Option for providing a list of choices is to put them in a pull-down or scrolling menu. Menus tend to be more compact than groups of buttons and checkboxes. You add both pull-down and scrolling menus to a form with the select element. Whether the menu pulls down or scrolls is the result of how you specify its size and whether you allow more than one option to be selected.

Dynamic HTML and Web Designing


Lets take a look at both menu types.

Pull-down menus
The select element displays as a pull-down menu and its a container for a number of option elements. The content of the chosen option element is what gets passed to the web application when the form is submitted. In pull-down menus, only one item may be selected. Heres an example

<select name="EightiesFave" id="form-fave"> <option>The Cure</option> <option>Cocteau Twins</option> <option>Tears for Fears</option> <option>Thompson Twins</option> <option>Everything But the Girl</option> <option>Depeche Mode</option> <option>The Smiths</option> <option>New Order</option> </select>

Scrolling menus
To make the menu display as a scrolling list, simply specify the number of lines youd like to be visible using the size attribute. This example menu has the same options as the previous one, except it has been set to display as a scrolling list that is six lines tall. The multiple attribute allows users to make more than one selection from the scrolling list. Use the selected attribute in an option element to make it the default value for the menu control. <select name="EightiesBands" size="6" multiple="multiple" for="EightiesBands"> <option>The Cure</option> <option>Cocteau Twins</option> <option selected="selected"> Tears for Fears</option> <option selected="selected"> Thompson Twins</option> <option>Everything But the Girl</option> <option>Depeche Mode</option> </select>

You might also like