Scribd
Upload
13 views18 pages

Day 3

HTML forms allow users to enter data into webpages. Forms contain input fields like text boxes, radio buttons, checkboxes, and dropdown lists. Forms are created using <form> tags and input fields are created using tags like <input>, <textarea>, and <select>. Form attributes specify properties of input elements like names, IDs, and initial values. Frames divide browser windows into multiple sections to display separate webpages, but frames are now outdated and CSS is preferred for layout.

Uploaded by

anamika soodh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
13 views18 pages

Day 3

HTML forms allow users to enter data into webpages. Forms contain input fields like text boxes, radio buttons, checkboxes, and dropdown lists. Forms are created using <form> tags and input fields are created using tags like <input>, <textarea>, and <select>. Form attributes specify properties of input elements like names, IDs, and initial values. Frames divide browser windows into multiple sections to display separate webpages, but frames are now outdated and CSS is preferred for layout.

Uploaded by

anamika soodh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 18

CSI Web

Technologies
Workshop
Information Technology
HTML Forms
• Using HTML, we can create forms in webpages
(Application Form, Registration Forms etc.) that can
pass information to the server.
• HTML Forms can contain input fields such as text fields,
radio buttons, check boxs, buttons, drop-down lists
and many more.
• Forms can be created using <FORM> tag and separate
tags exist to create form input fields. The usual syntax
of form can be as follows:
FORM CODE:

<FORM action='somePage.php' method = 'post' >


...
Input Fields
...
</FORM>
Important Form Tags
• Most of the input fields (Text Box, Radio Button,
Checkbox, Password Box etc.) can be created using
<INPUT> tag. Large Textbox (to input addresses and
other text) can be created using <TEXTAREA> tag.
Drop-down List can be created using <SELECT> AND
<OPTION> tags.

• A HTML form consists of atleast one input field and one


submit button between the FORM tags.
FORM FIELD TAGS
TextBox :

The <input type="text"> defines a single-line input field


for text input.

Eg:
<form>
<input type="text" id="fname" name="fname"><br>
<input type="text" id="lname" name="lname">
</form>
FORM FIELD TAGS
Password :

The <input type="password"> defines a password field (characters


are masked ).

Eg:
<form>
<input type="password" id="pwd" name="pwd">
</form>
FORM FIELD TAGS
Radio Button :

The <input type="radio"> defines a radio button.


Radio buttons let a user select ONE of a limited number of
choices.
Eg:
<form>
<input type=“radio”id=“male" name=“gender”><br>
<input type=“radio” id=“female" name=“gender">
</form>
FORM FIELD TAGS
Check Box :
<input type="checkbox"> defines a checkbox.
Checkboxes let a user select ZERO or MORE options of a limited
number of choices.
Eg:
<form>
<input type="checkbox" name=“sub1” >Web
Technologies
<input type="checkbox" name=“sub2” >operating
Systems
</form>
.

FORM FIELD TAGS


Text Area :
The <textarea> tag defines a multi-line text input control
The size of a text area is specified by
the <cols> and <rows> attributes (or with CSS).

Eg:
Enter Your Address:
<BR><TEXTAREA rows='5' cols='25' name='address'>
</TEXTAREA>
FORM FIELD TAGS
Drop Down List :

Select Your Department:


<SELECT name='dept'>
<OPTION value='IT'>Information Technology</OPTION>
<OPTION value=CSE'>Computer Science & Engineering</OPTION>
<OPTION value='MCA'>Master of Computer Applications</OPTION>
</SELECT>
FORM FIELD TAGS
Submit Button :

The <input type="submit"> defines a submit button


which submits all form values to a form-handler.

Eg:
<form>
<input type="submit">
</form>
Form Attributes:
1.Name :
<INPUT type='text' name='fname’>

2. value:
<INPUT type='radio' name='gender' value='m'> Male
<INPUT type='radio' name='gender' value='f'> Female

3. Id
<INPUT type='text' name='fname' id='fname'>
Form Attributes:
Selected :
<SELECT name='dept'>
<OPTION value='IT'>Information Technology</OPTION>
<OPTION value=CSE'>Computer Science & Engineering</OPTION>
<OPTION value='MCA' selected>Master of Computer
Applications</OPTION>
</SELECT>

Checked :
<INPUT type='radio' name='gender' checked> Male
<INPUT type='radio' name='gender' > Female
HTML FRAMES
• Using Frames, we can display more than one web page in the window.
The window can be divided into multiple frames so that each frame
can display a separate page.

With the addition of Cascading Style Sheets (CSS), the frames have
become outdated and usage of frames in web development is strongly
discouraged.
Frames can be created using <FRAMESET> and <FRAME> tags.
<HTML>
<FRAMESET cols='50%,50%' >
<FRAME src='page1.html' >
<FRAME src='page2.html' >
</FRAMESET>
</HTML>
FRAMES

• FRAMESET Tag:
• FRAMESET tag is the parent tag that defines the individual frames in it.
FRAMESET tag attributes cols & rows that define the way the window should
be divided into different frames.
• FRAME Tag:
• FRAME tag is the actual tag defines what page to be loaded in the frame using
the 'src' attribute.
• IFRAME Tag:
• An unique tag that displays an inline frame. An inline frame is a frame
embedded in another html document that display some content such as an
advertisement, image or some other webpage in a small box. The usage is as
follows:
Eg: youtube video in our web page

• <iframe width="560" height="315"


src="https://www.youtube.com/embed/s1cdhY_VyjQ"
title="YouTube video player" frameborder="0" allow="accelerometer;
autoplay; clipboard-write; encrypted-media; gyroscope;
picture-in-picture" allowfullscreen></iframe>
Google map in web page
• <iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1
d15299.026503317647!2d81.5047764!3d16.5383799!2m3!1f0!2f0!3f
0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3a362d5e7ef94f99%3A0x
3a2b78f9b48493fe!2sSRKR%20Engineering%20College!5e0!3m2!1se
n!2sin!4v1638987152887!5m2!1sen!2sin" width="600" height="450"
style="border:0;" allowfullscreen="" loading="lazy"></iframe>
ASSIGNMENT

• Create Your Class Timetble Using Html Tables


• Eg:

You might also like