Creating Forms, using forms to capture data.

Student Learning Outcomes:

1. Create an XHTML form.
2. Create fields for text
3. Create text boxes
4. Create option buttons, cehck boxes, and list boxes.
5. Create methods for sending data and clearing forms.
6. Create Advance command buttons
7. Create a way to upload a file.
8. Organize and describe the form elements

Important Points:

1. Form is an object used to gather, organize, and transmit data on the web
2. Form area is the editing window to create a form.
3. Data is the source of input for the form.
4. Information is the knowledge gained by organizing the data
5. Common Gateway Interface (CGI) is a standard developed for computers to send data to a server and receive data from a server.
6. CGI script is a series of instructions written in a scripting language such as perl.
7. Form handler determines what happens to the data you entered into the form
8. Action Attribute and value identify the loacationon the server and the name of the script that will run.
9 Method attribute and valu determine how the data will be sent to the server.
10. Form fields are the areas on the form which usere provide data.
11. A field represents a single piece of data.
12. The field name is a unique identifier given to each field.
13. Field value is the particular data the user submits for a field
14. Prompting text is used to inform the user as to what data can be put into the field.
15. A command button is a windows control used to execute or reject a user action.
16. Form control is any windows control used to creat a form. 

  
16. Creating a form element:  Place your cursor where you want the form element, if no content on page double click the form button in the toolbox task pane or drag it where you want it. 
17.  Tool box task pane:



  

19. Name the form:  Right click on the form, click form properties from the shortcut menu you will see:

20. Type the name in Form name box and click OK.
21. Use a table to provide the structure for your form elements.  Insert a table with the number of rows and columns you need to hold your form.  Column A can hold the prompts for the fields and column B can hold the form fields for example or you can type the prompt then use shift-enter and put the form field.
22. Text field - holds alphanumeric data- place cursor where you want it then double click Input(text) button from toolbox.
23. Edit text field properties:  Double click anywhere in field you will see:

a. type the name of the field in the name box - write this down and if you are going to connect the form to an already existing table in a database then make sure you give the same name to the fields in your from that the fields in the database table have. In the width box put in the number of characters that will be needed for the field. Click ok.
24. Password field - masks the input into the field. place cursor where ever you want it then double click Input(password) When you go to the text box properties you will see that the password field radio button is selected for yes.

Radio Buttons - used for selecting one option out of a group of options. when using radio buttons they are used in a group.  Only one radio button may be selected at at time that belong to the group. Place your cursor where you want the field, Double click Input(radio) button in the toolbox for each button you want in the group.
26. Edit Radio Button - double click the radio button that you inserted into the form: You will see:

a. Type in the group name, value and initial status. Remember to put the radio buttons into the correct groups.

27. Label element provides text for a windows control - Type in the prompting text, right click the label button in the toolbox, click wrap.<label>Last name>/label>
28. Check Box - allows a user to choose 0, one or more than one item from a list.Double click the Input(checkbox) button from toolbox.
29. Edit check box.  Double click it you will see:

a. type in the name in the name box, type in the value, click ok.

30. Drop down boxes are used for a list of items in which only one is chosen.
a. double click the drop down box control from the toolbox.
31. Edit drop down box.  Double click the drop down box.  You will see:

 In the name box type the name you want. Then click the modify button.  You will see:

b. Type in the choice for your fist list item and value and then click OK, which will return you to the drop down box properties. click add to add additional choices to the drop down list.
32. Text area enables the user to enter multiple lines of text.  double click the text area button in the toolbox. 

33. File up load button- displays a text box in which users can type the name of a file that they want to upload to the server.
a. Placed cursor where you want up load button.
b. double click the Input(file) button or drag it to position.
c. double click the file up load button.  You will see:

d. type in a name
e. type in the width
f. Click ok
34. Command Button- place your cursor in the form, double click or drag and drop the Input(submit) button for the submit command button use the same process for the Input(reset) button.
a. Double click the submit button you will see:

b. In the value/label box type in the text to be displayed on the push button. click ok.
c. For the reset button make sure the reset radio button is selected.

35. Advance button - is a command button that can be styled.
a. place cursor in desired position
b. double click advance button or drag and drop.
c. Right click advance button, select advance button properties you will see:

d. In button type select submit and click ok.
36. To style an advance button. click on the advance button, select format from the menu bar, click new style, click selector list arrow, click button, select the font weight you want, select the color you want, select alignment, select background color, select border, border width, etc. to format your advance button.

37. Fieldset element is used to draw a border around the related groups
38. Legend element is used to provide a caption that appears as part of the border.
39. Group box control is used to create a fieldset and legend elements.
a. Place your cursor in the desired position, double click the groupbox control from the toolbox.
b. right click the group box control, select group- box properties. You will see:

b. type in the new label and click ok.
c. to style the fieldset - make sure you cursor is in the group box., click format on menu, select the selector list arrow and select fieldset, set the new formatting that you want.
d. to style the legend - format on the menu bar, select the selector list arrow and select legend and format like you want.

40. To style the form element: click in the form, click format on the menu bar, click new style, click selector and select form then choose the style element you want and click ok.

Best Practices: