Chapter 5 HTML (Forms and Frames)
1. working of forms:
• concept: forms are used to collect user input and send it to a server for processing.
they consist of various input elements like text boxes, checkboxes, radio buttons, etc.
• example:
<form action="submit_form.php" method="post">
<!-- form elements go here -->
</form>
explanation: the <form> tag creates a form on the webpage. the action attribute
speci es the url where the form data will be sent, and the method attribute determines how
the data will be sent (post or get).
2. creating a form:
• concept: a form is a container for input elements that allows users to submit
•
information.
example:
o m
<form action="submit_form.php" method="post">
m .c
<label for="name">name:</label>
<input type="text" id="name" name="name">
alo
<input type="submit" value="submit">
a n
s
</form>
h a
//
explanation: this form contains a text box for entering a name and a submit button to send
:
the form data.
p s
3. input elements:
h t t
• concept: input elements are the building blocks of forms. they include text boxes,
checkboxes, radio buttons, etc.
• example:
<input type="text" name="username">
<input type="checkbox" name="subscribe">
<input type="radio" name="gender" value="male">
explanation: these input elements collect data from the user in different formats.
1
fi
4. adding a text box:
• concept: a text box allows users to enter single-line text.
• example:
<label for="email">email:</label>
<input type="text" id="email" name="email">
explanation: this code creates a text box where users can enter their email addresses.
5. adding a checkbox:
• concept: checkboxes allow users to select one or more options from a list.
• example:
<label for="subscribe">subscribe to newsletter:</label>
<input type="checkbox" id="subscribe" name="subscribe" value="yes">
explanation: this checkbox lets users subscribe to a newsletter by checking the box.
6. adding a radio button:
•
o m
concept: radio buttons allow users to select only one option from a group.
.c
• example:
<label for="male">male</label>
o m
al
<input type="radio" id="male" name="gender" value="male">
n
<label for="female">female</label>
a
<input type="radio" id="female" name="gender" value="female">
s
h a
explanation: this set of radio buttons lets users select their gender, with only one option
//
allowed at a time.
s :
7. adding a password eld:
t t p
•
•
h
concept: a password eld is a text box that hides the user's input for privacy.
example:
<label for="password">password:</label>
<input type="password" id="password" name="password">
explanation: this password eld hides the entered text, showing dots or asterisks instead of
characters.
2
fi
fi
fi
8. adding a drop-down list:
• concept: a drop-down list presents a list of options from which the user can select
one.
• example:
<label for="country">country:</label>
<select id="country" name="country">
<option value="india">india</option>
<option value="usa">usa</option>
<option value="uk">uk</option>
</select>
explanation: this drop-down list lets users select their country from the available options.
9. adding a combo box:
• concept: a combo box is a combination of a text box and a drop-down list. users can
either type in a value or select from the list.
• example:
<label for="browser">preferred browser:</label>
m
<input list="browsers" name="browser" id="browser">
<datalist id="browsers">
<option value="chrome">
.c o
m
<option value=" refox">
alo
<option value="safari">
</datalist>
a n
s
explanation: this combo box allows users to type their preferred browser or select from a list
a
of common browsers.
// h
10. adding buttons:
s :
•
t t p
concept: buttons are used to trigger actions, like submitting a form or resetting it.
• example:
h
<input type="submit" value="submit">
<input type="reset" value="reset">
explanation: the "submit" button sends the form data to the server, while the "reset" button
clears all the input elds in the form.
3
fi
fi
11. adding a multi-line text eld:
• concept: a multi-line text eld (textarea) allows users to enter larger amounts of text.
• example:
<label for="comments">comments:</label>
<textarea id="comments" name="comments" rows="4" cols="50"></textarea>
explanation: this textarea provides a space for users to enter multi-line comments, with
customizable rows and columns.
12. application areas of forms:
• concept: forms are widely used in various applications like registration forms, login
forms, contact forms, surveys, etc.
• example:
◦ registration forms: used for signing up new users.
◦ login forms: used for authenticating users.
◦ contact forms: used for collecting messages or queries from users.
13. creating a frameset and frames:
•
o m
concept: a frameset divides the browser window into multiple sections, each
.c
displaying a different html document.
m
• example:
<frameset cols="50%, 50%">
alo
n
<frame src="page1.html">
<frame src="page2.html">
s a
a
</frameset>
// h
explanation: this frameset divides the window into two vertical sections, each displaying a
different webpage.
s :
t tp
h
4
fi
fi
