Bright Java Tutorial

is brought to you by DoITBright LLC

HTML

The <form> and </form> Tags

Web pages are mostly used to convey information, opinion or idea. Web pages are also widely used to collect information from the people viewing the page. Most of the time, it is done through HTML forms. What are HTML forms anyway? Just like the paper based forms that we know of, forms consists of parameters that we need to fill in with information. These parameters maybe collected in a free text format or select one among the list of choices or select as much as you can among the list of choices and so on. To declare a form in HTML, we use the <form> tag and close it with the </form> matching tag. Anything that goes between the above mentioned tags are part of the HTML form. Here is a simple example of an HTML form.

  <html>
    <head>
      <title>HTML Form Example</title>
    </head>
    <body>
      A Simple HTML Form Example<br/>
      <form action='firstHtmlPage.html'>
        Full Name : 
          <input type='text' id='fullName' 
          name='fullName' value='' /><br/>
        <input type='submit' value='Submit Data' />
      <br/>
      </form>
    </body>
  </html>
                           
The above HTML form example will display a text box and a submit button. The text box is an HTML form element where we can key in texts in response to what it is asking for that is specified at the label beside it. In this case, it is asking for the user's full name. This text box is the <input> tag with an attribute 'type' equal to 'text'. It is also noticeable that we have an 'id' and 'name' attribute. The 'id' is very useful when you start to code in Javascript. The 'id' will be the primary identifier of your HTML form element. In server side programming like JSP, the attribute 'name' is the one that will identify your data coming from your HTML form that was submitted by the user. Let us not worry too much about it for now. We will deal with these concepts in the future. The <input> tag with an attribute 'type' equal to 'submit' is the submit button. Clicking this button will submit the form. Please take a look at the attribute 'action' of the <form> tag. The value specified for that attribute is where the data will be submitted. In real world scenario, we wont be using an HTML document as a value for the 'action' attribute. This should be a server side application like a JSP, PHP or ASP. For now, let us use the 'firstHtmlPage.html' which is the very first HTML document we created when we started this tutorial. Click the submit button and observe what happens.

The GET Method of HTML Form Submission

As mentioned above, the HTML form is one way to collect information to the user. Therefore, it is meant to be submitted. The <form> tag has a 'method' attribute. If we specify 'get' as the value of the 'method' attribute, it means we will be submitting the form and the parameter names with each corresponding value will be part of the query string. In this case, it will be '?fullName=Rolan' given that we entered 'Rolan' as the value of the text box for 'Full Name'. The 'GET' method is highly advised to be used for data retrieval purposes. We can also achieve the same thing by not including the 'method' attribute and it's value at all. The 'GET' method is used by default. Let us look at the HTML form example code below.

  <html>
    <head>
      <title>
        HTML Form Using GET Method Example
      </title>
    </head>
    <body>
      A Simple HTML Form Example<br/>
      <form action='firstHtmlPage.html' method='get' >
        Full Name : 
          <input type='text' id='fullName' 
          name='fullName' value='' />
        <br/>
        <input type='submit' value='Submit Data' />
        <br/>
      </form>
    </body>
  </html>
                           
Click the submit button to see for yourself. Observe the URL plus the query string on your browser. The query string always start with a '?' followed by the parameter names and corresponding value for each. Each parameter is separated by '&'. To try this out, you will need to add another text box. You may try experimenting now or you can wait later since we will be dealing with a lot of form submission in the future.

The POST Method of HTML Form Submission

The 'POST' method is ideally used for updating data. This is more secured as compared to the 'GET' method. The main reason is, the parameters and each corresponding value are not exposed to the user via the query string. You could say that the information is hidden from the human eyes. To use the 'POST' method of HTML form submission, simply set the value of the attribute 'method' to 'post'. Let us look at the HTML form example below.

  <html>
    <head>
      <title>
        HTML Form Using POST Method Example
      </title>
    </head>
    <body>
      A Simple HTML Form Example<br/>
      <form action='firstHtmlPage.html' method='post' >
        Full Name : 
          <input type='text' id='fullName' 
          name='fullName' value='' />
        <br/>
        <input type='submit' value='Submit Data' />
        <br/>
      </form>
    </body>
  </html>
                           
Try clicking the submit button. Visually, everything will be the same except for the fact that there will be no query string. Let us have another HTML form example that is focused on the most commonly used form elements such as the text area, check boxes, radio buttons, and select box.

  <html>
    <head>
      <title>
        HTML Text Box, Text Area, Select Box, Check Boxes 
        and Radio Buttons
      </title>
    </head>
    <body>
      A Simple HTML Form Example<br/>
      <form action='firstHtmlPage.html' method='post' >
        Item Name : 
          <input type='text' id='itemName' 
          name='itemName' value='' />
        <br/>
        <textarea id='description' name='description' >
        </textarea>
        <br/>
        Color : 
        <select id='color' name='color' >
          <option value='red'>Red</option>
          <option value='green' selected>
            Green
          </option>
          <option value='blue'>Blue</option>
        </select>
        <br/>
        Category : 
        <input type='radio' name='category' 
          value='for sale' id='category' checked/>For Sale
        <br/>
        <input type='radio' name='category' 
          value='for rent' id='category' />For Rent
        <br/>
        <input type='radio' name='category' 
          value='other' id='category' />Other
        <br/>
        Sub Category : 
        <input type='checkbox' name='subcategory' 
          value='1' id='subcategory' />1
        <br/>
        <input type='checkbox' name='subcategory' 
          value='2' id='subcategory' checked/>2
        <br/>
        <input type='checkbox' name='subcategory' 
          value='3' id='subcategory' />3
        <br/>
        <input type='submit' value='Submit Data' /><br/>
      </form>
    </body>
  </html>
                           
At this point, you already know how to create an HTML form together with it's commonly used elements like text box, select box, text area, radio button and check box. You also know the difference between submitting an HTML form using the 'GET' method and submitting an HTML form using the 'POST' method.


Back