1

Forms

2

Our goal is to design a form like that shown below

3

And to process the information submitted to

make a receipt like the one below.

4

Choose some page properties (e.g. a font

family, size, etc.)

5

Go to Insert/HTML/Text Objects/H1

6

Enter some text in the resulting <h1>

header tags and center it.

7

Forms

• The purpose of this page is to collect information from someone.

• The interactive parts of a web page are placed in a form. The implication is that something will be done with this data – that there will be some action, that it will be handled.

8

The Form Handler

• This project will consist of two files. • The first has the form and is for the viewer to

enter information. • The second handles the information collected on

the form. • When we insert a form onto the first page, it will

ask about its action. We will start a second file, so that we answer this question when it arises.

9

Make a new file, it should be a dynamic, php file.

10

Save the second file.

11

Return to the first file and place the

cursor in the body after the <h1> tags.

12

Go to Insert/Form/Form

13

Use the Browse button to location the second file which will handle the first file’s action.

14

Choose a method (Post for now), give the form a name and click OK.

15

Form HTML

• The resulting HTML is: <form action="Evaluation_Handler.php"

method="post" name="frmEvaluation"> </form>

• All of the items on a page that a user might interact with belong between the <form> tags. – Note the action path should be relative in this

case.

16

Let us use a table with 3 rows and 1 column to organize our form.

Use the Insert Table button and the resulting dialog box.

17

In the first row, insert another table with 3

rows and 4 columns.

18

Enter text in the first cell and with the cursor in the second go to Insert/Form/Textfield

19

Form with Textfield inserted.

20

Go to Code View and give the textbox a

name that is meaningful in the context.

The default name was textfield. Giving it a meaningful name is known as self-documenting code and goes a long way to preventing confusion later on.

You can get rid of the panel group by clicking on the arrow between the panel group and document window.

21

Enter more text and textfields as shown.

22

Merge the first two columns of the third

row.

23

Go to Insert/Form/Radio Group

24

Enter a name for the Radio Group, put in the labels (what a viewer

will see) and values (what a coder will use) for the choices.

Radio buttons are used for situations in which the user can choose one and only one of the options.

25

Eliminate the break tags <br> if you want the radio buttons on the same line.

26

Go to Insert/Form/List/Menu

27

Give the <select> tag a self-documenting name, expand the Properties Inspector, click on the List Values button.

28

Add labels (what will be seen) in the drop-down list menu and

their corresponding values. Click on the + button to add more.

29

Result of adding the menu (drop-down list)

30

In the second row of the outer table,

insert a table of 5 rows and 2 columns.

31

Merge the columns the first row and

repeat for the second row.

32

Place the cursor in the second of the merged rows. Go to Modify/Table/Split Cell. Choose to split it into 5 columns.

33

Enter the rating scale explanations in the

five cells. Note that in design, if one hits the Enter keys, one gets paragraph tags <p>, which usually end up giving one a double spaced effect between paragraphs.

To achieve a single spacing effect we want break tags <br> which can be achieved in design by hitting Shift-Enter.

34

Enter the text of the first evaluation question and in the

adjacent column insert a RadioGroup with 5 RadioButtons.

35

Naming Issue

• We should give the RadioGroup a self-documenting name, but how descriptive should we be? – We might be very descriptive and call it

radQuestionClearObjective. If there are only a few questions, this is a good approach.

– If there are going to be several questions that we will want to treat almost identically, then a consistent naming scheme will aid in this process. In such a case we might go for radQ1, radQ2, etc.

36

After eliminating the break <br> tags, it should look like the following.

Note that when we made the second row have 5 columns, Dreamweaver decided that in the third row which has two columns, the first cell would have a colspan 4. But we can change that.

37

Change the colspans to 3 and 2 and then center the radio buttons.

38

Use copy and paste in code view to finish the other rows. Don’t forget to change the radiogroup name for each question.

39

If you’re like me and can’t spell, use the spell checker. Go to Text/Check Spelling.

40

In the last row of the outer table, enter some text a

break tag <br> and then insert a TextArea.

41

Use the Character Width (cols) and Number of Lines (rows) attributes to control the size of the TextArea.

Give it a meaningful name!

42

Upload it to the server and look at it in a browser.

Let us

1. Put some space between the three sections using break tags <br>.

2. Reduce the width of the TextArea and increase its

height.

43

Result of changing textarea. Note that the before viewing it in the browser, the textarea looked to be a good size when seen in Dreamweaver Design View.

Always view in a browser (maybe even different browsers) before accepting a design.

44

One can use a horizontal rule (Insert/HTML/Horizontal Rule)

to make section separations more distinct.

45

After the outer table but still with in the form place a button

that the user can click to submit his or her evaluation. Buttons can be made to do many things now, but oif the button’s only job is to submit a form, choose Submit as the Type.

46

Edit the value attribute and place the button in

a paragraph with center alignment.

47

The Handler

• Eventually we want to collect and perhaps even analyze the data submitted, but for now we will make a “receipt” – a slightly processed spitting back of the information submitted.

48

Choose some page properties (e.g. a font family, size, etc.). Place some text in <h1> tags, center it.

49

Let’s place the date in a table with three rows, one column.

50

Insert php tags in the first row and start with the code to print the date.

51

print date('F j, Y')."<br />";

• The code above demonstrates how php handles concatenation (the placing of one thing after another – in this case the date and then a break tag). PHP uses a dot to indicate that two things should be concatenated.

• The code above also shows a newer style for the break tag. In the newer style unpaired tags end in slash angle bracket. – <br> becomes <br />

52

About compliance

Because we did mot specify otherwise, Dreamweaver elected to go with the looser style.

53

To make a newer file XHTML compliant, go to File/Convert/XHMTL

54

To make new document XHTML compliant, go to Edit/Preferences choose New Document and check

Make Document XHTML Compliant

55

Retrieve course data from the evaluation page

and place it on the evaluation summary page.

56

$course = "{$_POST['txtCourse']}";

• There is an array of information that is brought over when the Evaluation form was posted. It is contained in the $_POST array. – An array is a set of associated variables or objects.

• One specifies an element of the array (a specific member of the set) by using an index in the square brackets.– Sometimes the index is a number and sometimes it is a

name.

57

Result so far

58

More of the same

Notice how the use of self-documenting variable names makes the code more readable.

59

60

61

62

Our choice of values

• We got a yes or no answer on the “required” radio buttons because that is the set of values we chose for the individual radio buttons.

• Similarly we got a number for the drop-down list grade because those are the values we chose.

• These values were chosen more with storage in mind (and possibly calculation) than with display in mind.

63

The IF structure

The if structure allows one to test for a certain condition and then respond differently depending on whether the condition is found to hold (be true) or not.

64

if($required == "Yes")

• The above code is the start of the if structure. It starts with the keyword if.

• It is followed by a condition/proposition/ Boolean expression in parentheses. This part asks a true-or-false question. In this case, it asks “Is it true or false that the required variable is equal to “Yes”?”

65

Are you asking me or are you telling me?

• Note the condition uses two equal signs. • An easy mistake to make to have one equal sign

instead of two. – One equal sign is not a syntax error (a mistake in the

code rules that means the code can’t be executed) rather it is a logical error (a mistake in the code that will run but give incorrect/undesired results).

– Remember one equal sign means you’re telling two things to be equal (a.k.a. an assignment statement) whereas two equal signs means you’re asking if two things are equal.

66

if($required == "Yes"){

print "required";}

• After the condition comes a a set or curly brackets. Inside the brackets are all of the statements (a block of statements) that one wants executed when the condition is true. – Note that there is no semicolon after the condition.– If there is only one statement, you don’t need the curly

brackets. • (I usually include the curly brackets even when there’s only

one statement. This approach anticipates that I or someone else may edit the code and add statements.)

67

if($required == "Yes"){print "required";}else {print "elective";}

• One has the option of following the “true block” with the keyword else and a second block that will be executed when the condition is found to be false.

68

Using a switch to deal with a bunch of “cases”

69

70

Dealing with the questions one at a time.

71

72

Calculating a average rating.

73

74

Dealing with the questions as a set.

75

Make a variable for the comments, etc.

76

Result with comment section

77

An issue with quotes will need to be resolved.

78

An issue with quotes. See what I mean?

We need to learn some string processing to deal with this problem.

79

And should we allow the user to write HTML?

80

Result of the user writing HTML

81

Enter Your Name (Post)

82

Your Name Handler (Post)

83

Result of post version

84

Enter Your Name (Get)

85

Your Name Handler (Get)

GET instead of POST

86

Result of get version

87

GET versus POST

GET POSTLess Private/Secure More Private/Secure

Can’t use with larger amounts of data

Can use with larger amounts of data

Handler is “bookmarkable” Handler is NOT “bookmarkable”

User can get new results without returning to initial page

User can’t get new results without returning to initial page