University of Bahrain

Information Technology College

Computer Science Department

Semester 1, Year 2006/2007

ITCS 373: Class Lab Work

HTML 3

 

 

Instructor: Dr. Eshaa M. Alkhalifa

 

You will make a form today that will accept information from the user.

 

  1. Find HTML Kit on Start®Programs®HTML Kit®HTML Kit and start the program. 
  2. Click on the empty page icon on the top left to open a new document.
  3. Find this:  <title>Untitled</title> and replace the word untitled with the words Class Assignment Three.
  4. Following the <body> tag write the tag <form> and after some space the tag </form>.
  5. A form accepts input from the user after asking the user some questions.  So we can write a question between the two tags; How would you rate my page? And in order to receive the response we use the input tag as follows; <input name="rating" type="radio" value="1">.  If you look at the preview window you will see a circle like this;     next to your question.  We can then place a <br> in front of the <input line to make this circle appear on the next line, and we can also write “1” ahead of the input line.
  6. You should now be able to add the other options, 2,3,4 and 5.  Make sure that the name field in all have the same value.  If you give them different names, then more than one could be selected at the same time, by if you wish only one to be selected, they should all have the same name.
  7. You must also give the value field different values as follows;

1<input name="truth" type="radio" value="1">

2<input name="truth" type="radio" value="2">

3<input name="truth" type="radio" value="3">

  1. The value is what will appear after you send this form to the script used to process it.
  2. Add the other questions as shown in the output screen below.  The questions are; Do you like the picture shown on the home page?  Do you believe that I am saying the truth about my grades? Follow the same steps as in steps 5 and 6 but give the first question the input name= “picture” and the second input name= “truth” for all possible choices.
  3. Now if you take a look at your form in the preview window, you will notice that it has no title and the questions do not have numbers.  We can add a title to the form by adding the line <center><H1> Questionnaire </H1></center> before the questions.  You can place it either before the form tag or following but you should not place it before the body tag yes it will appear if you do but it is not good scripting}.  We can also add numbers to the questions by adding the tag <ol> before the first question and <li> before every question and </li> following each question.
  4. For question four, we wish to add a text box so that the visitor of the page can write anything he or she wishes in the text box as comments on how good the page is.  We start by writing the question and giving it a number by typing; <li>Do you wish to make any comments?</li>
  5. You can now write following this the input command as follows; <input name="comment" type=text size=40>
  6. The problem is that only a small text box appears and the user cannot type more than one line.  We can solve this by changing the command to the following; <textarea name="comment" type=text rows=5 cols=40>
  7. Place a <br> following the question to make sure the text box appears in the line following the question.
  8. Take a look at the words that appear in the text area.  They are the words from your script that follow the textarea tag.  You can make sure these do not appear by placing a closing tag for the text area in front of the tags that appear </textarea>
  9. This gives me a great idea.  Why don’t we write something in the area so that users who are lazy say something good about our page.  We can write for example.  I believe this is the best page I ever saw.  Do you know where to write this?
  10. Make sure that the forth question is at a correct distance from the third by checking your <br>s and the space shown in the preview screen.
  11. Now we want to add one last question with the proper space, only this time it is a checkbox type.  Take the proper spacing, question numbering and write the question; What part(s) did you like?
  12. Now to write the input code for the checkboxes you type the following;

<input type="checkbox" name="option1" value="picture"> Pictures<br>

<input type="checkbox" name="option2" value="hobbies"> Hobbies<br>

<input type="checkbox" name="option3" value="grades"> Grades<br>

<input type="checkbox" name="option4" value="frames"> Frames<br>

  1. Make sure your first checkbox appears in a new line and not immediately following the question.  You should know how to do this.
  2. Now let’s add a little color to this page by using the same style file that we used in our last lab.  The instruction if you forgot it is; <link href="style.htm" rel="stylesheet" type="text/css"> Do you know where to place this?
  3. The form is still missing something.  It doesn’t send this data anywhere.
  4. We inform the form of where to send the data by adding the action attribute to the form.  If you write <form action= mailto:youremail@yourhost.com method= “POST”>  The form will open an email message window using the outlook on the computer the visitor is browsing and will send all the information via that to your email box.  This does not work on university computers, internet cafes, or anywhere that has more than one user accessing a public computer.
  5. The method tag can be set to either “GET” or “POST”.  GET is used for search engines mostly because it places what you write in the form at the end of the URL.  Test this by opening a browser window to GOOGLE and typing in the box in capital letters “TUTORIALS”  You will see something like this in the URL that appears when the search results appear.  http://www.google.com/search?sourceid=navclient&ie=UTF-8&rls=GGLD,GGLD:2003-51,GGLD:en&q=TUTORIALS
  6. You will the word you wrote appear at the end of the URL.
  7. “POST” works with larger forms like ours where we do not wish what is typed to appear as part of the URL.
  8. You can write the following line instead of your <form> tag to send your results to a special script that I wrote for the purpose. <form action="http://www.itcs.silvertair.com/files/Extras/myfirst.php" method="POST">
  9. Your form will not be complete until you give the user the ability to send the information to the file you named in the action attribute.  You can do this by adding a last input by typing the following just before the end of the form. <input type="submit" value="submit" name="submit">
  10. Now you should be able to test your form.

 

Your form should now look like the example shown.

 

 

 

Once you submit this form then you should see the following screen if everything you did is correct;