INTRODUCTION TO HTML
UNIT – 5
5.1 FRAMES
HTML <frame> tag define the particular area within an HTML file
whereanother HTML web page can be displayed.
A <frame> tag is used with <frameset>, and it divides a webpage into
multiplesections or frames, and each frame can contain different web
pages.
Syntax
< frame src = "URL" >
Following are some specifications about the HTML <frame> tag
Display Block
Start tag/End tag Start tag(required), End tag(forbidden)
Usage Frames
Example 1
Create Vertical frames:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Frame tag</title>
5. </head>
6. <frameset cols="25%,50%,25%">
7. <frame src="frame1.html" >
8. <frame src="frame2.html">
9. <frame src="frame3.html">
10. </frameset>
11. </html>
OUTPUT:
Frame1.html
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. div{
6. background-color: #7fffd4;
7. height: 500px;
8. }
9.
</style>
10.</head>
11.<body>
12. <div>
13. <h2>This is first frame</h2>
14. </div>
15. </body>
16. </html>
Frame2.html
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. div{
6. background-color: #2f4f4f;
7. height:
500px;
8.
9. }
10.
</style>
11.</head>
12.<body>
13. <div>
14. <h2>This is Second frame</h2>
15. </div>
16. </body>
17. </html>
Frame3.html
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. div{
6. background-color: #c1ffc1;
7. height:
500px;
8. }
9.
</style>
10.</head>
11.<body>
12. <div>
13. <h2>This is Third frame</h2>
14. </div>
15. </body>
16. </html>
Example 2:
Create Horizontal frames:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Frame tag</title>
5. </head>
6. <frameset rows="30%, 40%, 30%">
7. <frame name="top" src="frame1.html" >
8. <frame name="main" src="frame2.html">
9. <frame name="bottom" src="frame3.html">
10. </frameset>
11. </html>
OUTPUT:
Attribute
Tag-specific attribute
Attribute Value Description
frameborder 0 It specifies whether to display a border around the
1 frameor not, and its default value is 1
Longdsec URL It specifies a page which contains the long
description ofthe content of the frame.
marginheight pixels It specifies the top and bottom margins of the frame.
marginwidth pixels It defines the height of the margin between frames.
Name text It is used to assign the name to the frame.
noresize noresize It is used to prevent resizing of the frame by the user.
scrolling yes It specifies the existence of the scrollbar for
no overflowingcontent.
aut
o
src URL It specifies the URL of the document which we
want todisplay in a frame.
5.2 HTML FORM
An HTML form is a section of a document which contains controls
such astext fields, password fields, checkboxes, radio buttons, submit
button, menus etc.
An HTML form facilitates the user to enter data that is to be sent
to theserver for processing such as name, email address, password, phone
number, etc. .
USE HTML FORM
HTML forms are required if you want to collect some data from of
the sitevisitor.
For example: If a user want to purchase some items on internet, he/she
must fill theform such as shipping address and credit/debit card details so
that item can be sent to the given address.
HTML Form Syntax
1. <form action="server url" method="get|post">
2. //input controls e.g. textfield, textarea, radiobutton, button
3. </form>
HTML Form Tags
Let's see the list of HTML 5 form tags.
Tag Description
<form> It defines an HTML form to enter inputs by the used side.
<input> It defines an input control.
<textarea> It defines a multi-line input control.
<label> It defines a label for an input element.
<fieldset> It groups the related element in a form.
<legend> It defines a caption for a <fieldset> element.
<select> It defines a drop-down list.
<optgroup> It defines a group of related options in a drop-down list.
<option> It defines an option in a drop-down list.
<button> It defines a clickable button.
HTML 5 Form Tags
Let's see the list of HTML 5 form tags.
Tag Description
<datalist> It specifies a list of pre-defined options for input control.
<keygen> It defines a key-pair generator field for forms.
<output> It defines the result of a calculation.
HTML <form> element
The HTML <form> element provide a document section to take input
from user. It provides various interactive controls for submitting
information to web server such as text field, text area, password field, etc.
Syntax:
1. <form>
2. //Form elements
3. </form>
5.3 HTML <input> element
The HTML <input> element is fundamental form element. It is used
to create form fields, to take input from user. We can apply different input
filed to gather different information form user. Following is the example to
show the simple text input.
Example:
1. <body>
2. <form>
3. Enter your name <br>
4. <input type="text" name="username">
5. </form>
6. </body>
OUTPUT:
5.4 HTML TEXTFIELD CONTROL
The type="text" attribute of input tag creates textfield control also
known as single line textfield control. The name attribute is optional, but it
is required for theserver side component such as JSP, ASP, PHP etc.
1. <form>
2. First Name: <input type="text" name="firstname"/> <br/>
3. Last Name: <input type="text" name="lastname"/> <br/>
4. </form>
OUTPUT:
HTML <TEXTAREA> TAG IN FORM
The <textarea> tag in HTML is used to insert multiple-line text in a
form. The size of <textarea> can be specify either using "rows" or "cols"
attribute or by CSS.
Example:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Form in HTML</title>
5. </head>
6. <body>
7. <form>
8. Enter your address:<br>
9. <textarea rows="2" cols="20"></textarea>
10. </form
>
11.</body>
12.</html>
Output:
LABEL TAG IN FORM
It is considered better to have label in form. As it makes the code
parser/browser/user friendly.
If you click on the label tag, it will focus on the text control. To do
so, youneed to have for attribute in label tag that must be same as id
attribute of input tag.
1. <form>
2. <label for="firstname">First Name: </label> <br/>
3. <input type="text" id="firstname" name="firstname"/> <br/>
4. <label for="lastname">Last Name: </label>
5. <input type="text" id="lastname" name="lastname"/> <br/>
6.
</form>
Output:
HTML PASSWORD FIELD CONTROL
The password is not visible to the user in password field control.
1. <form>
2. <label for="password">Password: </label>
3. <input type="password" id="password" name="password"/> <br/>
4. </form>
Output:
HTML 5 Email Field Control
The email field in new in HTML 5. It validates the text for correct
emailaddress. You must use @ and . in this field.
1. <form>
2. <label for="email">Email: </label>
3. <input type="email" id="email" name="email"/> <br/>
4. </form>
OUTPUT:
RADIO BUTTON CONTROL
The radio button is used to select one option from multiple options. It
is usedfor selection of gender, quiz questions etc.
If you use one name for all the radio buttons, only one radio button
can beselected at a time.
Using radio buttons for multiple options, you can only choose a single
option at atime.
1. <form>
2. <label for="gender">Gender: </label>
3. <input type="radio" id="gender" name="gender" value="male"/>Male
4. <input type="radio" id="gender" name="gender"
value="female"/>Female <br/>
5. </form>
OUTPUT:
CHECKBOX CONTROL
The checkbox control is used to check multiple options from given checkboxes.
1. <form>
2. Hobby:<br>
3. <input type="checkbox" id="cricket" name="cricket" value="cricket"/>
4. <label for="cricket">Cricket</label> <br>
5. <input type="checkbox" id="football" name="football" value="football"/
>
6. <label for="football">Football</label> <br>
7. <input type="checkbox" id="hockey" name="hockey" value="hockey"/>
8. <label for="hockey">Hockey</label>
9. </form>
OUTPUT:
SUBMIT BUTTON CONTROL
HTML <input type="submit"> are used to add a submit button web
on
page. When user clicks on submit button, then form get submit to the
server.
Syntax:
1. <input type="submit" value="submit">
The type = submit , specifying that it is a submit button
The value attribute can be anything which we write on button on web
page.
The name attribute can be omit here.
Example:
1. <form>
2. <label for="name">Enter name</label><br>
3. <input type="text" id="name" name="name"><br>
4. <label for="pass">Enter Password</label><br>
5. <input type="Password" id="pass" name="pass"><br>
6. <input type="submit" value="submit">
7. </form>
OUTPUT:
HTML <FIELDSET> ELEMENT:
The <fieldset> element in HTML is used to group the related
information of a form. This element is used with <legend> element which
provide caption for the grouped elements.
Example:
1. <form>
2. <fieldset>
3. <legend>User Information:</legend>
4. <label for="name">Enter name</label><br>
5. <input type="text" id="name" name="name"><br>
6. <label for="pass">Enter Password</label><br>
7. <input type="Password" id="pass" name="pass"><br>
8. <input type="submit" value="submit">
9. </fieldset>
10. lt;/for
m>
Output:
HTML FORM EXAMPLE
Following is the example for a simple form of registration.
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Form in HTML</title>
5. </head>
6. <body>
7. <h2>Registration form</h2>
8. <form>
9. <fieldset>
10. <legend>User personal information</legend>
11. <label>Enter your full name</label><br>
12. <input type="text" name="name"><br>
13. <label>Enter your email</label><br>
14. <input type="email" name="email"><br>
15. <label>Enter your password</label><br>
16. <input type="password" name="pass"><br>
17. <label>confirm your password</label><br>
18. <input type="password" name="pass"><br>
19. <br><label>Enter your gender</label><br>
20. <input type="radio" id="gender" name="gender" value="male"/>Male <br
>
21. <input type="radio" id="gender" name="gender"
value="female"/>Female <br/>
22. <input type="radio" id="gender" name="gender"
value="others"/>others <br/>
23. <br>Enter your Address:<br>
24. <textarea></textarea><br>
25. <input type="submit" value="sign-up">
26. </fieldset>
27. </form>
28. </body>
29. </html>
OUTPUT:
