Chapter 11- Web Forms

Download  file with answers

Not a member!

Create a FREE account here to get access and download this file with answers

---

 

Chapter 11: Web Forms

 

TRUE/FALSE

 

1. Forms collect and process data.
2. Forms rarely contain basic HTML formatting tags such as <p> and <br/>.
3. CGI can only collect data sent by a user, it cannot return a response back.
4. The <form> element creates a complete form.
5. Every form needs a submit button.
6. When radio buttons area grouped with the name attribute, many values can be selected to be “on.”
7. When using a custom image with a submit button, you should not include an alt attribute.
8. When using a password input type object, the entered text is hidden by asterisks.
9. When the label attribute is used with a set of list options, the labels are always bold italic.
10. Creating input groupings helps to make your forms more readable and increase their accessibility to alternate browsers.

 

MULTIPLE CHOICE

1. ____ are the basis for online commerce.

a.	Web clients	c.	Databases
b.	Forms	d.	Scripts

 

2. The ____ is the communications bridge between the Internet and the server.

a.	AGI	c.	API
b.	CGI	d.	CGO

 

3. Using programs called ____, CGI can collect data sent by a user.

a.	functions	c.	scripts
b.	applets	d.	methods

 

4. ____ is a group of technologies that is used on the client to retrieve data from the user and submit the server request in the background.

a.	AJAX	c.	AGI
b.	CGI	d.	JS

 

5. The ____ element is the container for creating a form.

a.	<fieldset>	c.	<select>
b.	<input>	d.	<form>

 

6. The ____ attribute of a form is the URL of the application that processes the form data.

a.	method	c.	accept
b.	action	d.	location

 

7. The ____ attribute of a form specifies the content type used to submit the form to the server.

a.	action	c.	method
b.	enctype	d.	accept

 

8. The ____ attribute of a form specifies the HTTP method used to submit the form data.

a.	method	c.	submit
b.	enter	d.	submit-method

 

9. The ____ attribute of a form specifies a comma-separated list of content types that a server processing this form can handle correctly.

a.	action	c.	method
b.	enctype	d.	accept

 

10. The ____ attribute of a form specifies a list of allowed character sets for input data that is accepted by the server processing the form.

a.	accept-char	c.	accept
b.	accept-charset	d.	accept-chars

 

11. The ____ element defines many of the form input object types.

a.	<fieldset>	c.	<select>
b.	<input>	d.	<form>

 

12. The ____ type input object provides on/off toggles that the user selects.

a.	reset	c.	check box
b.	radio	d.	button

 

13. The ____ type input object lets a user choose one value from a range of values.

a.	text	c.	check box
b.	radio	d.	button

 

14. The ____ type input object sends the form data to the server using the transmission method specified in the <form> element.

a.	text	c.	reset
b.	submit	d.	button

 

15. The ____ type input object clears the form of any user-entered data and returns it to its original state.

a.	redo	c.	reset
b.	rewrite	d.	clear

 

16. The ____ type input object is useful for sending additional information with the form data that may be needed for processing.

a.	hidden	c.	attach
b.	file	d.	additional

 

17. The ____ type input object adds a graphic button to the form, rather than the default button.

a.	picture	c.	image
b.	img	d.	button

 

18. The default text box is ____ characters long.

a.	10	c.	30
b.	20	d.	40

 

19. To check a check box by default, you can use the ____ attribute.

a.	checked	c.	value
b.	default	d.	initial

 

20. When selecting an image file for the submit button, the ____ attribute contains the location of the image file.

a.	file	c.	source
b.	location	d.	src

 

21. The ____ type input object lets users select a file on their own computer and send it to the server.

a.	submit	c.	upload
b.	file	d.	source

 

22. The ____ element lets you create a list box or scrollable list of selectable options.

a.	<select>	c.	<input>
b.	<button>	d.	<option>

 

23. Each ____ element contains a list value.

a.	<menuitem>	c.	<select>
b.	<input>	d.	<option>

 

24. In a <select> element, the ____ attribute specifies how many of the list options are visible at a time.

a.	number	c.	size
b.	selected	d.	label

 

 

25. You can group and label sets of list options with the ____ element and label attribute.

a.	<opt>	c.	<option>
b.	<group>	d.	<optgroup>

 

 

COMPLETION

 

1. ____________________ let you build interactive Web pages that collect information from a user and process it on the Web server.

 

ANS:  Forms

 

PTS:   1                    REF:   482

 

2. CGI can collect data sent by a user via the ____________________.

 

ANS: 

Hypertext Transfer Protocol (HTTP)

Hypertext Transfer Protocol

HTTP

 

PTS:   1                    REF:   483

 

3. The ____________________ attribute of the <form> element specifies the HTTP method used to submit the form data.

 

ANS:  method

 

PTS:   1                    REF:   484

 

4. A <form> element must contain ____________________ (such as <input> elements) and structural elements such as <p> or <ul> to control the look of the form.

 

ANS:  form controls

 

PTS:   1                    REF:   484

 

5. The ____________________ method sends the form information securely to the server within the message body, so the data is not visible.

 

ANS:  post

 

PTS:   1                    REF:   485

 

6. The ____________________ type attribute value of the <input> element clears the form of any user-entered data and returns it to its original state.

 

ANS:  reset

 

PTS:   1                    REF:   486

 

7. The ____________________ is the most commonly used <form> input type.

 

ANS:  text entry box

 

PTS:   1                    REF:   488

 

8. When using text boxes, you can constrain the user’s entry of text with the ____________________ attribute.

 

ANS:  maxlength

 

PTS:   1                    REF:   488

 

9. When using check boxes, you can use the ____________________ attribute to group check boxes, allowing the user to select multiple values for the same property.

 

ANS:  name

 

PTS:   1                    REF:   489

 

10. The <select> element is a container for the ____________________ element.

 

ANS:  <option>

 

PTS:   1                    REF:   494

 

ESSAY

 

1. Give a brief overview of forms and how they work. Include a description of the Common Gateway Interface.

 

ANS: 

You can use a variety of input elements for the form based on the type of information you want to gather from your user. Forms usually contain basic HTML formatting tags such as <p> and <br/>. Forms can also be styled with CSS, which helps control their visual layout. Well-designed forms include active white space, aligned form elements, and clear labels.

 

The HTML form itself is the interface for the user to enter data, but all of the actual data processing is performed on the server using applications that reside on the Web server or in the Common Gateway Interface (CGI). The traditional method of processing forms input has been to use the Common Gateway Interface, which is the communications bridge between the Internet and the server. Using programs called scripts, CGI can collect data sent by a user via the Hypertext Transfer Protocol (HTTP) and transfer it to a variety of data-processing programs, including spreadsheets, databases, or other software running on the server. The data-processing software can work with the data and send a response back to CGI, and then on to the user.

 

Although CGI is still in use, there are alternatives that are faster and more efficient. Most of the popular Web server software, such as Apache on Linux Web servers and Internet Information Service (IIS) on Windows Web servers, have their own plug-in modules that run forms-processing software.

 

The programs that manage the processing of the collected data can be written in a variety of programming languages, although scripting languages are the most common. The scripting language most commonly used with HTML forms is JavaScript, which was originally created for the Netscape browser in 1995. JavaScript is a client-side scripting language, which means that it runs on the user’s computer, rather than on the server. JavaScript can enhance your Web site with beneficial programming functions, including form validation that checks a user’s form entries for errors before the result is sent to a form script, which is a program that transfers form data to a server.

 

A more recent enhancement to forms processing is AJAX, which is short for Asynchronous JavaScript and XML. AJAX is a group of technologies that is used on the client to retrieve data from the user and submit the server request in the background. The result is that the data can be processed without the user having to wait for the page to reload, allowing enhanced speed and interactivity. Despite the name AJAX, scripts can be created with languages other than JavaScript and does not need XML to manage the data.

 

PTS:   1                    REF:   482-483

 

2. Describe the <form> element and the attributes associated with it.

 

ANS: 

The <form> element is the container for creating a form, as the <table> element is the container for the elements that create a table. A form has a number of attributes that describe how the form data is handled. They are as follows:

 

action: The URL of the application that processes the form data; this URL points to a script file or an e-mail address.

 

enctype: The content type used to submit the form to the server (when the value of the method is “post”); most forms do not need this attribute.

 

method: Specifies the HTTP method used to submit the form data; the default value is “get”.

• get: The form data is appended to the URL specified in the action attribute
• post: The form data is sent to the server as a separate message

 

accept: A comma-separated list of content types that a server processing this form can handle correctly; most forms do not need this attribute.

 

accept-charset: A list of allowed character sets for input data that is accepted by the server processing this form; most forms do not need this attribute.

 

The <form> element by itself does not create a form. It must contain form controls (such as <input> elements) and structural elements such as <p> or <ul> to control the look of the form.

 

PTS:   1                    REF:   484

 

3. Describe how text boxes and check boxes are created and used. Use examples.

 

ANS: 

The text entry box is the most commonly used <form> element.The default text box is 20 characters long, although you can change this value using the size attribute. The user can enter an unlimited number of characters in the text box even though they exceed the visible length. You can constrain the user’s entry of text with the maxlength attribute and supply a default value for the text with the value attribute. The following code shows a simple form with two text boxes.

 

<form action=”http://someserver/cgi_bin/script.cgi” method=”post”>

 

<p>Tell us who you are:</p>

 

<p>

    <label class=”username” for=”First Name”> First Name:       </label>

    <input type=”text” name=”firstname” id=”First Name”             size=”35″ maxlength=”35″ />

</p>

 

<p>

    <label class=”username” for=”Last Name”> Last Name:             </label>

    <input type=”text” name=”lastname” id=”Last Name”           size=”35″ maxlength=”35″ />

</p>

 

</form>

 

Check boxes are on/off toggles that the user can select. You can use the name attribute to group check boxes, allowing the user to select multiple values for the same property. In the following code, the various fish species check boxes are grouped together with the name attribute set to species. Notice that the check boxes reside within a standard unordered list with the CSS list-style-type property set to non. Also, the <label> element comes after the <input> element to display the captions to the right of the check boxes.

 

<ul>

<li>

<input type=”checkbox” name=”species” value=”smbass” id=”Smallmouth Bass” />

<label for=”Smallmouth Bass”>Smallmouth Bass</label>

</li>

 

<li>

<input type=”checkbox” name=”species” value=”lgbass” id=”Largemouth Bass” />

<label for=”Largemouth Bass”>Largemouth Bass</label>

</li>

 

<li>

<input type=”checkbox” name=”species” value=”crappie” id=”Crappie” />

<label for=”Crappie”>Crappie</label>

</li>

 

<li>

<input type=”checkbox” name=”species” value=”walleye” id=”Walleye” />

<label for=”Walleye”>Walleye</label>

</li>

 

<li>

<input type=”checkbox” name=”species” value=”muskie” id=”Muskie” />

<label for=”Muskie”>Muskie</label>

</li>

 

<li>

<input type=”checkbox” name=”species” value=”pike” id=”Pike” />

<label for=”Pike” />Pike</label>

</li>

</ul>

 

To check a check box by default, you can use the checked attribute. The following code fragment shows the syntax for this attribute. Here, the Pike check box is checked by default.

 

<input type=”checkbox” name=”species” value=”pike” checked=”checked” />Pike

 

PTS:   1                    REF:   488-490

 

4. How do you allow a user submit a file?

 

ANS: 

The file input type object lets users select a file on their own computers and send it to the server. This type lets you create a text input area for the user to enter a filename. The length of the text input is specified with the size attribute. The file type automatically includes a browse button that lets users browse for a file on their computer. This input type looks different in different browsers.

 

The following code shows the file input type. In this case, the text box accepts up to 30 characters.

 

<p>Use the browse button to select your file:</p>

<p><input type=”file” size=”30″ /></p>

 

PTS:   1                    REF:   493-494

 

5. Describe how to use the <select> element. Use examples.

 

ANS: 

The <select> element lets you create a list box or scrollable list of selectable options. The <select> element is a container for the <option> element. Each <option> element contains a list value.

 

The following code shows the standard type of list box; the user can choose one value from the list.

 

<p>If you own a boat, select the type:</p>

<p>

<select name=”boats”>

    <option value=”canoe”>Canoe</option>

    <option value=”jonboat”>Jon Boat</option>

    <option value=”kayak”>Kayak</option>

    <option value=”bassboat”>Bass Boat</option>

    <option value=”familyboat”>Family Boat</option>

</select>

</p>

 

You can select the default value in a list by adding the selected attribute to an <option> element. In the following list, “Bass Boat” is the default value.

 

<p>If you own a boat, select the type:</p>

<p>

<select name=”boats”>

    <option value=”canoe”>Canoe</option>

    <option value=”jonboat”>Jon Boat</option>

    <option value=”kayak”>Kayak</option>

    <option value=”bassboat” selected=”selected”> Bass              Boat</option>

    <option value=”familyboat”>Family Boat</option>

</select>

</p>

 

You can also let the user pick multiple values from the list by adding the multiple attribute to the <select> element. The user can hold the Ctrl key and select multiple items in the list, or hold the Shift key to select contiguous options. The following code shows the use of the multiple attribute. The size attribute specifies how many of the list options are visible at a time. The following list shows six options at once.

 

<p>Select your favorite kinds of snacks. <em>(Hold the CTRL key and click to pick more than one.)</em></p>

<p>

<select name=”snacks” multiple size=”6″>

    <option>Potato Chips</option>

    <option>Popcorn</option>

    <option>Peanuts</option>

    <option>Pretzels</option>

    <option>Nachos</option>

    <option>Pizza</option>

    <option>Fries</option>

</select>

</p>

 

PTS:   1                    REF:   494-496