Forms

You come across many forms on the web. They are very useful in collecting data. In this lesson, I shall tell you how to display a form on a web page and its attributes. How to send data collected from form is separate topic. It involves any or all of these like Java Script, Data Base, PHP and CGI.

Feedback Form

Please fill out this form.

Name:

0-19 20-35 36-50 Over 50

Milk Bread Eggs

Please provide your employment aspirations:



<h2>Feedback Form</h2>
<form method="GET" action="">
  <p>Please fill out this form. <br>
    <input type="hidden" name="recipient" value="[email protected]">
    <input type="hidden" name="subject" value="Feedback Form">
  </p>
  <strong>Name:</strong><input name="name" type="password" size="25">
  <br><br>
  <input type="radio" name="age" value="under20" checked="checked"> 0-19
  <input type="radio" name="age" value="20-35"> 20-35
  <input type="radio" name="age" value="36-50"> 36-50
  <input type="radio" name="age" value="over50"> Over 50
  <p></p> 
  <input type="checkbox" name="groceries" value="milk" checked="checked"> Milk
  <input type="checkbox" name="groceries" value="bread"> Bread    
  <input type="checkbox" name="groceries" value="eggs"> Eggs
  <br><br>    
  <select name="fruit">        
    <option>Apples</option>        
    <option>Oranges</option>        
    <option>Bananas</option>        
    <option>Pomegranate</option>    
  </select>    
  <select name="other">        
    <option>Beer</option>        
    <optgroup label="Pop">           
      <option>Coca-Cola</option>           
      <option>Pepsi-Cola</option>           
      <option>Dr. Pepper</option>           
      <option>Canada Dry</option>        
    </optgroup>        
      <option>Hamburger</option>        
      <optgroup label="Snacks">           
      <option>Cheesies</option>           
      <option>Bits and Bites</option>           
      <option>Potato Chips</option>           
      <option>Pretzels</option>        
    </optgroup>    
  </select>
  <p>Please provide your employment aspirations:<br>  
    <textarea name="aspirations" rows="3" cols="40">    (Be brief and concise)   </textarea>
  </p>
  <p>
    <input type="submit" value="Submit Your Entries"><input type="reset" value="Clear Your Entries"> 
    <input type="button" value="Just a Button!"> 
  </p>
</form>

In this example, I have included all input types which can be used in a form. Let me explain them.

Form starts with <form> and ends at </form>. There are many attributes associated with form tag. I used two of them. First; Method and second action. Methods are two, Get and Post. Get doesn't show the contents of form in URL after submission. Post does.

In action we tell what to do when the form is submitted. Like store information in database, display some message on screen etc.

There are basically five input types. Important: Each type must have unique name.
  1. Text Line
  2. Radio Button
  3. Check Box
  4. Drop Down Menu Option
  5. Large Text Area
1. Text Line: It is used to input small information which needs only one line like Name, City, Address, Age etc. There are couple of attributes associated with <input> tag. Lets start with 'name'. we define name for each input field. every data has to be distinguished so we use different name for each data. I used 'Type' as password. This won't show the data on screen. It is used for password fields. If you put 'Text' in type, it will show you the text you put. 'Size' is the length of text field. Size 25 means that maximum 25 character can be put.

2. Radio Button: It is type 'radio' of input, written as <input type="radio">.  Radio buttons are used when ONLY ONE OPTION CAN BE SELECTED. The 'name' for all options are same because they are of same category. We can assign different 'values' to them. In our example our values are ages. Please note that when we close the tag we still have to write something which will be displayed on web page. The value is hidden to user. It will be sent to where ever we want to send the information. 'checked="checked" is used to highlight or check some value as default.

3. Check Box: Check box is same as 'radio'. The only difference is the type. To use check box, you will use 'type=check'.

4. Drop Down Menu Option: This is different. Instead of <input>, we use <select> for this. So, <select name="aname">. We define a name for this category and put their options as <option>name1</option> and <option>name2</option> ...... and close it with </select>. In the second drop down menu option there is a tag <optfroup name="aname">. This is used to put items/options into a group. Like, soft drinks are under pop.

5. Large Text Area: For large text input we use <textarea name="aname" rows="5" cols="50">. We define name for our field, number of rows and columns as how big that text box should be.

For 'Submit' and 'Reset' buttons there are special types reserved. For submit it is 'submit' and to reset the form it is 'reset'. 'value' is the text which will be displayed on the button. For any other button, you can use type="button" and its value.
So, This was how you can put several fields on the form. As I said that this lesson will teach you how to put form on the page. To send the form to an e-mail or to database or store the information as a text file, you need to learn JavaScript, PHP, CGI and or MySQL(or any web data base).

Thanks again for coming to my site. I would be happy to know your feedback.