Unit V

Internet & HTML Programming
Unit – V
Frames : Percentage dimensions - Relative
dimensions - Creating two rows Frames - Creating
two columns frames - Creating two rows and the
second row containing two columns. Forms: Form
Tag- Method – Action - Input Tag - Type Attribute:
Check box, Hidden, Image, Radio, Reset, Submit,
Text.
Frames
• Browser shows the webpage through a window
• The entire document is viewed through window by scrolling the web page.
• The window is called as container.
• It is possible to divide the container into several frames.

• HTML frames divides the browser window into multiple sections or
several pieces or panes where each section can load a separate HTML
document.
• A collection of frames in the browser window is known as a frameset.
• The window is divided into frames in a similar way the tables are
organized: into rows and columns.
• <html>
• <head>
• <title>Frames Example</title>
• </head>
• <frameset rows="25%,*">
• <frame src="D:\New Volume\bu\class\2020-2021\Supportive\pgm1.html">
• <frameset cols="50%,50%">
• <frame src="D:\New Volume\bu\class\2020-2021\Supportive\internet.pdf">
• <frame src="D:\New Volume\bu\class\2020-2021\Supportive\pgm2.html">
• <noframes>
• <body> Your browser does npt support </body>
• </noframes>
• </frameset>
• </html>
Forms
• Forms: Form Tag- Method – Action - Input Tag
- Type Attribute: Check box, Hidden, Image,
Radio, Reset, Submit, Text.
What are forms?
• <form> is just another kind of HTML tag
• HTML forms are used to create (rather primitive) GUIs on Web pages
– Usually the purpose is to ask the user for information
– The information is then sent back to the server
• A form is an area that can contain form elements
– The syntax is: <form parameters> ...form elements... </form>
– Form elements include: buttons, checkboxes, text fields, radio buttons, drop-
down menus, etc
• Other kinds of HTML tags can be mixed in with the form elements
– A form usually contains a Submit button to send the information in he form
elements to the server
– The form’s parameters tell JavaScript how to send the information to the
server (there are two different ways it could be sent)
– Forms can be used for other things, such as a GUI for simple programs
13
Forms and JavaScript
• The JavaScript language can be used to make pages that “do
something”
– You can use JavaScript to write complete programs, but...
– Usually you just use snippets of JavaScript here and there throughout
your Web page
– JavaScript code snippets can be attached to various form elements
• For example, you might want to check that a zipcode field contains a 5-
digit integer before you send that information to the server
• Microsoft sometimes calls JavaScript “active scripting”
• HTML forms can be used without JavaScript, and JavaScript
can be used without HTML forms, but they work well together
14
The <form> tag
• The <form arguments> ... </form> tag encloses form
elements (and probably other HTML as well)
• The arguments to form tell what to do with the user input
– action="url" (required)
• Specifies where to send the data when the Submit button is clicked
– method="get" (default)
• Form data is sent as a URL with ?form_data info appended to the end
• Can be used only if data is all ASCII and not more than 100 characters
– method="post"
• Form data is sent in the body of the URL request
• Cannot be bookmarked by most browsers
– target="target"
• Tells where to open the page sent as a result of the request
• target= _blank means open in a new window
• target= _top means use the same window
15
Forms
• How to add interactivity to your web documents by way of the
<FORM> tag. With the form tag you can add to your web pages a
guestbook, order forms, surveys, get feedback or whatever.
• The basic construction of a html form is this...
<FORM> begin a form

<INPUT> ask for information in one of several different ways...
<INPUT> ...there can be as many input areas as you wish
</FORM> end a form
16
<HTML>
<HEAD>
<TITLE>Hai III B.Com(C.A) Guys</TITLE>
</HEAD>
<BODY>
<FORM>
</FORM>
</BODY>
</HTML>
17
The <input> tag
• Most, but not all, form elements use the input tag, with a
type="..." argument to tell which kind of element it is
– type can be text, checkbox, radio, password, hidden, submit,
reset, button, file, or image
• Other common input tag arguments include:
– name: the name of the element
– value: the “value” of the element; used in different ways for different
values of type
– readonly: the value cannot be changed
– disabled: the user can’t do anything with this element
– Other arguments are defined for the input tag but have meaning only
for certain values of type
18
<FORM>
<INPUT TYPE="text">
</FORM>
19
<FORM>
<INPUT TYPE="text" NAME="ADDRESS" VALUE="44 Nehru Street">
</FORM>
20
<FORM>
<INPUT TYPE="text" NAME="ADDRESS" VALUE="44 Nehru Street" SIZE=10>
</FORM>
21
<FORM>
<INPUT TYPE="text" NAME="ADDRESS" VALUE="44 Nehru Street"
SIZE=20>
</FORM>
The Default value is 20
22
Go ahead and remove VALUE="44 Nehru Street".
<FORM>
<INPUT TYPE="text" NAME="ADDRESS" SIZE=30>
</FORM>
23
If we want, we can specify how many characters a user can input.
<FORM>
<INPUT TYPE="text" NAME="ADDRESS" SIZE=30 MAXLENGTH=10>
</FORM>
24
Very similar to the TYPE=TEXT is the TYPE=PASSWORD. It is exactly the
same, except it displays *** instead of the actual input. The browser will
send you the input, it just won't display it.
<FORM>
<INPUT TYPE="password">
</FORM>
25
Remember that each <INPUT> attributes NAME.
SIZE, VALUE, and MAXLENGTH work here also. By the way, a <TAG>
tells the browser to do something. An ATTRIBUTE goes inside the
<TAG> and tells the browser how to do it.
<FORM>
<INPUT TYPE="password" NAME="USERPASS">
</FORM>
26
Radio Buttons and Check Boxes
• Radio buttons allow the
user to choose one of
several options.
• Check Boxes allow the

user to choose one or
more or all of several
options.
27
<FORM>
<INPUT TYPE ="radio“ NAME="BEST FRIEND">
</FORM>
28
<FORM>
<INPUT TYPE="radio" NAME="BEST FRIEND">
</FORM>
29
<FORM>
<BR> <INPUT TYPE="radio" NAME="BEST FRIEND">
<BR> <INPUT TYPE="radio" NAME="BEST FRIEND">
</FORM>
Break – To Print the Radio Button in a next line
30
Each of the Radio Buttons must be assigned a VALUE.
<FORM>
<INPUT TYPE="radio" NAME="BEST FRIEND" VALUE="Suresh">
<BR><INPUT TYPE="radio" NAME="BEST FRIEND" VALUE="Ramesh">
<BR><INPUT TYPE="radio" NAME="BEST FRIEND" VALUE="Dhenesh">
</FORM>
31
Now label each button
<FORM>
<INPUT TYPE="radio" NAME="BEST FRIEND" VALUE="Su">Suresh
<BR><INPUT TYPE="radio" NAME="BEST FRIEND" VALUE="Ra">Ramesh
<BR><INPUT TYPE="radio" NAME="BEST FRIEND" VALUE="Dhi">Dhenesh
</FORM>
32
Essentially your Radio Buttons are done. You can tidy things up by adding a statement
above the buttons, and if you want, choose a default selection (optional).
<FORM>
Who is your best friend?
<BR> <INPUT TYPE="radio" NAME="BEST FRIEND" VALUE="Su" CHECKED>Suresh
<BR><INPUT TYPE="radio" NAME="BEST FRIEND" VALUE="Ra">Ramesh
<BR><INPUT TYPE="radio" NAME="BEST FRIEND" VALUE="Dhi">Dhenesh
</FORM>
The user of course can only choose 1 option. Their choice will be returned to you as the
name/value pair BEST FRIEND=Su (or whoever they pick).
33
• The Submit Button
• <input type="submit"> defines a button for submitting the form data to a form-
handler.
• The form-handler is typically a server page with a script for processing input data.
• The form-handler is specified in the form's action attribute:
• The Action Attribute
• The action attribute defines the action to be performed when the form is
submitted.
• Normally, the form data is sent to a web page on the server when the user clicks
on the submit button.
• Example : the form data is sent to a page on the server called "action_page.php".
This page contains a server-side script that handles the form data.
• <form action="action_page.php">
• If the action attribute is omitted, the action is set to the current page.
34
• The Method Attribute
• The method attribute specifies the HTTP method
(GET or POST) to be used when submitting the form
data:
• <form action="action_page.php" method="get">
• <form action="action_page.php" method="post">
• The default method when submitting form data is GET.
• when GET is used, the submitted form data will
be visible in the page address field
• Always use POST if the form data contains sensitive or personal
information. The POST method does not display the submitted
form data in the page address field.
35
36
37
Text input
A text field:
<input type="text" name="textfield" value="with an initial value">
A multi-line text field

<textarea name="textarea" cols="24" rows="2">Hello</textarea>
A password field:
<input type="password" name="textfield3" value="secret">
• Note that two of these use the input tag, but one uses textarea
38
Buttons
• A submit button:
<input type="submit" name="Submit" value="Submit">
• A reset button:
<input type="reset" name="Submit2" value="Reset">
• A plain button:
<input type="button" name="Submit3" value="Push Me">
• submit: send data

• reset: restore all form elements to
their initial state
• button: take some action as
specified by JavaScript
• Note that the type is input, not “button”
39
Checkboxes
• A checkbox:
<input type="checkbox" name="checkbox”
value="checkbox" checked>
• type: "checkbox"
• name: used to reference this form element from JavaScript
• value: value to be returned when element is checked
• Note that there is no text associated with the checkbox—
you have to supply text in the surrounding HTML
40
Radio buttons
Radio buttons:<br>
<input type="radio" name="radiobutton" value="myValue1">
male<br>
<input type="radio" name="radiobutton" value="myValue2" checked>
female
• If two or more radio buttons have the same name, the user can
only select one of them at a time
– This is how you make a radio button “group”
• If you ask for the value of that name, you will get the value
specified for the selected radio button
• As with checkboxes, radio buttons do not contain any text
41
Drop-down menu or list
• A menu or list:
<select name="select">
<option value="red">red</option>
<option value="green">green</option>
<option value="BLUE">blue</option>
</select>
• Additional arguments:
– size: the number of items visible in the list (default is "1")
– multiple: if set to "true", any number of items may be selected
(default is "false")
42
A complete example
<html>
<head>
<title>Get Identity</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
</head>
<body>
<p><b>Who are you?</b></p>
<form method="post" action="">
<p>Name:
<input type="text" name="textfield">
</p>
<p>Gender:
<input type="radio" name="gender" value="m">Male
<input type="radio" name="gender" value="f">Female</p>
</form>
</body>
</html>
43

Unit V

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Unit V

Uploaded by

Copyright:

Available Formats

Internet & HTML Programming

• It is possible to divide the container into several frames.

• The basic construction of a html form is this...

<FORM> begin a form

The Default value is 20

• Check Boxes allow the

Break – To Print the Radio Button in a next line

A multi-line text field

• submit: send data

You might also like