Forms

Forms are designed to let you collect information from the people who use your website. This information is submitted to your web hosting server, where it is acted on by a server side program.

An Overview of Forms

The html code required for this form is shown below. The html code

1. provides for data input,
2. has explanatory text,
3. specifies the method by which the data will travel to the server -- "post",
4. designates a program to act on the data -- "calcbmi.php"

<form action="calcbmi.php" method="post">
  Height (inches) <input type="text" name="hgt" size="2">
  Weight (pounds) <input type="text" name="wgt" size="3">
<input type="submit" value="Submit Data">
</form>

When the submit button is clicked, the data is sent, and the "calcbmi.php" program called. This program is written in PHP. It accesses the data submitted, and calculates and displays the BMI.

<?php
$wgt=$_POST[wgt];
$hgt=$_POST[hgt];
echo "Weight = ".$wgt." pounds<br>";
echo "Height = ".$hgt." inches<br>";
$bmi=$wgt/2.2/$hgt/$hgt*39.3*39.3;
$out_bmi=sprintf('%0.1f', $bmi);
echo "BMI = ".$out_bmi." kg/square meter";
?>

The Form Tag

The <form> tag controls the data submission process. It does this in two ways:

1. By its attributes.
2. By gathering together as a logical unit, all those data input tags placed between the <form> and </form> tags. These are submitted together when the <submit> tag is clicked. Data is sent to the server when a submit button is clicked; the 'action' file is then executed immediately.

Attributes of the Form Tag

1. The method attribute -- Forms may contact the server by either of two methods: "get" and "post". "Get" is used to get information from the server, for example, to open a web page. Obviously, when "get" is used, information is both sent and received. "Post" is used to send information to the server.
2. The action attribute -- You will have written a program and placed it on your hosting server to process the form information. The address of this program is provided with the "action" attribute of the <form> tag. The 'action' file is written in a server side language (such as PHP).
3. The target attribute -- The 'action' file is opened in the window designated by the target attribute.
4. The enctype attribute -- Information is encoded before sending to the server. The manner of encoding is determined with the 'enctype' attribute. Its value is a mime type, e.g.
   • "application/x-www-form-urlencoded" -- This is the default. Information is sent as though it were a web address. Certain characters are converted to their hex representation, before sending.
   • "multipart/form-data" -- No character conversion. This must be used when files are sent.
   • "text/plain" -- Data sent as plain text.

Tags Used for Data Input

Those tags which are used to accept input include:

• <input>
• <select>
• <textarea>.

Note: Explanatory text and line breaks can be placed anywhere within the form to make it more intelligible.

The Input Tag

The tag most commonly used for data input is the <input> tag. The <input> tag has no closing tag, so all information is specified by attributes within the tag.

There are at least ten different types of <input> tag. All accept different types of data. The type is, of course, specified by the 'type' attribute.

The Type Attribute -- Different Types of Input

Types "button", "checkbox" and "radio" accept click data. Try clicking them.

The Value Attribute -- Different Meanings for Different Types

  
<input type="text" value="Type your answer here.">


<input type="password" value="BoJangles">

However, when used with types "button", "reset", and "submit", the value is used as a text label for the button.

  
<input type="button" value="Click here.">
<br>
<input type="reset" value="Reset Data">
<br>
<input type="submit" value="Submit Data">

When used with types "radio" and "checkbox", the value sets a type for the data to be submitted. The default type is boolean.

The Checked Attribute

The 'checked' attribute of the <input> tag can be used with types 'radio' and 'checkbox'. The syntax is:

<input type="checkbox" checked="checked" value="I">

or simply:

<input type="checkbox" checked value="I">

The Name or id Attribute -- Key to Recovering Data

I have found so far, that the name, rather than the id attribute must be used. Still need to check whether this is a quirk, or dependent on the html version.

The size and maxlength attributes

By using size="3" in the input field, you can limit the number of spaces allowed for input. maxlength limits the number of characters which can be input.

Textarea Tags

Here is a textarea. The number of rows and cols in the textarea are specified as attributes of the <textarea> tag. Some of the text has been entered. The user can add more text.

<textarea rows="10" cols="30">
The cat was playing in the garden.
</textarea>

Select Tags

<form>
Which fruit do you prefer?
<select>
 <option>Apples
 <option selected>Bananas
 <option>Cherries
</select> 
</form>

• The Shift or Ctrl key must be pressed in order to select more than one option.
• The name attribute must be set to an array as shown in the example.
• The size attribute is helpful; it sets the number of options which show in the select box at one time.

<form>
<select  multiple size="3" name="fruits[]">
 <option>Apples</option>
 <option selected>Bananas </option>
 <option selected>Cherries</option>
</select> 
</form>

Examples of Forms

<form name="form1">
      <input type="button" 
             value="Whatzit" 
             onClick="alert('Whatever')">
</form>

<form name="NameIt">
What is your First Name?<input type="text" name="fname">
<br>
What is your Last Name?<input type="text" name="lname">
<br>
<input type="button" value="Click here."
 onClick="alert('Hello '+document.NameIt.fname.value+' '
+document.NameIt.lname.value)">
</form>

<form>
  I have a bike: 
  <input type="checkbox" checked name="Bike">
  <br>
  I have a car: 
  <input type="checkbox" checked name="Car">
</form>

  
<form>
Male: 
<input type="radio" checked  name="Sex" value="male">
<br>
Female: 
<input type="radio"          name="Sex" value="female">
</form>

Fieldset Tags

<fieldset>
 <legend>
  Body Mass Index Calculator:
 </legend>
 <form action="calcbmi.php" method="post">
  Height (inches) <input type="text" name="hgt" size="2">
  Weight (pounds) <input type="text" name="wgt" size="3">
 </form>
</fieldset>