Web Form/ Form Element: Form element is used to collect data by a webpage/Website from user.

Then, these data may be sent to a file/page to process and to do the needful. It contains two parts –
Front end and Back End. Front end is presentation of data collection screen while Back End involves
submission, processing and taking necessary steps. Back end activity is done by CGI (Common Gateway
Interface) Program. CGI is either a compiled program written in VB, C, C++ etc or a Script like Perl, PHP,
Java script etc. We do not need to discuss the back end scripting. Our syllabus is limited to front end
presentation only.
Form Element/Tag : Form tag behaves as a block/group element for the elements that are responsible
for designing, collecting and sending data. It has three aspects.
1. Form Header: It defines how and where to send data.
2. Input Fields : It includes Form Controls like Text Box, Check Box, List box, Radio button etc.
3. Action Buttons: Controls to submit/cancel data to destination.

Attributes of Form Element:

1. action: This attribute is used to specify a URL of a page on server where form data should be
sent e.g. http://example.com/form_file.php. If not mentioned, current page is default page.
2. method: It is the HTTP method used by browser to submit form data. There are many methods.
But GET and POST are two most frequently used methods. (Also in portion).

GET POST
i. The default HTTP method i. POST is used to send sensitive
ii. Appends form-data into the URL in data..
name/value pairs. ii. It does not display the data in the
iii. Data sent with GET will be visible in the URL. URL. It hides data in HTTP body.
iv. The length of a URL is limited (2048 iii. It has no size limitations, and can
characters). be used to send large amounts of
v. URL with data can be bookmarked. data.
vi. GET is better for non-secure data, like query iv. Form submissions with POST
strings. cannot be bookmarked

3. accept-charset: Optional attribute. It should be encoding acceptable to the server and code
processing form. If not provided, the encoding of sending page is taken.
4. autocomplete: On (default) or Off. On sends responses based on saved entries. If off, make sure
to off every field that may allow auto completion
5. enctype: Used to specify how form data should be encoded. Only used if the method attribute is
set to post. There are three possible values
a. application/x-www-form-urlencoded: The default value which replaces all spaces with
“+” and converts all special characters to ASCII Hex Values
b. multipart/form-data: Nothing is encoded. Input is uploaded to the server exactly as it is
entered into the form.
c. text/plain: Spaces are converted into “+” symbols, but not other characters are encoded
6. target: _self /_blank/_parent/_top to open page of response after data are submitted
Input Tag/Element – Input Element is used to take variety of data from user. It has a very strong
attribute ‘Type’. This attributes decides what type of control user gets in the form and how the user
should respond to make entries. Attributes of input are
 1. Type : Indicates the type of input control. Value of type attribute are as follows:
a. Text: used for single line of user input, such as search boxes or names etc.
b. Password: used for single line of user input, such as search boxes or names, but
characters are masked( some symbol are used for all characters).
c. Email: used to enter email id. A ‘@’ is must to separate username and domain name.
d. Checkbox: used when more than one option available and one/more options may be
selected. Checked can be added for default selection.
e. Radio: used when out of many options, just one option is required to be selected.
Checked can be added for default selection.
f. Submit: creates a button. Clicking this button submits all data of form to the Url in
action attribute. No code is required.
g. Reset: creates a button that automatically resets form controls to their initial values. No
code is required.
h. Button: Creates a button. But this button needs code to be functional. We will not use
this value.
2. Name: used to give a name to the control which is sent to the server along with its value.
3. Value: used to provide an initial value inside the control.
4. Size: allows to specify the width of the text-input control in terms of characters.
5. Maxlength: allows to specify the maximum number of characters a user can enter into the text
box.

Textarea Tag/Element – Multi Line Text. This is used when the user is required to give details that may
be longer than a single sentence. It has these attributes:
Name: It is used to give a name to the control which is sent to the server along with its value.
Rows : It is used to declare no of rows the control will allow to user.
Cols : It is used to declare no of columns (character in a row) the control will allow to user.
Select Box Tag/Element – A select box, also called drop down/ pull down/ combo box or scrolling list
box which provides option to list down various options in the form of list, from where a user can select
one or more options. Attributes are:
Name: Used to give a name to the control which is sent to the server to be recognized and get the
value.
Size: Used to present a scrolling list box/pull down box. Size > 1 – Scrolling List, Size 1 (default)- pull
down box.
Multiple: If set to "multiple" then allows a user to select multiple items from the list.
Option Tag/Element – It is used inside Select element to give different option data to the pull down list.
Attributes are:
Value: The value that will be used if an option in the select box is selected.
Selected: Specifies that this option should be the initially selected value when the page loads.

HTML Frames are used to divide browser window into multiple rectangular sections or frames, where
each frame can load and display separate HTML document. Frame is used inside Frameset element.
Attribute of frameset:
Rows : in pixel or percentage of screen
Cols : in pixel or percentage of screen
Border: frame border width in pixel
Border color: Colour of border.
Attribute of Frame:
Src: URL of document.
Name: Name given to frame
Target: Frame to open URL document.
Scrolling: Yes/No/Auto. Option of scrollbar
Marginwidth: Space between page content and frame border left/right side.
Marginheight: Space between page content and frame border top/bottom side.
Frameborder: 1/0- 1 shows border, 0 hides
Noresize: User can not resize frame window.

Assignment: Prepare HTML document for the page given in Page No 162 of Book
Submit Printout of HTML Code and Web page with your name, std & sec, roll no printed.