Html Forms:

<FORM> & </FORM>tags Input types Select list
Text area <Fieldset> &<Legend> Form Example


<FORM> </FORM>
A form is basically a structure of input elements, which is capable of delivering information using CGI scripts. Forms can be created using HTML Tags. <FORM></FORM> are the beginning and ending tags. It includes the following options:

METHOD=“POST/GET”
ACTION=“file/script”

The METHOD Parameter determines how the data will be sent to the cgi program that will process the form. The possible methods are GET, or POST. The ACTION parameter is used to give the URL of the CGI program that
will process the form. All forms actions must be processed by a CGI program.

<form action= “mailto:name@hotmail.com” method=post>

Top



Input tags
Using <INPUT> tag you can create text fields, hidden text fields, password fields, radio buttons,check boxes, Submit button and Reset button

<INPUT TYPE=”text/hidden/password/checkbox/radio/submit/reset”  SIZE=”n” MAXLENGTH=”x” NAME=”name” VALUE=”presettext”>

TYPE parameter identifies the type of input field. The various types are text,password,checkbox,radio,submit ,&   reset.
name parameter provides a field name.

size sets the width of the box in characters

value sets the default text

maxlength sets the maximum amount of characters allowed in the box

(1) Text Field

Text Entry Fields allow the User to enter text values. The complete tag is given below.

<input type=”text” name=”recipient” size=30 value=”” maxlength=50>

name sets the name of the field in the form

Eg: The following code has a field by name ‘recipient’

<form action=”mailto:webgimmicks@yahoo.com” method=”post”>
Enter your Name<input type=”text” name=”recipient” size=30 value=”” maxlength=50>

</form>

(2) Password field

If the TYPE is Password, then the text which is typed in appears as asterisks i.e.
***********. To use password text boxes set type to “password”.

Eg.
<Form action=”mailto:webgimmicks@yahoo.com” method=”post”>

Enter the password <input TYPE=”password” NAME=”password” SIZE=”10″ MAXLENGTH=”10″>

</form>

(3)Checkbox and radio box

Checkbox appears as a square box in which we can the option of selecting more than one value whereas a radio button box is used when only one value can be selected from a list of values. The following is the full tag.

<Input type=”checkbox/radio” name=”check” value=”yes” checked>

name sets the name that will appear in the e-mail
value if the box is checked the value appears beside the name in the e-mail

checked if this is set then the box will already be checked when it is loaded

Eg.

<Form action=”mailto:webgimmicks@yahoo.com” method=”post”>
Select your favorite place.<br>

 <input type=”checkbox” name=”place1″ value=”yes”>Europe<Br>

 <input type=”checkbox” name=”place2″ value=”yes”>Hawaii<Br>

 <input type=”checkbox” name=”place3″ value=”yes”>Bahamas<Br>

(This is a radio button.)<Br>

Are u interested in a free round trip?<Br>

 Yes<input type=”radio” name=”petshow” value=”yes” checked> or no<input type=”radio” name=”petshow” value=”no”><Br>

</form>

(5) Submit button and Reset buttons

Submit button:
This also appears as a button. This button is associated with a form action. When pressed the information in the form is  processed by the form action which is specified in the <FORM> Tag.

<Form action=”mailto:webgimmicks@yahoo.com” method=”post”>

If there is a URL of a CGI script set in the <FORM> tag then this button, when pressed tells the browser to load that URL.

<Input type=”submit” value=”submit”>
value  parameter identifies the text that will appears on the button.

Reset button:
This appears as a button. When the button is pressed all of the entry fields in the form are cleared or returned to their default values.

<Input type=”reset” value=”Clear “>

value  parameter identifies the text that will appears on the button.

Eg.

<Form action=”mailto:webgimmicks@yahoo.com” method=”post”>Enter your
Name<input type=”text” name=”recipient” size=30 value=”” maxlength=50>

<Br>Enter the password<input TYPE=”password” NAME=”password” SIZE=”10″ MAXLENGTH=”10″>

<Br>Select your favorite place.

<Br><input type=”checkbox” name=”place1″ value=”yes”>Europe

<Br><input type=”checkbox” name=”place2″ value=”yes”>Hawaii

<Br><input type=”checkbox” name=”place3″ value=”yes”>Bahamas

<Br>(This is a radio button.)

<Br>Are you interested in a free round trip?

<Br>Yes<input type=”radio” name=”petshow” value=”yes” checked> or no<input type=”radio” name=”petshow”

value=”no”>

<Br><input type=”reset” value=”Clear “><input type=”submit” value=”submit”></form>

Top



Scrolling list and drop down list

Both types are created with the same code except for one difference. The drop down list does not specify the amount of choices there will be. If you want your select box to appear as a drop down box, don’t include the “size=” attribute.The following are the tags and attributes.

Scrolling list:

<select name= “choose1” size=4 multiple>

name assigns a name to the box
size if set, the select box will be a scrolling box and it sets the number of options in the scrolling box

multiple if set, the viewer will be able to choose more than one option by holding down “ctrl” key. While

choosing, the box will always appear as a scrolling list.

<option selected value=”option1″>NY

value sets the name of the select box
selected if set, this option will already be selected when the form is opened

Eg.

<Form action=”mailto:webgimmicks@yahoo.com” method=”post”>
  <select name=”select” size=”3″>

 <option selected value=”option1″>NY

 <option value=”option2″>NJ

 <option value=”option3″>NC

 </select>

</form>

Drop down list:
Please note that there is no size attribute in a Drop down list in the <select name= >  tag.

Eg:

<form action=”mailto:webgimmicks@yahoo.com” method=”post”>
<select name=”select”>

 <option selected value=”option1″>Cat

 <option value=”option2″>Dog

 <option value=”option3″>Pig

 </select>

</form>

Top



<textarea>

<textarea> and </textarea> tags provide a larger space to enter comments or feedback etc. The following are the attributes of the <textarea> tag.
Eg:

<textarea name= areaname rows=r cols=c>

name assigns a name to your text area
rows sets the height of your area by the amount of rows of text will be visible at a time

cols sets the width of your area in characters

Eg:
<textarea name= “comments” rows=4 cols=40>

Top



FIELDSET – Form Control Group

You can group logically related form elements by <FIELDSET> . For example, If you have a long form in your web page and it contains a few fields about personal information, some fields asking about business information, and some fields about your qualifications. <FIELDSET> could be used to group those fields .The browser draws a box around the set of fields to indicate that they are related.

Personal information

Name:
Address:

Business

Title:
VAT NO:

Qualification

Qualification:
Statement:

LEGEND – Fieldset Caption– You can use the LEGEND element at the start of a FIELDSET. The LEGEND element defines a caption for the group.

Try the following code:

<table cellspacing=”5″>
<tr>
<td>
<FIELDSET>
<LEGEND>Personal information</LEGEND> Name:
<INPUT TYPE=text NAME=name >
<BR> Address:
<INPUT TYPE=text NAME=address1 >
</FIELDSET>
</td>
<td>
<FIELDSET>
<LEGEND >Business</LEGEND> Title:
<INPUT TYPE=text NAME=title >
<BR> VAT NO:
<INPUT TYPE=text NAME=vat >
</FIELDSET>
</td>
<td>
<FIELDSET>
<LEGEND >Qualification</LEGEND> Qualification:
<INPUT TYPE=text NAME=quali >
<BR> Statement:
<INPUT TYPE=text NAME=statement >
</FIELDSET>
</td>
</tr>
</table>


Complete Example

<html>
<body>

<form action=”mailto:webgimmicks@yahoo.com” method=”post”>

(The following is a drop down list)<Br>What is your pet?

 <select name=”select”>

 <option selected value=”option1″>Cat

 <option value=”option2″>Dog

 <option value=”option3″>Pig

 </select><Br>

(The following is a scrolling list)<Br>select your state name.

 <select name=”select” size=”3″>

 <option selected value=”option1″>NY

 <option value=”option2″>NJ

 <option value=”option3″>NC

 </select><Br>

 What is your pet’s name?<input type=”text” size=20 maxlenght=50 name=”inputtext”><Br>

  (The following is a check box.).<Br>Select your favorite place.<Br>

 <input type=”checkbox” name=”pizza” value=”yes”>Europe<Br>

 <input type=”checkbox” name=”potato” value=”yes”>Hawaii<Br>

 <input type=”checkbox” name=”pasta” value=”yes”>Bahamas<Br>

 (This is a radio button.)<Br>Are u interested in pet show?<Br>
 Yes<input type=”radio” name=”petshow” value=”yes” checked> or no<input type=”radio” name=”petshow” value=”no”><Br>

The following is  textarea.<Br>Enter your pet’s details.

 <textarea cols=40 rows=4 name=”textarea”>

 </textarea><Br>

 Enter the password?<input type=”password” name=”password” size=10><Br>

 <input type=”reset” value=”Clear “><input type=”submit” value=”submit”>
 </form>

 </body>

 </html>

Leave a Comment