HTML Forms and Controls
HTML Forms and Controls
Web forms also called Fill-out Forms, let a user return information to a web
server for some action. The processing of incoming data is handled by a script or program
written in language that manipulates text files and information. Form element is used to
delimit a data input form. There can be several forms in a document, but form elements
can not be nested. The forms are not hard to code. These follow the same constructs as an
other HTML elements.
Using different value for the TYPE attribute of <INPUT> element various controls are
created.
Creating Button
Creates an customizable HTML Button in a form , which has the following attributes:
NAME :attribute gives this element a name
STYLE : Inline style indicating how to render the element
TITLE :Holds additional information, which might be displayed in tool tips for
the element
TABINDEX : Set sthe tab index of the element, which locates it in the tab order
of the form, allowing the user to press the Tab key and navigate from element to
element. Set to positive or negative integers.
TYPE :Specifies the type of the element
VALUE : sets the caption of the element. Set the alphanumeric characters.
Creating CheckBoxe
Creates a checkbox in a form, which has the following attributes:
NAME : Gives the element a name. Sets to alphanumeric characters.
SIZE : sets the size
STYLE : Inline style indicating how to render the element.
TABINDEX : Set sthe tab index of the element, which locates it in the tab order
of the form, allowing the user to press the Tab key and navigate from element to
element. Set to positive or negative integers.
CHECKED : Indicates if the checkbox should appear checked initially or not.
TITLE :Holds additional information, which might be displayed in tool tips for
the element
TYPE :Specifies the type of the element
VALUE :sets the caption of the element. Set the alphanumeric characters.
Example
Family Pet
<INPUT TYPE="checkbox" NAME="dog_owner" VALUE="owns_dog">Dog
<INPUT TYPE="checkbox" NAME="cat_owner" VALUE="owns_cat"
CHECKED>Cat
<INPUT TYPE="checkbox" NAME="bird_owner" VALUE="owns_bird">Bird
<INPUT TYPE="checkbox" NAME="cow_owner" VALUE="owns_cow">Cow
Creating HIDDEN data
This is Hidden Control for "Hidden" input items. The 'hidden' input is not shown to the
user. Instead Web designer will provide the value of the field. Usually, the hidden fields
will contain configuration information for the server-side action script which handles the
form data.
NAME : Gives the element a name. Sets to alphanumeric characters.
STYLE : Inline style indicating how to render the element.
TITLE :Holds additional information, which might be displayed in tool tips for
the element
TYPE :Specifies the type of the element
VALUE :sets the caption of the element. Set the alphanumeric characters.
Example:
<INPUT TYPE="HIDDEN" NAME="backup" VALUE="Hello! From HTML!">
Example
First Name
<INPUT TYPE="password” NAME="first_name" MAXLENGTH=15 SIZE=15>
Example
Favorite <INPUT TYPE="radio" NAME="fav_radio" VALUE="WPLJ">WPLJ
Radio <INPUT TYPE="radio" NAME="fav_radio" VALUE="WLIR">WLIR
Station <INPUT TYPE="radio" NAME="fav_radio" VALUE="WZRK">WZRK
<INPUT TYPE="radio" NAME="fav_radio" VALUE="WBAB">WBAB
<INPUT TYPE="radio" NAME="fav_radio" VALUE="WNEW">WNEW
<INPUT TYPE="radio" NAME="fav_radio" VALUE="NONE">NONE
Example
Enter Your Comments
<TEXTAREA name="Question" wrap=virtual rows=2 cols=60>
</TEXTAREA>
Example
<FORM METHOD="POST" ACTION="file1.asp">
<PRE>
Salutation <SELECT NAME="salutation">
<OPTION VALUE="">None
<OPTION VALUE="Mr.">Mr.
<OPTION VALUE="Mrs.">Mrs.
<OPTION SELECTED VALUE="Ms.">Ms.
<OPTION VALUE="Miss">Miss
</SELECT>
TYPE=IMAGE
Indicates an image users can click much as they would a Submit button. The mouse
coordinates in the image are also passed to the form’s action URL. It has the following
attributes:
NAME :attribute gives this element a name
SIZE :Gives the size of the control
SRC :Specifies the URL of the image.
ALT : Sets the text that should be displayed for browsers that can not handle
images. Sets to an alphanumeric strings.
ALIGN : Sets the alignment of text following the image.
DISABLED : Specifies that the element is disabled when first displayed
STYLE : Inline style indicating how to render the element
TITLE :Holds additional information, which might be displayed in tool tips for
the element
TYPE : Specifies the type of the element.
VALUE : Indicates the symbolic result of the field when activated that is passed
to the form processing script.
USEMAP :Sets the URL of the client side map specification to be used.
TABINDEX : Set the tab index of the element, which locates it in the tab order of
the form, allowing the user to press the Tab key and navigate from element to
element. Set to positive or negative integers.
Example
<INPUT TYPE=”IMAGE” SRC=”submit.gif” NAME=”Submit” VALUE=”Submit”>
TYPE=RESET
This INPUT tells the browser that the user wants to clear all of the fields and start over
again.
NAME :attribute gives this element a name
SIZE :Gives the size of the control
DISABLED : Specifies that the element is disabled when first displayed
STYLE : Inline style indicating how to render the element
TITLE :Holds additional information, which might be displayed in tool tips for
the element
TYPE : Specifies the type of the element.
VALUE : Gives the button another label besides the default, Reset. Set to
alphanumeric characters.
TABINDEX : Set the tab index of the element, which locates it in the tab order of
the form, allowing the user to press the Tab key and navigate from element to
element. Set to positive or negative integers.
Example
<INPUT TYPE=reset VAUE=”Reset this form”>
Example 8.1
<HTML>
<HEAD>
<TITLE>
WEB Page 8.1:form element Text and Button
</TITLE>
</HEAD>
<BODY BGCOLOR="#ccffff">
<CENTER>
<H1>
Creating HTML Controls Text and Button
</H1>
<FORM NAME=forms1>
<INPUT TYPE=TEXT Name=”txtfld” SIZE=25
TITLE="Enter some text">
<BR>
<BR>
<INPUT TYPE=BUTTON Value=”Click me”
NAME=”bt” TITLE="Click to continue...">
<BR>
</FORM>
</CENTER>
</BODY>
</HTML>
Example 8.2
<HTML>
<HEAD>
<TITLE>
WEB Page 8.2: Submitting data from forms
</TITLE>
</HEAD>
<BODY BGCOLOR=”#CCFFFF”>
<CENTER>
<H1>
Creating HTML Submit and Reset Controls
</H1>
<FORM NAME=”forms1” METHOD=”POST”
ACTION=”http://g6c7f5/nvv/thank.asp”>
Enter your name:
<INPUT TYPE=TEXT Name=”txtfld” SIZE=25 VALUE=””
TITLE=”Enter name please …”>
<BR>
<BR>
<INPUT TYPE=”submit” NAME=”Submit” VALUE=”Submit”
TITLE=”Finished with data entry…”>
<INPUT TYPE=”reset” VALUE=”Clear Form”
TITLE=”Clear all the entries…”>
<BR>
</FORM>
</CENTER>
</BODY>
</HTML>
Example 8.3
<HTML>
<HEAD>
<TITLE>
WEB Page 8.3: form controls- TextArea, password and hidden
</TITLE>
</HEAD>
<BODY BGCOLOR="#CCFFFF" TEXT=orange>
<CENTER>
<H1>
Creating HTML Controls- TextArea Password and hiddeen
</H1>
<FORM NAME="forms1">
Name : <INPUT TYPE=TEXT Name="txtfld"SIZE=25
TITLE="Enter a text...">
<BR>
Password: <INPUT TYPE=PASSWORD NAME="psdfld" SIZE=20
TITLE="Enter Password Please...">
<BR><BR><BR>
<TEXTAREA NAME="txtarea" ROWS=5
COLUMNS=30>
Hello... You are in Text Area
</TEXTAREA>
<BR><BR>
<INPUT TYPE=HIDDEN NAME="hdfld">
<INPUT TYPE=BUTTON Value="Click me"
NAME="bt1" TITLE="Click me to continue...">
<BR>
</FORM>
</CENTER>
</BODY>
</HTML>
Note: It is very difficult to set the form layout with all its controls at a proper
position. Use of <TABLE> to position all the form controls is highly
recommended.
Example 8.5
<HTML>
<HEAD>
<TITLE>
WEB Page 8.5: form control: image submit button
</TITLE>
</HEAD>
<BODY BGCOLOR="#ffffcc" TEXT="#00cc99">
<CENTER>
<H1>
Creating HTML Controls: mage submit button
<FORM NAME="forms1" METHOD="POST"
ACTION="http://g6c7f5/nvv/thank.asp">
Enter your name:
<INPUT TYPE=TEXT Name="txtfld" SIZE=25 VALUE=""
TITLE="Enter name please ...">
<BR>
<BR>
<INPUT TYPE="IMAGE" SRC="sub.gif" height=40
width=60 NAME="Submit" VALUE="Submit"
TITLE="Finished with data entry...">
<BR>
</FORM>
</H1>
</CENTER>
</BODY>
</HTML>