FORMS

Forms are the best way of adding interactivity of element in a web page. They are
usually used to let the user to send information back to the server but can also be used
to simplify navigation on complex web sites. The tags that use to implement forms
are as follows.
<forms action=”URL” method = “post” | “get”>…….</form>
When get is used, the data is included as part of the URL. The post method encodes
the data within the body of the message. Post can be used to send large amount of
data, and it is more secure than get. The tags used inside the form tag are:
<input type = “text” | “password” | “checkbox” | “radio” | “submit”
name=”string” value=”string” size=”n”>
The <label> element in HTML is used to associate a text label with a form input
element. This improves accessibility and usability by allowing users to click on the
label text to focus on or toggle the associated input field. Here's an example:
<label for="username">Username:</label>
The `<label>` element associates text with form elements, improving accessibility
and usability. It’s `for` attribute matches the `id` attribute of the input field, enabling
users to click on the label to interact with the associated input.
In the above tag, the attribute type is used to implement text, password, checkbox,
radio and submit button.
1. Text: It is used to input the characters of the size n and if the value is given than it
is used as a default value. It uses single line of text. Each component can be given
a separate name using the name attribute.
Example:
<label for="username">Username:</label>
<input type="text" id="username" name="username">

2. Password: It works exactly as text, but the content is not displayed to the screen,
instead an * is used.
Example:
<label for="password">Password:</label>
<input type="password" id="password" name="password">

3. Radio: This creates a radio button. They are always grouped together with a same
name but different values.
Example:
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br>
4. Checkbox: It provides a simple checkbox, where all the values can be selected
unlike radio button.
Example:
<input type="checkbox" id="subscribe" name="subscribe" value="yes">
<label for="subscribe">Subscribe to newsletter</label>

5. Submit: This creates a button which displays the value attribute as its text. It is
used to send the data to the server.
Example:
<input type="submit" value="Submit">

6. Email: This creates an email input field where users can enter their email address,
and the browser validates that it's in the correct email format.
Example:
<label for="email">Email:</label>
<input type="email" id="email" name="email">

7. Number: This creates a number input field where users can enter numerical
values.
Example:
<label for="quantity">Quantity:</label>
<input type="number" id="quantity" name="quantity">

8. Textarea: This creates a textarea where users can enter multi-line text, such as a
message or comments.
Example:
<label for="message">Message:</label><br>
<textarea id="message" name="message" rows="4" cols="50"></textarea>

9. Select Dropdown: This creates a dropdown list of options where users can select
one option, such as their country.
Example:
<label for="country">Country:</label>
<select id="country" name="country">
<option value="usa">USA</option>
<option value="uk">UK</option>
<option value="canada">Canada</option>
</select>

10.Date: This creates a date input field where users can select a date from a date
picker.
Example
<label for="dob">Date of Birth:</label>
<input type="date" id="dob" name="dob">

11.Time: This creates a time input field where users can select a time from a time
picker.
Example
<label for="appointment-time">Appointment Time:</label>
<input type="time" id="appointment-time" name="appointment-time">

12.File:This creates a file input field where users can upload files from their device.
Example
<label for="file-upload">Upload File:</label>
<input type="file" id="file-upload" name="file-upload">

13.Reset: This creates a reset button that, when clicked, resets all form fields to their
default values.
Example
<input type="reset" value="Reset">

14.Hidden: This creates a hidden input field where data can be stored but not
displayed to the user. It's commonly used for passing values between pages or
storing data on the client side.
Example
<form>
<p>This is page 10</p>
<input type="hidden" name="page name" value="10" />
<input type="submit" name="submit" value="Submit" />
<input type="reset" name="reset" value="Reset" />

Output:

This is page 10
Submit Reset

❖ This tag helps to have a list of item from which a user can choose. The name of the
particular select tag and the name of the chosen option are returned.
<option value=”string” selected>……</option>
❖ The select statement will have several options from which the user can choose. The
values will be displayed as the user moves through the list and the chosen one
returned to the server.
<textarea name=”string” rows=”n” cols=”n”>…….</textarea>
❖ This creates a free format of plain text into which the user can enter anything they
like. The area will be sized at rows by cols but supports automatic scrolling.

<form> Attributes

Attribute Description
accept- Specifies the character encodings used for form
charset submission
action Specifies where to send the form-data when a form is
submitted.
<form action="/action_page.php">
autocomplete Specifies whether a form should have autocomplete
on or off.
<form action="/action_page.php" autocomplete="on">
enctype Specifies how the form-data should be encoded when
submitting it to the server (only for method="post")
method Specifies the HTTP method to use when sending form-
data.
The form-data can be sent as URL variables (with
method="get") or as HTTP post transaction (with
method="post").
The default HTTP method when submitting form data is
GET.
name Specifies the name of the form
novalidate Specifies that the form should not be validated when
submitted
<form action="/action_page.php" novalidate>
 rel Specifies the relationship between a linked resource and
the current document
target Specifies where to display the response that is received
after submitting the form:_blank(new window or
tab),_self(parent frame),_parent(current
window),_topframe(fullbodyofthewindow),name(named
iframe)
<form action="/action_page.php" target="_blank">

Example:
HTML code that implements forms
<html>
<head>
<title>form</title>
</head>
<body>
<p align="left">Name: <input type="text" maxlength=30 size=15>
<p align="left">Password: <input type="password" maxlenght=10
size=15>
<p align="left">Qualification: <br><input type="checkbox"name="q"
value="be">B.E
<input type="checkbox" name="q" value="me">M.E
<p align="left">Gender: <br> <input type="radio" name="g"
value="m">Male
<input type="radio" name="g" value="f">Female
<p align="left">course: <select name="course" size=1>
<option value=cse selected>CSE
<option value=it>CSIT
</select>
<p align="left">Address: <br><textarea name="addr" rows=4 cols=5
Scrolling=yes></textarea>
<p align="center"><input type="submit" name="s" value="Accept">
<p align="center"><input type="reset" name="c" value="Ignore">
</body>
</html>
Output:

FRAMES
Frames provide a pleasing interface which makes your web site easy to navigate.
When we talk about frames actually we are referring to frameset, which is a special
type of web page.
Simply frameset is nothing but collection of frames. Web page that contains frame
element is called framed page. Framed page begins with <frameset> tag and ends
with </frameset>.Each individual frame is identified through <frame> tag. Creation
of framed page is very simple. You can nest the framesets. First you decide how you
want to divide your webpage and accordingly define frame elements.
Consider the following diagrams, first form divides into two columns and the second
form divides into three rows.
In order to divide into two columns we can use the following syntax
<frameset cols=”25%,75%>
<frame name=”disp” src=”1.html”>
<frame name=”res” src=”2.html”>
</frameset>
In the second diagram we have three rows so by using rows parameter of frameset,
we can divide logically the window into three rows.
<frameset rows=”20%,*,10%>
<frame name=”first” src=” 1.html”>
<frame name=”second” src=” 2.html”>
<frame name=”third” src=” 3.html”>
</frameset>
According to above code ,first row occupies 20% of the window, third row occupies
10% of the window, second row * represents remaining area that is 70% of the
window.
Nested Framesets:-
Sometimes it is required to divide your window into rows and columns, then there is
requirement of nested framesets. Frameset with in another frameset is known as
nested frameset.
The purpose of NAME parameter in frame tag in the above example is nothing but
main importance is if we have some links in left side and you want to display
respective pages in the right side frame, then name is essential. Using target
parameter of Anchor(A) tag as follows users can specify name of frame.
Example:

First.html
<frameset rows=”20%,*”>
<frame name=”fr1” src=”frame1.html”>
<frameset cols=”25%,*”>
<frame name=”fr2” src=”frame2.html”>
<frame name=”fr3” src=”frame3.html”>
</frameset>
</frameset>

Frame1.html
<html>
<body>
<center><h1> College branches</h1></center>
</body>
</html>
Frame2.html
<html>
<body bgcolor=”green”>
<ul>
<li>CSE
<li>EEE
<li>ECE
<A href=”example2.html” target=”fr3”><li>IT</A>
</ul>
</body>
</html>
Frame3.html
<html>
<body text=”white” bgcolor=”tan”>
<h1>Profile</h1>
</body>
</html>

Output: