C779-Chapter 6

Text boxes

A text box is used to collect a single line of data from the user, such as name, email or address information. The text box is the most common form field. The syntax for creating a text box is as follows: <input type="text" name="FieldName"/> If you want the text box to appear with some default text inside, use the additional value attribute as shown: <input type="text" name="FieldName" value="DefaultText"/> Additionally, you can use a size attribute to specify the width of the text box in characters. The size attribute has no effect on the amount of text the user can enter; it restricts only the visual appearance of the field. .Contrast this with the maxlength attribute. The value of maxlength restricts user entries to the specified number of characters; it has no effect on the display width of the field

Common Gateway Interface (CGI)

CGI technologies pre-dates Web servers but are still used with software that is embedded in hardware as well as in many legacy applications that may still exist in the technical industry. CGI scripts act as an interface between client applications and servers and behave in a similar way as a Web server. They receive client input, process data, perform server-side actions such as storage or communications with other servers, and respond to client requests

Check boxes

Check boxes are used for a group of non-exclusive choices. You have two options when naming check boxes, and the option you choose depends on how you plan to use the collected data. The syntax for creating a check box is as follows: <input type="checkbox" name="groupName"/> As with radio buttons, you can preselect check boxes by adding the attribute checked="checked" into the tag. Unlike radio buttons, however, you can preselect as many check boxes as you like because check boxes are non-exclusive.

server-side scripting

Code that resides on a server to help process Web form input. Server-side CGI scripts are commonly written in Perl. server-side scripting processor such as PHP, ASP, or Java to interpret the form's input. Without server-side scripting languages, Web forms would not be able to communicate with clients.

Web Form Fields

►Text box - A text field into which a user can enter characters. ►Radio button - Round option buttons in a group of two or more mutually exclusive options. ►Check box - Square boxes in a group of two or more non-exclusive options. ►Single-option select list - A drop-down list of two or more options from which a single selection can be made. ►Multiple-option select list - An exposed list of two or more options, optionally scrollable, from which the user can make multiple selections. ►Text area - A scrolling text field into which the user can enter multiple lines of text. ►Password field - A text box that visually masks the entered characters as filled circles. ►File upload - A button and field that allow users to navigate to and select a local file for uploading or other purposes (for example, to validate HTML files). ►Submit button - A button that, when clicked, causes the form's action statement to process. Labeled "Submit" or "Submit Query" by default, but can display any label. ►Reset button - button that, when clicked, clears all form data and sets all form fields back to the default values for those fields. Labeled "Reset" by default, but can display any label.

Basic Tags for Creating Web Forms

<form> <input>, <select> <textarea> You can use the <input>, <select> and <textarea> tags to create form fields by placing them between the <form> </form> tags. <form> tag creates a user-input Web form by encompassing all the content and fields of the form on the page The <form> tag is a container tag, so you should include both opening and closing tags In some older browsers, if you fail to supply the closing </form> tag, the form may not render or may not submit. In HTML5, if you fail to supply the closing </form> tag, the form will still render and users can still submit data, because HTML5 is very forgiving of loose code (whereas earlier HTML and browser versions are not). However, omitting the closing </form> tag can still produce unexpected results in HTML5. For example, if you have two forms on your page and you omit the closing </form> tag at the end of the first form, data from the second form will be submitted with the first. Also, forms using JavaScript may not process as intended if you do not specify where your form ends. It is good coding practice to close your forms properly so you and other developers can more easily decipher your design intentions. Internet Explorer displays form fields even if no <form> tag is present. However, users would be unable to submit any information because the <form> tag is required to instruct the browser where to send data.

Forms and the name attribute

All form field elements share an attribute: name. The name attribute identifies information you receive from a user and associates it with a value you specify. The name attribute helps you organize user input For example, you could use a series of check boxes to learn about a user's preferences for gardening, sailing and biking, and you could name the group of boxes "Interests." Thus when you receive information from the Web form, the names in your results clearly indicate the user's choices. That is, if the user checks the "sailing" check box, you will receive the following information: Interests=sailing

FormMail

One example of a CGI script is the venerable FormMail script, written by Matt Wright This script has existed in various versions since 1997. It is written in Practical Extraction and Report Language (Perl) and has the file name FormMail.pl. FormMail is popular for many reasons, including the following: ►It is available free of charge from Matt's Script Archive (MSA). ►It is written in Perl, which allows developers to use a free CGI interpreter available in many places, including www.cpan.org. Most modern operating systems allow the Perl interpreter to be installed, making Perl one of the more ubiquitous languages. The combination of a free, powerful Perl interpreter and a free, well-written FormMail script is widely appealing. ►FormMail is easy to customize. Wright specifically designed FormMail for ease of use: The developer simply modifies a few portions of the script and it is ready to perform whatever tasks a particular Web form requires. Spam has become a concern for most Web users. Some unscrupulous individuals have taken advantage of the FormMail script because older versions could be fooled into sending email to anyone. You are not limited to using the original Perl FormMail script. Alternative versions of FormMail are available for PHP (https://www.tectite.com/formmailpage.php) and ASP (www.brainjar.com/asp/formmail), for example.

Radio buttons

Radio buttons are never used as stand-alone items. They are reserved for two or more mutually exclusive options. To ensure exclusivity, a group of radio buttons must share the same name attribute, although they will each use an individual value. The following example code shows two buttons representing mutually exclusive answers to the same question. Should we add you to our mailing list? <br/> <input type="radio" name="AddToList" value="yes" checked="checked"/> Yes <input type="radio" name="AddToList" value="no"/> No

Select lists(creating a drop-down single-option)

Select lists are drop-down lists of predetermined options. Depending on the settings, these lists can allow single or multiple selections. The syntax for creating a drop-down single-option select list is as follows: <select name="listName"> <option>Option 1 </option> <option>Option 2 </option>.. .<option>Option n </option> </select> The value that is passed when the form is submitted is the text to the right of the <option> tag. However, if you want to pass a value different from the text that appears in the list, you can add the value="" attribute into any or all of the <option> tags <select name="EmailFreq"> <option>Once a week</option> <option>Once or twice a month </option> <option>Once a month </option> <option value="Remove">Never </option> </select>

File upload

Simply use the "file" value of the type attribute to the <input> tag as follows Provide your resume here: <input type="file" name="UploadedFile"/> This code will create a Browse button on the Web form. When a user clicks the Browse button, a Choose File dialog box will appear, which the user can use to navigate to and select a local file for uploading. An accompanying text box displays the path and file name that the user has chosen.

<form> tag

The <form> element has two main attributes associated with it: ►method — specifies which method the browser will use to send form data to a Web server ►action — specifies the name and location of the CGI script used to process the form These attributes are required in the <form> tag in order to process data that users submit in the form. The method attribute specifies the method by which the browser will send form data to a Web server. The method attribute takes two values: ►"get" — Form data is appended to the URL of the Webpage for use in a query string. This method sends information in cleartext and is thus less secure. ►"post" — Form data is posted to the URL specified by the action attribute. Post is the preferred method for sending form data. It can send more characters, although sometimes post requires more processing by the CGI script. The action attribute specifies the name and location of the CGI script used to process the form. The contents of the form will be processed by the script and acted upon according to the instructions in the script

The <input> tag and the type attribute

The <input> tag is not a container tag; it stands alone You use <input> to create text boxes, check boxes, radio buttons, and the Submit and Reset buttons. The <input> element takes the type attribute. The value you use with the type attribute designates the form field type as a text box, a radio button, a Submit or Reset button, a password field or a check box. examples to create a radio button with the <input> element, you would use the following syntax: <input type="radio" name="AddToList"/>

The <select> tag

The <select> tag is a container tag used to create single-option and multiple-option select lists. Following is an example of<select>: <select name="Frequency"> <option>Once a week</option> <option>Once or twice a month</option> <option>Once a month</option> <option value="NotAtAll" >Never</option> </select> When using the <select> tag, you may want to allow users to select more than one option from the list. If so, you must use the multiple attribute with "multiple" as the value. For example, consider the following HTML code: <select name="Countries" multiple="multiple" size="4"><option>Australia</option> <option>New Zealand</option><option>England</option> <option>France</option> <option>India</option> <option>China</option> </select>

The <textarea> tag

The <textarea> container tag creates scrolling text area spaces. Users can enter multiple lines of text into a text area; it is larger and allows more input than a text box. Because it is a container tag, you can enter default text between the opening and closing tags, and it will appear in the text area until the user types their input into the field.

Parsing data: Form handling, name=value pairs and CGI

The basic element of a raw text string is a name=value pair. The name attribute of the <form> element organizes information input by the user into name=value pairs. This raw text string consists of name=value pairs, delimited by ampersands (&) In a name=value pair, entered spaces are replaced with plus signs (+). If a form field is left empty, only the first part of the name=value pair will be returned.

HTML5 and Forms

The basic form elements and attributes for form creation in HTML5 are little changed from HTML 4.01. The main differences are: ►Cascading Style Sheets (CSS3) are used for all form styles. ►Advanced features are now available, such as new <form> elements and attributes, and <input> types for better control of validation and input control.

Visualizing Client-Server Communication

The following elements are necessary for client-server communication: ►Web browser ►Web form ►Web server ►Server-Side Scripting Language or a CGI script A Web form processing script remains on a Web server.

Web forms and CAPTCHAs

To reduce spam submissions sent to your form, consider the use of a CAPTCHA (Completely Automated Public Turing Test to Tell Computers and Humans Apart). A CAPTCHA is a challenge-response mechanism designed to discern between a human and a "bot" in order to detect the automated systems used by spammers for registering email accounts. A CAPTCHA is an automatically generated image presented to a user who has just submitted information or made a request of a Web server. CAPTCHAs require the user to view the distorted text image, and then enter the text shown in the graphic into a form field before he or she is allowed to proceed with a transaction. The distorted image is easily recognizable by humans, but is a difficult challenge for a machine. When the user provides the correct response to a CAPTCHA, then his or her input is accepted for processing. CAPTCHAs can also require a user to view an image and identify each quadrant in which a specific object appears in that image.

Search engine optimization (SEO) and Web forms

When creating Web forms, you should take search engine optimization (SEO) into consideration SEO involves learning how a particular search engine (such as Google, Yahoo! or Bing) ranks a Website You can use this knowledge to customize a site's Webpages — including the forms used — so that the site is ranked as highly as possible in a search engine's results. When conducting SEO, consider the following strategies related to forms: ►Create as simple a form as possible. Each additional field you use may reduce your score. ►Some search engines may score pages lower if a CAPTCHA is used. The problem with a CAPTCHA, or any other element that requires human input, is that a bot that encounters it will not take time to read and process all of the page. This can cause the page to be scored lower. ►Give form fields informative, descriptive labels. Provide a clear call to action. Do not assume that a ►Submit button will inform users (or search engine bots) about what they should do. ►Provide alternative text navigation.

Submit and Reset buttons

When you specify the <input> tag's type attribute value as "reset" or "submit", you create a button that performs a specific action. Clicking the Submit button sends the data from all fields in the form to be processed by the action specified in the <form> tag. Clicking the Reset button clears all form fields instead of submitting the data, and resets fields to their default settings.

Select lists(creating a drop-down multiple-option)

Within the <select> tag, you can include the multiple attribute as follows: <select name="work" multiple="multiple" size="4"> The presence of this attribute automatically changes the select list to allow users to select more than one option. Because multiple selections are possible, these lists are usually presented with several, if not all, options already exposed. The size attribute of the <select> tag controls the number of items that will appear in a scrolling list box. If no size is specified, the number of items that will appear by default depends on the browser.

Scrolling text area box

You can use a text area box to gather more than one line of text from a user. The <textarea> tag provides a scrolling text box into which a user can enter a few sentences, an address, a letter to the editor or other text. The <textarea> tag is a container tag, and the only content this tag can contain is text. Text between <textarea> tags will appear as default text within the box. The <textarea> element has several key attributes, which you should understand and use. ►cols - Specifies the width in characters of the scrolling text box.. attribute value should be an integer ►rows - Specifies the number of rows of text to display in the box. attribute value should be an integer ►wrap - Specifies whether user-entered text can wrap to new lines when submitted. attribute value should be soft or hard This advanced attribute is used in conjunction with server-side scripts (such as PHP) that process form data. If "soft" is specified, text in the textarea is not wrapped when submitted. This setting is the default.I f "hard" is specified, text in the textarea will wrap (adding newline characters) when submitted. The cols attribute must be specified when using wrap="hard". Note: The wrap attribute was deprecated in HTML 4.01 but was revived in HTML5 with "soft" and "hard" values, instead of the similar "none" and "virtual" values.

client-side scripts

are executed on the client's computer or browser. Code embedded into an HTML page and downloaded by a user; resides on the client and helps process Web form input. Common client-side scripting languages include JavaScript and VBScript.