Beginner's Guide to Web Development

Beginner’s Guide to Web Development – HTML forms

Have you ever purchased anything online? If you have, one step you probably had to take before making the purchase was to enter your credit card information on the site. Chances are, you were entering that credit card information into an HTML form.

Forms are a mechanism for allowing users to submit data from a web page to another source. That other source can be anything from a web server to another web page. For now, we are going to concentrate on covering the syntax and features of forms, followed by sending information from one web page to another web page using forms.

First, let's look at a sample form. Type the following into your text editor and save it under the c:\tomcat\webapps\examples\jsp\work\ directory as form.jsp

<html>

<head>
   <title>Sample form</title>
</head>

<body>

<b>Below is a sample form</b>

<form name="sample" action="form.jsp" method="GET">
   <input type="text" name="example" value="">
   <input type="submit">
</form>

</body>

</html>

Start Tomcat if you haven't already done so. Type the following URL into your browser.

http://localhost:8080/examples/jsp/work/form.jsp

That is all there is to it. You have just created an HTML form. Now, let's go over the semantics behind the form. First of all, a form can not be a form without beginning and ending form tags - <form> </form>. One thing you may have noticed is that the beginning form tag <form> contains some extra information. This information includes the following:

name=<some name>

action=<some action>

method=<some method>

Your form needs a name in case you ever want to reference your form from somewhere else inside your web page. Thus, give your form a name by following the syntax shown above.

The action parameter of the form tells the form where to submit its contents. For example, if the action on the form was http://www.yourcompany.com/page.jsp, the form would submit its contents to the web page entitled page.jsp located at www.yourcompany.com.

The method parameter of the form tells the form how to submit its contents. There are two possible values for this – GET and POST. The GET method submits its contents as an extension of the URL. For example, if you type the word "test" in the text box located in your form.jsp page and hit submit, the URL now contained in your browser should look like the following:

http://localhost:8080/examples/jsp/work/form.jsp?example=test

Notice the original URL now has the following appended to it:

?example=test

This is how the GET method passes data. It converts the data you have entered in your form to name=value pairs that follow a question mark appended to the URL.

The POST method passes information in a different way. POST passes information as a string of data located inside the HTTP request. Thus, if you use POST, you will not be able to see the data being passed since the browser handles forming the HTTP request behind the scenes.

Usually, if the data you are passing is sensitive information, or if you need to pass a large quantity of data, you should use the POST method. If neither of these are requirements, there should be no problem using the GET method, but GET does has limits on how much data it can pass at one time. However, it would require a relatively large form to surpass this limit.

Besides the <form> tags, <input> tags are also contained within the form. Input tags take the following form:

For example:

The above will display a text box on the screen. Whatever the user types in the text box will be passed to the next page in the following format:

hello=<what user typed>

The name attribute of the input tag is simply what you want the first part of the name=value pair to be. In this case, this was "hello". The value can be left blank if you want the user to enter information, or you can specify a value. We will talk more about these types of things shortly.

Now let’s move on to the types of input available. The following are the types of input that can be used in a form:

checkbox - a box the indicated whether a choice has been selected.

hidden – this field will not show on the page. Usually used to pass information not entered by the user

image – an image such as a GIF or JPEG. Can be clicked to submit the form.

password – a text box in which the text typed is usually displayed as asterisks

radio – usually set up as a group of buttons in which only one can be selected

reset – button that resets the data in the form. Used to clear the form.

select – a dropdown list of possible options from which the user can choose.

submit – submits the form’s contents to the destination specified by the action parameter

text – a field for entering text

textarea - a field for entering text with a customizable number of rows and columns

So far, you have seen the text input type and the submit input type. Now let's create a sample JSP page that contains an example of most of the above elements. Type the following into your text editor:

<html>

<head>
<title>Example form</title>
</head>

<body>

<form name="complete" method="GET" action="complete_form.jsp">

CHECKBOX: <input type="checkbox" name="checkbox" value="checkbox">
<br>
<br>

HIDDEN: <input type="hidden" name="hidden" value="hidden">
<br>
<br>

PASSWORD: <input type="password" name="password" value="">
<br>
<br>

RADIO: <input type="radio" name="radio" value="radio">
<br>
<br>

RESET: <input type="reset" name="reset" value-"">
<br>
<br>

SELECT: <select name="select">
<option>op1</option>
<option>op2</option>
</select>
<br>
<br>

TEXT: <input type="text" name="text" value="">
<br>
<br>

TEXTAREA: <textarea name="textarea" cols=10 rows=3>This is a text area </textarea>
<br>
<br>

SUBMIT: <input type="submit" name="submit" value="submit">

</form>

</body>

</html>

Save this page as complete_form.jsp in your c:\tomcat\webapps\examples\jsp\work\ folder. Go to the following URL:

http://localhost:8080/examples/jsp/work/complete_form.jsp

Go ahead and enter different values for each of the input types and hit submit. Notice while doing so what values get passed in the URL. Notice that each of the input type name=value pairs are separated by an ampersand (&).

Let’s go over how the data from each of the input types listed above is passed.

Checkbox: The checkbox can either be checked or unchecked. If checked, the name of the checkbox will be passed along with whatever its value attribute is set to. If not checked, nothing is passed. In this case the following would be passed:

checkbox=checkbox

Hidden: Whatever data is in the value attribute of the hidden input type will be passed. In this case:

hidden=hidden

Password: Be careful with this one. Even though the text appears as asterisks when you type in the password field, its value will come across as plain text in the URL. For example, if you typed "spot" in the password field, the following would be passed:

password=spot

Radio: Radio is a little tricky. If selected, the name of the radio button and the value contained in its value attribute are passed. If not selected, nothing is passed. Usually radio buttons are used in groups. To accomplish this, you would have multiple radio buttons, each with the same name. However, you would give each a different value. That way, you could determine which was selected by analyzing the value passed.

Reset: Pressing reset simply clears the form.

Select: The syntax of the select box is different than that of the input types. Notice that select has options contained within it. These constitute the choices in the select dropdown. The data passed from the select menu takes the form of

For example, if selecting op2 from the menu in complete_form.jsp, the following would be passed:

select=op2

Submit: Pressing submit simply submits the contents on the form to the destination specified in the action attribute of the form.

Text: Whatever is typed in the text box is passed. For example, if "hello" was typed in the box, the following would be passed:

text=hello

Textarea: Whatever is typed in the textarea is passed. For example, if "hello" was typed in the area, the following would be passed:

textarea=hello

So far we have completed a general overview of forms, their elements, and how those elements work. This should help you immensely as you progress to more advanced areas of web development. Make sure to check out HTML Tag Reference for more information on HTML.

Now it's time to move on and talk about communication between JSP pages. HTML forms will play a key role in this communication.