HTML FRAMES,FORMS

1. HTML Forms and Frames

2. HTML Forms
Entering User Data from a Web Page

3. What are HTML Forms?
• The primary method for gathering data from site
visitors
• HTML Forms can contain
• Text fields for the user to type
• Buttons for interactions like
"Register", "Login", "Search"
• Menus, Sliders, etc…
• For example: If a user want to purchase some items on internet,
he/she must fill the form such as shipping address and credit/debit
card details so that item can be sent to the given address.
3

4. How to Create a HTML Form?
• Create a form block with
• Example:
4
<form></form>
<form name="myForm" method="post"
action="path/to/some-script.php">
...
</form> The "action" attribute tells where
the form data should be sent
The "method" attribute tells how
the form data should be sent – via
GET or POST request
It is a container element started by <form> tag and ended
by </form>tag
The “name" attribute specifies the name of the form.
The NAME attribute is optional if there is only one FORM on the web page.

5. How to Create a HTML Form?
• Create a form block with
• Example:
5
<form></form>
<form name="myForm" method="post"
action="path/to/some-script.php">
...
</form>
The "action" attribute tells where
the form data should be sent
The "method" attribute tells how
the form data should be sent – via
GET or POST request
It is a container element started by <form> tag and ended
by </form>tag

6. INPUT ELEMENT
• INPUT FIELDS
• Fieldsets
• Text Boxes,password
• Buttons,Submit,Reset
• Checkboxes and Radio Buttons
• Select Fields
• Image ,Hidden ,File
Syntax:
<INPUT TYPE = “FIELD TYPE” NAME = “FIELD NAME”
VALUE = “FIELD TEXT”> 6
- It is an empty element specified by tag.
- It is used to provide an input field in a form
where the user can enter the data.

7. Attributes of INPUT element-Text Fields
• Single-line text input fields:
• Multi-line text input fields (textarea):
• Password input – a text field which masks the
entered text with * signs
7
<input type="text" name="FirstName" value="This
is a text field" />
<textarea name="Comments">This is a multi-line
text field</textarea>
<input type="password" name="pass" />

8. Attributes of TEXT FIELDS,PASSWORD
8
NAME
Specifies the name of the field. This name does not appear on the
FORM. It is required for the identification/ differentiation as there
can be more than one fields in a single FORM.
Syntax: NAME = "FieldName"
VALUE
Specifies the text to be displayed on the field.
Syntax:VALUE = "FieldText“
SIZE
Sets the visible size of the text field to n characters.
Syntax: SIZE = “n“
MAXLENGTH
- Set the maximum number of characters that can be input in the
text field to n.
Syntax: maxlength=“n“

9. Buttons
• Reset button – brings the form to its initial state
• Submit button: Submitted to the destination file.
• Image button – acts like submit but image is
displayed and click coordinates are sent
• Ordinary button – no default action, used with JS
9
<input type="reset" name="resetBtn"
value="Reset the form" />
<input type="image" src="submit.gif"
name="submitBtn" alt="Submit" />
<input type="button" value="click me" />
<input type="submit" value="Apply Now" />

10. Checkboxes and Radio Buttons
• Checkboxes used to choose more than one option.
• Radio buttons :
• Radio buttons can be grouped, allowing only one to
be selected from a group:
10
<input type="checkbox" name="fruit"
value="apple" />
<input type="radio" name="title" value="Mr." />
<input type="radio" name="city" value="Lom" />
<input type="radio" name="city" value="Ruse" />

11. Attributes -Checkboxes and Radio
Buttons
11
<input type="radio" name="city" value="Lom“ checked/>
<input type="radio" name="city" value="Ruse" />
CHECKED - Indicates that the radio button is selected, which
can be deselected when another choice is made. At one time,
only one radio button in a radio group can be specified as
CHECKED.
CHECKED - Indicates that the checkbox is to be displayed with a tick
mark to show selection.This attribute is optional
<input type="checkbox" name="vehicle" value="Bike"> I have a
bike<br>
<input type="checkbox" name="vehicle" value="Car" checked>
I have a car<br>

12. Select Fields
• Dropdown menus:
• Multiple-choice menus
12
<select name="gender">
<option value="Value 1"
selected="selected">Male</option>
<option value="Value 2">Female</option>
<option value="Value 3">Other</option>
</select>
<select name="products" multiple="multiple">
<option value="Value 1"
selected="selected">keyboard</option>
<option value="Value 2">mouse</option>
</select>

13. Hidden Fields
• Hidden fields contain invisible data
• Not shown to the user
• Used by JavaScript and server-side code
13
<input type="hidden" name="Account"
value="This is a hidden text field" />

14. Fieldsets
• Fieldsets are used to enclose a group of related form
fields:
• The <legend> is the fieldset's title
14
<form method="post" action="form.aspx">
<fieldset>
<legend>Client Details</legend>
<input type="text" id="Name" />
<input type="text" id="Phone" />
</fieldset>
<fieldset>
<legend>Order Details</legend>
<input type="text" id="Quantity" />
<textarea cols="40" rows="10"
id="Remarks"></textarea>
</fieldset>
</form>

15. FIELDSETS Eg.
IE8

16. HTML FORMS -EXAMPLE
16

17. <html>
<head><tiitle>Form Example</title></head>
<body bgcolor="#CCFF66">
<form align="center">
<h3 >Personal Details</h3>
Name: <input type="text" name="name" ><br><br>
Password:<input type="password" name="password" ><br><br>
E-mail id: <input type="text" name="name" ><br><br>
Gender: <input type="radio" name="radiogroup1" value="radio" > Male
<input type="radio" name="radiogroup1" value="radio" > Female<br><br>
Contact#: <input type="text" name="mobile" id="mobile">
<h3 >Educational Qualification</h3>
Degree: <select name="degree">
<option selected>-- Select Group --</option>
<option>B.Com</option>
<option>B.sc</option>
<option>B.com Computers</option>
<option>B.A</option>
</select><br> 17

18. Engineering: <select name="eng" >
<option selected>-- Select Group --</option>
<option>CSE</option>
<option>ECE</option>
<option>CIVIL</option>
<option>EEE</option>
</select><br><br>
Hobbies: <input type="checkbox" name="CheckboxGroup1“>Playing chess
<input type="checkbox" name="CheckboxGroup1" value="checkbox" >Reading
Books<br><br>
<h3 >Address</h3>
<textarea name="textarea" cols="35" rows="5" ></textarea><br><br>
Attch Resume: <input type="file" name="fileField" ><br>
<input type="image" src="/images/submit_btn.png">
</form>
</body>
</html>
18

19. HTML Frames
<frameset>, <frame> and <iframe>

20. HTML Frames
• Frames provide a way to show multiple HTML documents
in a single Web page
• The page can be split into separate views (frames)
horizontally and vertically
• Frames were popular in the early ages of HTML
development, but now their usage is rejected
• Frames are not supported by all user agents (browsers,
search engines, etc.)
20

21. HTML Frames – Demo
21
<html>
<head><title>Frames Example</title></head>
<frameset cols="180px,*,150px">
<frame src="left.html" />
<frame src="middle.html" />
<frame src="right.html" />
</frameset>
</html>

22. 22

23. 23

24. 24

25. 25
IFRAME

26. Inline Frames: <iframe>
• Inline frames provide a way to show one website
inside another website:
26
<iframe name="iframeGoogle" width="600" height="400"
src="http://www.google.com" frameborder="yes"
scrolling="yes"></iframe>

27. 27
Syntax:
<iframe src= “ “ height=200 width = 200 ></iframe>

28. 28

29. 29

30. Homework (1)
1. Create a Web form
that looks like this
sample:
30

31. Homework (2)
2. Create the following using tables and forms:
31

32. Homework (3)
3. Construct the following Grid component:
• Try to make a HTML page, that looks just like the example
32

33. Homework (4)
4. *Create the following HTML Page
• Hint: Use Fieldsets and Nested tables
33