The website should have at least 3 PHP files. The first web page has one textboo
ID: 3665837 • Letter: T
Question
The website should have at least 3 PHP files.
The first web page has one textbook for getting user's last name, and one button for going to 2nd page.
The second web page has one textbook for getting user's first name, and one button for going to first page, and another button for going to third page.
The third web page displays user's last name and first name, and one button for going to second page, and another button for going to first page and reset all the data.
All data must be retained from page to page except from the last page to the first page.
Explanation / Answer
Initiating the HTML File Click the Start button, trace to Programs option, then trace to Accessories, and click on Notepad to open it. Once in the Notepad program, enter the following commands to start an HTML document : Create your HTML file so that it looks something like this. The HTML tags do not have to be in uppercase. The spacing between commands is up to you. However, the spacing within the brackets is important. There will be a form here soon. Now we need to save the file as an HTML file. To do this click on the File menu and then choose Save As. Choose where you want to save the file. In this class we will be saving to the Public folder for convenience. Then choose a File Name to save it as. The name must end in .htm or .html. Next select the down arrow next to the Save as Type. Choose All Files. Finally, click on the Save button. 5 Now we will see what our HTML file will look like in a web browser. First we'll open Internet Explorer by clicking on the blue "E" on the Desktop, or under Programs in the Start menu choose Internet Explorer. Once in Internet Explorer open your file. Click on File in the top left corner, then on Open, and then on Browse. Navigate to the Public file folder by double clicking it or highlighting it and choose your file. Click Open. You will see this: "There will be a form here soon." Throughout this class we will be making a series of changes to our HTML document, saving that document, then looking at it in the browser to see if those changes yielded the desired results. This is an important part of the web desing: learning how to make changes and saving those changes, then checking to see what the new changes look like, then making more changes. Composing the Form We'll compose our form assuming it is for an O.U. web page, using the generic CGI. The command
initiates a form section of a web pages and
ends that section. To begin a form we must tell the browser to send the information that a user enters into to a CGI script file and tell where that file is. We do that with the ACTION attribute:
Another attribute of the FORM tag is the METHOD, which is how the form input will be sent to the gateway. The method can be either "get" or "post". Post means to send the form entry results as a e-mail document. This is the most common method. Get is usually used with search engines. However, this is the method used by the OU CGI script. So the FORM command would look like this: 6 Next we must input the code to send the information from the form to the appropriate e-mail address. This is done with: The Type="hidden" attribute hides this from the user. The name="mailto" attribute names this Input tag. The value="youremail@ohiou.edu" attribute tell the CGI program where to send the information from the form. So now our HTML Form commands should look like:
Input Limitations • Text fields are limited to single lines. If you attempt to use multi-line text fields, any time a user enters more than 255 characters, none of them will be transcribed into the E-mail you receive. You can work around this limitation by also including a standard mailto link. • Every field is limited to a maximum length of 80 characters! • The Web page containing the form must be on an Ohio University server (contains ".ohiou.edu"). To test, upload the HTML file to your OU server, but use a different name or folder. 7 • The E-mail destination of the information must be one user of an OU system (contains ".ohiou.edu"). • The total number of fields defaults to 20. If you want to change this, you must include a hidden field specifying the number of fields your form uses. • The names of the visible fields for data entry must be a lower case letter "f" followed by two or three digits from 01 to 999, inclusive. • If you include fields numbered beyond 20, you must include a hidden form-field named "maxlines" with value equal to the highest field number used. • You must include a valid Ohio University E-mail address in the hidden form-field named "mailto"! • You may choose to provide an absolute URL in the hidden form-field named "nexturl" and appropriate link text in the hidden form-field named "nextname". If you do, they will be used to construct the return link. • The visible fields can be text, radio-button, check-box, or pop-up-selection. Value for these fields must be at most 80 characters. • The hidden form-field named "subject" is optional but strongly recommended; it identifies the Web page where the E-mail originates. • If you do not use a particular field, or if the user leaves a field blank, a blank line will be included at that place in the message. • You do not have to number the fields sequentially. You should organize the form in a way that will be logical and convenient for the user and number the fields so that the resulting e-mail will be easiest for the recipient to use. Input Text To create a single line of text for the user to enter we use the Input command, with the Type attribute equal to Text. For example: That will create a box for text input. Using the OU CGI we have to name the input command appropriately: 8 Then when the form is mailed to us we will get a line that say f01= whatever they entered in that text box. If we wanted something in the text box for the user to overwrite we would use the Value attribute. For example: (###) ###-#### The size of the text box can also be changed. To do this we use the Size attribute. The default size is 20. Here are some options, but remember that using OU's CGI script we can not go above size=80. Now that we've seen a few text line options, let's make some changes to our HTML document and see what it looks like.
What is your Name?
What is your Phone Number?
Do you like my web page?
The new command above is
for Break. It is like hitting the enter key. The different text lines in our form will now be on separate lines. 9 Checkboxes Checkboxes are an option on a form that allows users to select a line of text in an on/off yes/no method. On screen they appear as a small box that either has a check in it or does not. The command for a checkbox is as follows. Checkboxes can be checked by default with the addition of the keyword CHECKED in the INPUT tag. Here is an example. Now we put the two tags together and add some text afterward like this: This is a checkbox.
This is a checkbox that is automatically checked. Option Select Lists These lists are drop-down windows in which a user selects a choice from a list of options selected by the programmer. The code for an option select list with three choices follows. Your first choiceYour second choiceYour final answer Your first choice Your second choice Your final answer Your final answer 10 If you want one of the choices to be automatically selected, add the code SELECTED after the OPTION command like this.
Radio Buttons Radio buttons are similar to checkboxes. However, they ;have some limitations that checkboxes do not. This limitation is that is forces the user to choose one and only one of the choices. One may be selected by default. Below is the code for two radio buttons with text following them. The second of these buttons has been selected by default the same way a checkbox was selected with the SELECTED feature inserted after the INPUT command. This is a radio button.
This one has been selected by default. Hidden A Hidden input is a name/value pair that is returned to you but does not show up anywhere on the web page. The text for a Hidden input is simple. When the form is returned to us we would get: Location=USA Form When using the OU CGI form, the Hidden type is needed by the CGI program stating where to send the data from the form. For example, 11 Reset and Submit Buttons The Reset button allows the user to clear the data they have entered in the form and start fresh. These buttons are created with the INPUT command and the TYPE and VALUE features. The INPUT starts the tag. The TYPE is either Reset or Submit. The VALUE is the words that you want to appear in the box. Standard reset and submit buttons are as follows. clear fields submit The &NBSP command means non-breaking space and is just a way to space your buttons better. Mailto Forms If you want to make a form on a web page that is not on an OU server and do not have access to your servers CGI programs you can use the "mailto" method. If available the CGI method is preferred as the user accessing your page must have their mail preferences set up correctly for the mailto form data to successfully reach you. However the mailto form does allow for more freedom than the OU generic CGI script. The best advantage of the mailto form over the OU script is that the OU script has length and character limitations and the mailto form allows text areas, not just single lines for text. The mailto form is initiated with the following command.
12 Password This feature allows the user to enter a password that does not appear on screen but will be sent to you. The command for the password is similar to a text line and can be edited the same way. Please enter your password. Textarea This command allows you to generate a text box on your form for user input, not just a line of wrapping text. The basic command for this is: We can edit this by adding more attributes within the tag. Columns and rows can be described. Also text added between the starting and ending Textarea tags appear within the text box. This text is formatted exactly as typed including tabs, spacing and returns. Below is an example of this. Please add any comments you may have about this form class here
Constructive criticism carries more clout than negative does. Tabs and returns work within TEXTAREAS. Constructive criticism carries more clout than negative does. Tabs and returns work within TEXTAREAS. 13 Submit Image Earlier we learned how to create a submit button on the form. We also saw how to edit the text within that submit button. Now we will learn how to use an image instead of a button to send the form. Note, you can only make a Submit button, not a Reset image button. SUBMIT Saving Every time changes have been made to your simple text documents they should have been saved. The method to save as an HTML file has been discussed earlier. To save you would go to the File menu and choose Save or Save As. Make sure that the file extension (ending) is .htm or .html
Pick An Animal
DOG
CAT
BIRD
Within each anchor tag notice the "TARGET=main" addition. This tells the browser to put the page signified by the link address into the Frame named "Main". You may choose any name you wish, but it must match. For time saving purposes, the pages dog.html, cat.html, and bird.html are already on your lab computer. Please copy
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.