Home Free Downloads Docs FAQ's The Collective Community Tools Help About MyWebServer

MyWebServer |   Technical Info
	Creating And Handling Forms Forms are a great way of getting input from your users. If you want to take a survey, want to know how your viewers found your web site or just about anything else, forms are the way to do it. Web forms are sections of web pages that usually contains some type of data entry or display widgets like text entry fields, lists or check boxes. There is usually a button that is associated with the form which takes some action like submitting the information on the form or starting a search etc. The action is usually handled by a CGI (Common Gateway Interface) program or script which runs on the web server and is written to extract the data from the form and do something with it like store it in a database or do a search etc. Another thing that CGI programs usually do is display something in the users web browser like a message saying the information has been submitted or listing the results of a search etc. There are some great generic CGI scripts and programs available like FormMail by Matt Wright that E-Mail all the data items on a form to a particular web address and inform the user that the data was submitted. MyWebServer has a built in form handler that downloads all the data that was entered on a form to a file in a directory you specify. Every time somebody clicks on the submit button on a web form using this handler a new file is created. More about this later. All Forms begin with an opening tag looks something like the following: <FORM METHOD="POST" ACTION="the url of your CGI program"> You almost always want to use POST as the METHOD, especially if you are asking for a password or other private information. The ACTION attribute should be set to the URL of the program that takes care of your results. MyWebServers Generic Post Handlers are always available and ready to receive the data from any form when a user clicks on the submit button. Use the Virtual Files MWS/HandlePost.html,  MWS/HandlePostRaw.html or MWS/HandlePosPlusHeaders.html as the "action" of your forms and POST as the "method". These Generic Form handlers gather the data from the form and stores it in a text file in the directory specified in the Server Properties Page. MWS/HandlePost.html Saves HEADERS and CONTENT (standard). MWS/HandlePostRaw.html Saves HEADERS, ENVIRONMENT and CONTENT. MWS/HandlePosPlusHeaders.html Saves CONTENT and HEADERS separately. The form opening tags for these handlers might look something like this. <FORM METHOD="POST" ACTION="../../../MWS/HandlePost.html"> <FORM METHOD="POST" ACTION="../../MWS/HandlePostRaw.html"> <FORM METHOD="POST" ACTION="../MWS/HandlePostPlusHeaders.html"> The trickiest part about using MyWSebServer's built in form handlers is that you need to refer to the handler by relative addressing. That is you need to include the path to the handlers relative to the location of the page that is referring to it. In the above examples each of the ../ in the paths indicate how many directories up the hierarchy the MWS directory may be found. See the article on Using The MyWebServer Virtual Toolbar for a more in depth explanation of relative addressing. The closing tag for a form looks something like this </FORM>. In between the beginning form tag and the closing form tag are HTML descriptions of the widgets and data displayed in the form. The most common tag is the <INPUT> tag. It creates a form element. Depending upon the values of its attribute, the <INPUT> tag can create a number of elements. One of the most popular is the: <INPUT TYPE="text" NAME="somename"> The TYPE is set to text and tells the browser to display an area in which the user can type some text like the following: The name element can be set to whatever you want and is sent as a variable name to the program that sorts your results. You should always use it. You can also add the SIZE="" attribute to change the size of the INPUT field: <INPUT TYPE="text" NAME="example" SIZE="20"> The value of size is in characters, so the above INPUT field can hold 20 characters. The following are some examples of various sizes: You can add the VALUE="" attribute to have your text field contain some text before the user inputs any text like the above examples of size.   There are a number of different values for the TYPE attribute of INPUT that changes how the INPUT field is displayed. The following are some of the many different options: One of the most important values is the submit value. It creates the button that the user clicks to send the data to your program. <INPUT TYPE="button" NAME="submit" VALUE="submit"> It appears in the web browser like the following: The VALUE attribute is what is displayed on the button in the browser. Many forms also include the reset button also: <INPUT TYPE="button" NAME="reset" VALUE="reset"> It appears in the browser as the following: There is also a TYPE, similar to text that allows users to type in text but instead of displaying the text that they type astericks are displayed instead. This type is the password type: <INPUT TYPE="password" NAME="example"> This would appear in the browser as the following (try typing in the box to see what it does): There are also check boxes and radio buttons that you can add to your form: <INPUT TYPE="radio" NAME="example"> <INPUT TYPE="checkbox" NAME="example> If you add multiple of each they would look like the following in a web browser: Example 1 Example 2 Example 3 Example 4 Example 1 Example 2 Example 3 Example 4 Notice that the difference between check boxes and radio buttons is that any number of check boxes can be checked at one time while only one radio button can be checked at a time. The other important tag to know for forms is <TEXTAREA>. It takes ROWS="" and COLS="" attributes and also a has a closing tag, </TEXTAREA>. It looks like the following in the web browser:   You now have enough information to start implementing your own forms in HTML. The following is an example of a simple registration form one might use to collect the names and addresses of people that want register for a free newsletter or catalog.  Catalog Order Form Name: Address: City: State: Zip: Phone: E-Mail: Click Here to view the form in a new window. Here is the actual HTML that displays the above form in a new window.  Catalog Order Form  <HTML> <HEAD> <TITLE>Catalog Order Form</TITLE> </HEAD> <BODY>    <form method="POST" action="../MWS/HandlePost.html">       <p align="right">       Name:<input type="text" name="Name" size="60"><br>       Address:<input type="text" name="Address" size="60"><br>       City:<input type="text" name="City" size="60"><br>       State:<input type="text" name="State" size="60"><br>       Zip:<input type="text" name="Zip" size="60"><br>       Phone:<input type="text" name="Phone" size="60"><br>       E-Mail:<input type="text" name="EMailAddress" size="60"><br>       <input type="submit" value="Submit" name="B1">       <input type="reset" value="Reset" name="B2">    </form> </BODY> </HTML Click Here to download this file. If you place this file in your MyWebServer root directory and name it catalogOrderForm.html you will be able to use the form on your computer with the following URL. http://localhost/catalogOrderForm.html