Note on Design Frame and Form

W3Schools
  • Note
  • Things to remember

Design Frames

Frames are a relatively new addition to the HTML standard; having been included in release 3.0 and therefore, not all browsers are supplied this group of elements. Popular browser such as Microsoft Internet Explorer and Netscape Navigator supports this feature. By using these elements, the Web page become enhance and effective for navigation purpose.

The HTML tags that divide a browsers screen into two or more HTML has recognizable unique region and it is the <FRAMESET></FRSMESET> tags. Each unique region is called a FRAME. Each frame can be loaded with a different document and hence, allows multiple HTML documents to be seen concurrently.

For example, to make a framed page with a window pane on the left and one in the right requires three HTML pages.

FRAME Page Architecture

A <FRAMESET> element is placed in HTML document before the <BODY> elements. The <FRAMESET> describes the amount of screen to each windowpane by dividing the screen into ROWS or COLS. The <FRAMESET> will then contain <FRSME> elements, one per division of the browser window.

Other Key Attributes of the Frameset Element

  • FRAMEBORDER:

Possible value 0 , 1 i . e YES or NO. A setting of zero will create a borderless frame.

  • FRAMESPACING:

This attribute is specified in pixels. For borderless frames set, this attribute’s value is zero or gap is seen between the frames where the border is used to be.

  • BORDER:

Possible values 0, 1; settings zero will create a borderless frame.

  • BORDESCOLOR:

This attribute allows choosing a color for your border. This attribute is rarely used.

<FRAME>

This element defines a single frame within a frameset. There will be a FRAME element for each division created by FRAMESET elements. This tag has following attributes.

  • SCR:

Required for frames as it provides the URL for the page that will be displayed in the frame.

  • NAME:

Required for frames that will allow targeting by other HTML documents. In order for a clicked in, the target frame must be referenced by its name.

  • SCROLLING:

Display the scroll bars in the frame. Possible values are:

  1. YES: Always display the scroll bar.
  2. NO: Never display the scroll bar.
  3. AUTO: Browser will decide based on frame contents.
  4. NORESIZE: Optional which prevents a viewer from resizing the frame. By default the user can stretch or shrink the frame’s display by dragging the frame; border and moving it in any direction.

Example:

<!DOCTYPE html>
<html>
<head>
<title>HTML Frames</title>
</head>
<frameset cols="50%,50%,50%">
<frame name="top" src="/html/top_frame.htm" />
<frame name="main" src="/html/main_frame.htm" />
<frame name="bottom" src="/html/bottom_frame.htm" />
<noframes>
<body>
Your browser does not support frames.
</body>
</noframes>
</frameset>
</html>

.

Design Form

An HTML form provides data gathering functionally to the Web page. This is very useful if the Web site is used to advertise and sell products. HTML forms provide a full range of GUI controls. A form is a collection of fields that is used for gathering information from people visiting the Web site. Site visitors fill out a form by typing text, clicking radio and checks boxes and selecting options from drop-down menus. After filling out the form, site visitors submit the data they entered, which can be processed in a variety of ways depending on the form handler set up. The form element has no formatting attributes.

Form Objects

When creating an interactive Web site for the internet, it is necessary to capture user input and process this input. Based on the result of this processing, appropriate information from the Web site can be dispatched to be viewed. Both the capturing of user input and the rendering of appropriate Web pages takes place on the client side browser`s window.

To create a FORM, we use the <FORM> </FORM> tags. The rest of the form objects (elements) must be inserted in between the form tags.

Each form object in the HTML pages will be described between its own <FORM> </FORM> HTML tags. Should there be multiple forms described in the HTML pages then, the forms array will have multiple elements, each holding a reference to an HTML form object and each element identified by own unique name (identification).

Their attribute (properties) of the <FORM> are:

  • METHOD:

The METHOD property of a form is used to specify the method used to send data captured by various form elements back to the Web server. The Method used can be either GET (default) of POST. The GET method sends the data captured by form elements is appended to the URL. The POST method sends the data captured by form elements back to the Web server as separate bit-stream of data. When there is a large amount of data to be sent back to the Web server, this method is used.

  • Action:

The Action attribute of the <FORM> </FORM> tags points to the URL (address) of a program on the Web server that will process the form data captured and being sent back. The server-side program that processes this data can be written in any scripting language that the Web server understands.

  • ENCTYPE:

The ENCTYPE attributes of form determine the mechanism used to encode the form contents. We can leave this attribute as default (unspecified) unless we are creating a file upload field.

  • NAME:

It is form name used by script languages.

  • TARGET:

It is the target frame where the response page will show up.

Form Elements

The HTML form elements (objects) is used to capture the form data which are specified as attributes of the<INPUT> tags used within the <FORM></FORM> tags. Each of these form elements can be named. Once named, their names can then be used for referencing them in Java & VB Scripts NAME is a property associated with every HTML object used in a form. The attributes of the HTML element <INPUT> are:

<INPUT> ELEMENTS’S ATTRIBUTES

TYPE

Types of input entry field.

NAME

Variable name passed to script languages.

VALUE

The data associated with the variable name to be passed to the script language.

SELECTED

Option is Selected by default when the document is initially loaded.

CHECKED

Button.box checked by default.

SIZE

Number of characters in a text field or a number of rows in a List box (select).

MAXLENGTH

Maximum number of characters accepted.

URL

Location or the source.

Example:

<html>
<head>
<title>Creating form</title>
</head>
<body><h1>FORM ELEMENTS</h1>
<form >
<p><h3>TEXT BOX</h3>
First name: <input type="text" name="first_name" />
<br>
Last name: <input type="text" name="last_name" />
<br></p>
<h3> TEXT BOX FOR USER</h3>


User ID : <input type="text" name="user_id" />
<br>
Password: <input type="password" name="password" />
<br>
<h3>RADIO BUTTONS</h3>
<input type="radio" name="male" value="male" />Male
<br>
<input type="radio" name="female" value="female" />Female
<br>
<h3>CHECKBOX</h3>
<input type="checkbox" name="Computer Science" value="on"> Computer Science
<br>
<input type="checkbox" name="Hotel Management" value="on"> Hotel Management
<br>
<h3>SUMBIT BUTTON</h3>
<input type="submit" name="submit" value="Submit" />
<input type="reset" name="reset" value="Reset" />
<br>
<h3>DROP DOWN MENU</h3>
<select name="dropdown">
<option value="Science" selected>Science</option>
<option value="Computer Science">Computer Science</option>
<option value="Hotel management" selected>Hotel management</option>
<option value="Bussiness">Bussiness</option>
</select>
</form>
</html>

.

(Shrestha, Manandhar and Roshan)

Bibliography

Shrestha, Prachanda Ram, et al. Computer Essentials. Kathmandu: Asmita's Publication, 2014.

Design Frames

By using these elements, the Web page become enhance and effective for navigation purpose. Each unique region is called a FRAME. Each frame can be loaded with a different document and hence allow multiple HTML documents to be seen concurrently. 

Under the Frame it contains different key attributes of frameset elements:

  1. Frameborder
  2. Frame spacing
  3. Border
  4. Border color
  5. SCR
  6. Name
  7. Scrolling

Design Form

A form is a collection of fields that is used for gathering information from people visiting the Web site. Site visitors fill out a form by typing text, clicking radio and checks boxes, and selecting options from drop-down menus.

An HTML form provides data gathering functionally to the Web page. This is very useful if the Web site is used to advertise and sell products. HTML forms provide a full range of GUI controls.

Under the Form it has also had different attributes (properties):

  1. Method
  2. Action
  3. Enctype
  4. Name
  5. Target

 

 

 

.

Very Short Questions

0%

DISCUSSIONS ABOUT THIS NOTE

You must login to reply

Forum Time Replies Report
sachin

What are the applications of forms?


You must login to reply