CIS 3630 - Test 3b

An object used to gather, organize, and transmit data on the Web

Is in the Editing window to create a form

• The source of input for the form
• Knowledge that is not useful for us at present time

After the data is gathered on a form, you still need a way to send the data to a file server, and then the data must be processed on the server

• New knowledge gained by organizing data so that conclusions may be drawn about the data
• Raw data, knowledge that is useful for us

Standard developed for computers to send data to a server and receive data from a server

Series of instructions written in a scripting language such as Perl

• Program determines what becomes of the data you entered in the form
• This program runs on the Web server that hosts your Web site, and uses a CGI script to process the data from the form
• The form handler is not part of Expession Web

• An object used to gather, organize, and transmit data on the Web.
• Every form begins with the start [form] tag.
• If you are using a table to align the form elements, you must enter the start [form] tag before the start [table] tag so that the table is part of the form.
• You can use several forms in the same Web page or Web site, so you need to identify every form with a unique name; use the name attribute to specify a name for the form.
• Every form must begin with a form element. When you insert the form element, you should see the form in the Editing window with a dashed outline around the form border. If you have difficulty seeing the outline, look at the Quick Tag selector bar, which will display the Code tag for the form.

Also contains a few lines of scripting code

• Action attribute and its value identify the location on the server and the name of the script that will run when the user clicks the Submit button in the form.
• Expression Web does not provide a value for the server address.
• You must provide that information for the form.

• Method attribute and its value determine how the Web page data will be sent to the server for processing.
• The method attribute typically has only 2 possible values - get or post.
• Because there is a strict limit to the amount of data that can be sent using the get method, Expression Web uses post as the default value for the method attribute when you create a form.

• Usually referred to as fields.
• Areas on the form in which users provide the data you request.

Represents a single piece of data

Unique identifier given to each field

• Particular data the user submits for a particular field; ex., the field value could be the words " I had fun."
• The field value also could be the selection of the check box in a form.

• Description of the data you are asking the user to enter or select; ex.: "Last Name"
• A user can either enter this data into a text field or select it from a Windows control

• Any object in a window or dialog box
• You use Expression Web to create Windows controls
• The XHTML code within a form is used to create Windows controls

• Windows control used to execute or reject a user action; ex.: OK button and Cancel button
• Also known as push button
• The Submit and Reset Command buttons have the advantage of being easy to create. The disadvantage to these buttons is that they cannot be styled. If you want to create more visually appealing Command buttons, use the Advanced Button control.

• Any Windows control used to create a form.
• XHTML form contains a number of form controls - text areas, option buttons, check boxes, and list boxes.
• You have 3 options for aligning the form controls: (1) You can enter the code for the form controls between [p][/p] tages; (2) You can use CSS to position the controls; (3) You can create an XHTML data table to align the form elements within table cells. You should enter the table code and make necessary corrections to the table first, then you can add the form controls to the table.

• 17 Form Controls and their purposes:
• 1. Advanced Button: Creates a button that can be styled
• 2. Drop-down box: Creates a drop-down list of choices (also known as a list box)
• 3. Form: Creates the form in the Editing window
• 4. Group box: Creates a box that places a border around a related group of form controls
• 5. Input (Button): Creates a generic push button
• 6. Input (Checkbox): Inserts a check box
• 7. Input (File): Allows users to submit a file along with the data in the form
• 8. Input (Hidden): Creates a control that users can't see but which submits information with the form
• 9. Input (Image): Creates a Submit button that appears as an image
• 10. Input (Password): Inserts a one-line text box for users to enter a password
• 11. Input (Radio): Inserts a radio button (also known as an option button)
• 12. Input (Reset): Creates a button that clears the form
• 13. Input (Submit): Creates a button that submits the form data to the form handler
• 14. Input (text): Creates a box in which a user can enter a single line of alphanumeric input
• 15. Label: Creates a text label for a form field
• 16. Text Area: Creates a box for users to enter multiple lines of alphanumeric text

• In Design view, click in the Editing window where you want the form element to be inserted
• If there is no content on the page, double-click the Form button in the Toolbox task pane. Alternatively, you can click and drag the Form button from the Form Controls group in the Toolbox task pane to the appropriate place in the Editing window
• If there is content on the page, select the content that you want as part of the form. Right-click the Form button in the Toolbox task pane, and then click Wrap from the shortcut menu

• To delete a form element, click the Code tab for the form element and press the Delete key
• Depending on your monitor size and screen resolution, the border may appear faint. If you have difficulty seeing the outline, look at the Quick Tag Selector bar, which will display the Code tag for the form.
• When creating a form, ensure that Visual Aids are set to On

• To make a form easy to read and complete, the form elements should be aligned vertically and horizontally.
• 1. Create a table for the form elements - provide gridlines for the form elements in addition to aligning them
• 2. Float the table left or right, so you can have other content next to the table; if you need to align several columns of form elements, it's a good idea to use a table to provide the structure
• 3. If you have only text fields, you may elect not to create a table; you can align the text fields at the left edge of the screen by pressing the Shift+Enter keys after you type the prompting text for each field

• A form control that enables a user to enter just one line of text
• It holds alphanumeric data - any character you can type from the keyboard, such as text, numbers, punctuation, or symbols
• Use it when you want to collect individual pieces of data, such as a person's first or last name, a city name, a state, or a zip code

• In Design view, click in the Editing window where you want the text field to be inserted.
• In the Toolbox task pane, double click the Input (Text) button. Alternatively, you can click and drag the button into the Editing window. Release the mouse button when you have placed the button in the proper location on the form.
• To change the field width, double-click the text field. In the Text Box Properties dialog box, click in the Width in characters text box and type a number that corresponds to the desired field width in characters.
• To change the text field to a password field - (1) Double-click the text field; (2) In the Text Box Properties dialog box, for Password field, click the radio button for Yes.

• Is an approximation
• In your browser, you may be able to enter more characters in the text field than the specified width
• The character width only controls the size of the box on the screen; it does not limit the number of characters that can be entered into the text field
• To limit the number of characters a user can enter in a field, edit the code by inserting the XHTML maxlength attribute and assigning a value equal to the maximum number of characters that the user can enter

You can click and drag the sizing handles for a field to resize the field, but doing so creates an inline styles in the XHTML code

• Masks the user input into the text field; instead of typed characters, asterisks or dark circles will appear on the screen when the user types data into the Password field
• The Text Box Properties dialog box has radio buttons for the Password field (default was set to "No")
• The Toolbox task pane has a separate form control for a password field; choosing the password form control generates a text box with a default choice of Yes for the value in the Password field, and it generates a different default name for the field
• Although you can use Expression Web to create a password field, you would need to use ASP.NET to validate (verify) that the password field contains a valid value

• In Design view, click in the Editing window where you want the radio button group to be inserted.
• In the Toolbox task pane, double-click the Input (Radio) button. Alternatively, you can click and drag the button into the Editing window. Release the mouse button when you have placed the button in the proper location on the form.
• To add more buttons, press the right arrow key. Press the Shift+Enter keys. In the Toolbox task pane, double-click the Input (Radio) button to insert the next radio button.
• To assign a group name and a value for a button - (1) Double-click the radio button; (2) In the Option Button Properties dialog box, click in the Group name field, delete any existing text, and enter a name. Click in the Value field and enter a value; (3) Optionally, for Initial state, click the Selected radio button to make it the default choice.

• It's a form control that is used when you want the user to enter a single choice from several choices
• Do not have more than 5 radio buttons per question
• It's common to have a button already selected, which means that it will appear with a small, black circle inside the button (select the most common choice)
• Because a form can have several groups of radio buttons, each group must be given a name
• In addition, each button must be assigned a value; ex.: first button a value of 4, the second of 3
• You can also copy and paste the radio button form controls
• Each button must be assigned a value

• Data that will be sent to the form handler
• The manner or extent to which a property will be changed
• Each button must be assigned a value and must have a different value

• The XHTML element that allows you to enter descriptive data for a form control
• Provides text for a Windows control - in this instance, your radio buttons
• Although you could just type the prompting text next to the radio button, each radio button should be given a label element
• It helps make the Web page more accessible to visitors who have impaired vision
• It can also be styled so that you can change the label text's appearance or alignment

• The way you wrap the [label] and [/label] tags around the prompting text does matter; if you wrap just the prompting text with the [label][/label] tags, then you can style only the appearance of the prompting text; ex.: [input type="text" id="lastname" /][label]Last Name[/label]
• If you wrap the prompting text and input control, then you can style the prompting text and position the input control; ex.: [label][input type="text" id="lastname" /]Last Name[/label]

• If you did not create a table for the form elements, you could create a style for the label element to change the left margin for the label tag to 100 pixels, for example. By creating a left margin for the label element, you ensure that all the labels and radio buttons will align in the same position.
• The text for the label element does not have to be the same as the values you entered for each radio button in the form. For example, you assigned the value of 4, 3, 2, and 1 to the radio buttons. For the label values, you will provide more information to the user than just a number.

• The label element also can be used with the for attribute. The advantage of using the for attribute with the label element is that, in addition to enabling the user to click a radio button or a check box, it also allows the user to click the text beside the radio button or check box in all browsers, which helps users who have impaired motor skills to make a selection. When you click the Label button in the Toolbox task pane, Expression Web does not enter the for attribute along with the label element. The for attribute works together with the ID attribute. Expression Web inserts the value attribute, not the ID attribute. Therefore, to enable the user to click the text associated with a radio button or check box in all browsers, you need to edit the XHTML code. Replace the value attribute with the ID attribute. The values of the for attribute and ID attribute must match. A sample use of the for attribute with the label element appears as follows -
• [form method="post" action=""]
• [p]What would you like on your burger?[/p]
• [input name="burger" type="radio" checked="checked" id="choice1" /]
• [label for="choice1"]Mustard[/label][br /]
• [input name="burger" type="radio" id="choice2" /]
• [label for="choice2"]Ketchup[/label]
• [/form]

• In Design view, click in the Editing window where you want the check box group to be inserted.
• In the Toolbox task pane, double-click the Input (Checkbox) button. Alternatively, you can click and drag the button into the Editing window. Release the mouse button when you have placed the button in the proper location on the form.
• To add more check boxes, press the right arrow key. Press the Shift+Enter keys. In the Toolbox task pane, double-click the Input (Checkbox) button to insert the next check box.
• To assign a group name and a Value for a check box: (1) Double-click the check box; (2) In the Check Box Properties dialog box, click in the Name field and enter a name. For the value, click in the Value field and enter a value. Click the OK button; (3) Optionally, for Initial state, click the radio button for Checked to make that check box the default choice. Click the OK btton.

• A check box control enables a user to choose zero, one, or more than one item from a list of items (a group of choices)
• Creating check boxes is very similar to creating radio buttons
• You must assign the same group name to all check boxes in the group, and each check box must be given a value that will be sent to the form handler

• A form control that allows one or more selections
• List boxes are not only used for a list of links, they are also used to show a list of items from which to choose
• When the list box displays only one choice at a time, it is called a drop-down box (or drop-down list box)
• Useful when you want to conserve screen space

• In Design view, click in the Editing window where you want the drop-down box to be inserted.
• In the Toolbox task pane, double-click the Drop-Down Box button. Alternatively, you can click and drag the button into the Editing window. Release the mouse button when you have placed the button in the proper location on the form.
• To assign a name and a value to a drop-down box: (1) Double-click the drop-down box; (2) In the Drop Down Box Properties dialog box, click in the Name field, delete any existing text, and enter a name; (3) In the Add button to add a choice; (4) In the Add Choice dialog box, enter a name for the choice in the Choice text box; (5) If you want to assign a value to the choice, click the Specify Value text box, and then either accept the default value or enter a value in the text box. Click the OK button twice.

When you design a form, put yourself in the position of the person filling out the form. Having a short text field for a person's name will lead to problems. You should have separate fields for first name, last name, and middle initial. Consider including a drop-down list for a person's title, such as Mr., Mrs., or Dr. It might also be appropriate (and useful) to include a drop-down list for a suffix field, in which a user might select M.D., D.D.S., Ph.D., Jr., Sr., and so forth. The address field should include two lines - one for the street address and another for a location within the street address, such as apartment, suite, room, building, and so forth. Include separate fields for the city, state, and zip code. Consider breaking the zip code into two fields - one for the zip code and one for the zip plus four field. It's a good idea to have a few text fields as possible because radio buttons, check boxes, and drop-down lists make the form easier to fill out. You will also ensure that users do not introduce typographical errors, and that you get the exact information you want. If possible, assign selected items to radio buttons, check boxes, and drop-down lists. For example, if you derive 80% of your business from New York, make that the selected choice for the control. If you make the form easy to fill out, it encourages the user to complete and submit the form.

It's a form control that enables the user to enter multiple lines of text

• Double-click the Text Area button in the Toolbox task pane. Alternatively, you can click and drag the button into the Editing window. Release the mouse button when you have placed the button in the proper location on the form.
• Double-click the Text area.
• In the Text Area Properties dialog box, enter a name for the text area.
• Optionally, click in the Initial value text box and enter an initial value.
• Optionally, click in the Width in characters text box and enter a width for the text box in characters.
• Optionally, click in the Number of lines text box and enter a height for the text box as a number of lines.

• A form control used to transmit a file to a server
• Displays a text box in which users can type the name of a file that they want to upload to the server
• If the user does not know the name of the file, the user can click the Browse button for the control; this allows the user to navigate to a location on the user's computer or external storage medium
• As with a text box field, you can control the width in characters of the File Upload button
• It can send any type of file, not just an image file

• In Design view, click in the Editing window where you want the File Upload button to be inserted.
• In the Toolbox Task pane, double-click the Input (File) button. Alternatively, you can click and drag the button into the Editing window. Release the mouse button when you have placed the button in the proper location on the form.
• Double-click the button.
• In the File Upload Properties dialog box: (1) In the Name text box, enter a name for the Upload button; (2) Optionally, click in the Width in characters text box and enter a width in characters for the Upload button. Click the OK button.

• In Design view, click in the Editing window where you want the Command button to be inserted.
• In the Toolbox task pane, double-click the Input (Submit) or the Input (Reset) button (by default, the Submit button is named Submit1 and Reset button is Reset1). Alternatively, you can click and drag the button into the Editing window. Release the mouse button when you have placed the button in the proper location on the form.
• In the Push Button Properties dialog box, provide a value/label for the form, which will be the text to display on the Command button.

Recall that a Command button is a Windows control; in this instance, it is a button, such as the OK or Cancel button that is used either to execute or reject a user action.

• In Design view, click in the Editing window where you want the Advanced Button to be inserted.
• In the Toolbox task pane, double-click the Advanced Button. Alternatively, you can click and drag the button into the Editing window. Release the mouse when you have placed the button in the proper location the form.
• To set the button type: (1) Right-click the button; (2) Click Advanced Button Properties from the shortcut menu; (3) Click the Button Type list arrow, and then click Normal, Submit, or Reset; (4) Optionally, you can set the button size to change the height or the width.
• To change the button text: (1) Click the button and delete the word "button"; (2) Type the text that will appear on the button.

• A form control button that can be styled
• Command button that can be styled
• It uses the XHTML [button] element; enters the [button][/button] tags in the XHTML code
• You can either enter text between the [button][/button] tags or you can enter the code for an image
• By entering the code for an image, you can have an image appear on a button, or you can use an image as a button
• You can also change the width and height of the Advanced Button

When a user fills out a form, it is sometimes easier to move from field to field using the Tab key instead of using the mouse pointer. All of the form control dialog boxes have a choice for "Tab order." The Tab order determines which field in the form can be acted on (has the "focus"). To assign the tab values, enter the value of "1" for the field you want the user to access first. Continue numbering each of the remaining fields. It is not good coding practice, therefore, to have a form element with a value of 1 at the top of the form, a form element at the buttom with a value of 2, and so forth, alternating between the top, middle, and buttom of the form. Work the Tab order from the top of the form down, so that the Tab order is a benefit, not a hindrance, to your users.

• You can use 2 XHTML elements to organize form controls: the [fieldset] element and the [legend] element
• The Toolbox task pane has a Group Box control to create the fieldset and legend
• Because you can style both the fieldset and the legend elements, you can achieve great variety and visual interest in your forms
• If you know beforehand that you want a Group box, create and size the Group box first, and then add the form controls within the Group box
• Usually, however, Group boxes are added after the form has been created

• Double-click the Group Box button in the Toolbox task pane.
• Click in the Group box to display the sizing handles. Click and drag a sizing handle to change the size of the Group box.
• With the cursor in the Group box, double-click a form control in the Toolbox task pane to add it to the box. Alternatively, cut and paste the form controls into the Group box, or select one or more form controls and click and drag them into the Group box.
• Right-click the Group box. Click Group Box Properties from the shortcut menu.
• In the Group Box Properties dialog box, click in the Label text box and enter the Group box caption (the legend).
• Optionally, you can align the legend text by clicking the Align list arrow and clicking either Left, Right, or Center.

• Is used to draw a border around the related groups
• The element that groups form controls

• Is used to provide a caption that appears as part of the border
• The XHTML element that applies a caption to a fieldset

Any data that can be entered from the keyboard

A form control that permits more than one selection from a list of choices and conserves screen space