Web Design Wikiclass | Tutorial / Web Form Basics

Overview: This tutorial gives you some activities to learn more about Web forms, as well as interaction between browser and Web server in the processing of Web form inputs.

Activity 1: A Simple Web Form in HTML code

Create a Web form similar to the following.

You can use the service from www.phpform.org to make the form.

(Q1) Send the portion of HTML code that contains the form to Steven.

Activity 2: A Simple Form Processor with GET method

Install a Web Server in your PC. Please refer to the previous tutorial.
Create a file processor.php with the following content:

        <?php print_r($_REQUEST); ?>

Put the file in the Web server's document root.
If you do not want to use your own server or you have problem in installing one, you can use the script I put the my Web server: http://plbpc013.ouhk.edu.hk/web-form-test/processor.php
Modify the HTML code in Activity 1 so that the form's method is GET and the action is processor.php.
Now, open the web form in your browser. Fill in some inputs and submit them to the server.

(Q2) What is the URL after you submit the form?

(Q3) What the script processor.php can get from the request sent by the browser?

Go back to the Web form again. Input some Chinese characters.

(Q4) How Chinese characters are encoded in the URL after you submit the form?

Go back to the Web form, and try to fill in a lot of text in the text area.

(Q5) Do a little research to find the maximum length of the URL that the Web server can handle.

(Q6) What error code your Web browser will receive when "the requested URL's length exceeds the capacity limit for this server"?

Activity 3: A Simple Form Processor with POST method

Modify the HTML code in Activity 1 so that the form's method is POST and the action is processor.php.
Now, open the web form in your browser. Fill in some inputs (try to fill in a lot of text in the text area) and submit them to the server.

(Q7) What is the URL after you submit the form?

(Q8) What are the advantages of POST method as compared to GET method in Web forms?

(Q9) Which method you should use when the form contains a password input?

Activity 3: Check Box, Radio Box and Drop-down Selection

Create a Web form that contains check boxes, radio boxes, and drop down selection.
Modify the form code so that the form's method is GET and the action is processor.php.

(Q10) What has been submitted to the server via the Web form?

(Q11) What is the major difference between check boxes and raido boxes in a Web form?

(Q12) What will happen if your browser sends two or more name-value pairs with the same name attribute to the processor.php?

(Q13) When should we use the same name attribute in two or more inputs of the Web form?

Activity 4: Form Validation with JavaScript

Reference: http://www.elated.com/articles/form-validation-with-javascript/

(Q14) What are the two main methods for validating Web forms?

(Q15) In validating Web form with JavaScript, What is the additional attribute you need to use in the <form> tag?

(Q16) How do you skip the form validation with JavaScript?