HTML FORMS, Frame PDF

HTML FORMS
-Prepared By Ms. Rupam Patel(MCA)

Why use HTML Form
HTML Form
HTML forms are required if you want to collect some data
from of the site visitor.
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.
● An HTML form is a section of a document

which contains controls such as text fields,
password fields, checkboxes, radio buttons,
submit button, menus etc. HTML Form Syntax
1. <form action="server url" method="get|post">
● An HTML form facilitates the user to enter
2. //input controls e.g. textfield, textarea,
data that is to be sent to the server for
processing such as name, email address, radiobutton, button
password, phone number, etc. . 3. </form>

HTML Form Controls
There are different types of form controls that you can use to
HTML Form: collect data using HTML form −
The <input> Element
● The HTML <input> element is the most used

form element.
● An <input> element can be displayed in

many ways, depending on the type attribute.
HTML Form Controls
<!DOCTYPE html>
HTML Form: <html>

<body>
The <input> Element <h2>Text input fields</h2>

<form>
<label for="fname">First name:</label><br>
● Text Fields <input type="text" id="fname" name="fname"
value="John"><br>
● The <input type="text"> defines a single-line <label for="lname">Last name:</label><br>
input field for text input. <input type="text" id="lname" name="lname"
value="Doe">
</form>
<p>Note that the form itself is not visible.</p>
<p>Also note that the default width of text input
fields is 20 characters.</p>
</body>
</html>
The <label> Element
Notice the use of the <label> element in the
HTML Form:
example above.
The <label> tag defines a label for many form

The <input> Element elements.
The <label> element is useful for screen-reader

users, because the screen-reader will read out
loud the label when the user focus on the input
element.
The <label> element also help users who have

difficulty clicking on very small regions (such as
radio buttons or checkboxes) - because when the
user clicks the text within the <label> element, it
toggles the radio button/checkbox.
The for attribute of the <label> tag should be

equal to the id attribute of the <input> element
to bind them together.
The <radio> Element
<form>
HTML Form: <input type="radio" id="male"

name="gender" value="male">
The <input> Element <label for="male">Male</label><br>
<input type="radio" id="female"

Radio Buttons name="gender" value="female">
The <input type="radio"> defines a radio <label for="female">Female</label><br>

button.
<input type="radio" id="other"
name="gender" value="other">
Radio buttons let a user select ONE of a
limited number of choices. <label for="other">Other</label>
</form>
Input Type Password
<form>
HTML Form: <label

for="username">Username:</label><br>
The <input> Element <input type="text" id="username"
name="username"><br>
Input Type Password <label for="pwd">Password:</label><br>
<input type="password" id="pwd"

<input type="password"> defines a name="pwd">
password field:
</form>
The Submit Button
<form action="/action_page.php">
HTML Form: <label for="fname">First
The <input> Element name:</label><br>
<input type="text" id="fname"

name="fname" value="John"><br>
The Submit Button

<label for="lname">Last
name:</label><br>
The <input type="submit"> defines a button for
submitting the form data to a form-handler.
<input type="text" id="lname"
name="lname" value="Doe"><br><br>
The form-handler is typically a file on the server with a
script for processing input data.
<input type="submit" value="Submit">
The form-handler is specified in the form's action
attribute. </form>
The Action Attribute
The action attribute defines the action to be
HTML Form: performed when the form is submitted.
The <input> Element Usually, the form data is sent to a file on the
server when the user clicks on the submit button.
In the example above, the form data is sent to a

file called "action_page.php". This file contains a
The Submit Button server-side script that handles the form data:
The <input type="submit"> defines a button for <form action="/action_page.php">

submitting the form data to a form-handler.
If the action attribute is omitted, the action is set
The form-handler is typically a file on the server with a
to the current page.
script for processing input data.
The form-handler is specified in the form's action

attribute.
Value Description
HTML Form: _blank The response is displayed in a new
The <input> Element

window or tab
_self The response is displayed in the

same frame
The Target Attribute
● The target attribute specifies where to display

_parent The response is displayed in the
the response that is received after submitting parent frame
the form.
● The target attribute can have one of the

following values: _top The response is displayed in the full
body of the window
framename The response is displayed in a

named iframe
Example
HTML Form: This example uses the GET method when
The <input> Element

submitting the form data:
<form action="/action_page.php"
method="get">
The Method Attribute
● The method attribute specifies the
HTTP method to use used when Example
submitting the form data.
● The form-data can be sent as URL This example uses the POST method when
variables (with method="get") or as submitting the form data:
HTTP post transaction (with
method="post"). <form action="/action_page.php"
● The default HTTP method when method="post">
submitting form data is GET.
Notes on GET:
● Appends the form data to the URL, in

name/value pairs
HTML Form: ● NEVER use GET to send sensitive data! (the

submitted form data is visible in the URL!)
The <input> Element ●

●
The length of a URL is limited (2048 characters)
Useful for form submissions where a user wants
to bookmark the result
● GET is good for non-secure data, like query
strings in Google
● GET vs. POST
Notes on POST:
● Appends the form data inside the body of the

HTTP request (the submitted form data is not
shown in the URL)
● POST has no size limitations, and can be used to
send large amounts of data.
● Form submissions with POST cannot be
bookmarked
Tip: Always use POST if the form data contains

sensitive or personal information!
The Name Attribute
Each input field must have a name attribute to be
HTML Form: submitted.
The <input> Element If the name attribute is omitted, the value of that
input field will not be sent at all.
This example will not submit the value of the "First

name" input field:
● The Name Attribute
<label for="fname">First
name:</label><br>
value="John"><br><br>
</form>
Input Type Reset
<label for="fname">First
HTML Form: name:</label><br>

The <input> Element name="fname" value="John"><br>

<label for="lname">Last
name:</label><br>
<input type="text" id="lname"
name="lname" value="Doe"><br><br>
● Input Type Reset
<input type="reset">
● <input type="reset"> defines a reset </form>
button that will reset all form values to
their default values:
Input Type Checkbox
<form>
<input type="checkbox" id="vehicle1"
HTML Form: name="vehicle1" value="Bike">

<label for="vehicle1"> I have a
The <input> Element bike</label><br>

name="vehicle2" value="Car">
<label for="vehicle2"> I have a
car</label><br>
● Input Type Checkbox
● <input type="checkbox"> defines a name="vehicle3" value="Boat">
checkbox. <label for="vehicle3"> I have a
● boat</label>
</form>
● Checkboxes let a user select ZERO or
MORE options of a limited number of
choices.
Input Type <select >
<label for="cars">Choose a car:</label>
<select id="cars" name="cars">
HTML Form: <option value="volvo">Volvo</option>

<option value="saab">Saab</option>
The <input> Element <option value="fiat">Fiat</option>

<option value="audi" selected
>Audi</option>
</select>
● The <select> Element The <option> elements defines an option that can
● The <select> element defines a be selected.
drop-down list:
By default, the first item in the drop-down list is
selected.
To define a pre-selected option, add the selected

attribute to the option:
The <textarea> Element
Example
HTML Form:
<textarea name="message" rows="10"
cols="30">
The <input> Element

The cat was playing in the garden.
</textarea>
The rows attribute specifies the visible number of

lines in a text area.
● The <textarea> Element
● The <textarea> element defines a The cols attribute specifies the visible width of a
text area.
multi-line input field (a text area):
You can also define the size of the text area by
using CSS:
<textarea name="message" style="width:200px;

height:600px;">
The cat was playing in the garden.
</textarea>
The <fieldset> and <legend>
Elements
HTML Form:
<form action ="/action_page.php">
The <input> Element

<fieldset >
<legend>Personalia: </legend >
<label for="fname"> First name: </label><br>

● The <fieldset> element is used to
group related data in a form. <input type="text" id="fname" name="fname"
value="John">< br>
● The <legend> element defines a <label for="lname"> Last name: </label><br>
caption for the <fieldset> element.

<input type="text" id="lname" name="lname"
value="Doe">< br><br>
</fieldset >
</form>
Input Type Color
<form>
<label for="favcolor">Select your
HTML Form: favorite color:</label>

<input type="color" id="favcolor"
The <input> Element name="favcolor">

</form>
● Input Type Color

● The <input type="color"> is used for
input fields that should contain a
color.
●
● Depending on browser support, a color
picker can show up in the input field.
Input Type Date
<form>
<label for="birthday">Birthday:</label>
<input type="date" id="birthday"
HTML Form: name="birthday">

</form>
The <input> Element You can also use the min and max attributes to add
restrictions to dates:
● Input Type Date Example

● The <input type="date"> is used for
<label for="datemax">Enter a date before
input fields that should contain a date.
1980-01-01:</label>
●
● Depending on browser support, a date <input type="date" id="datemax" name="datemax"
picker can show up in the input field. max="1979-12-31"><br><br>
<label for="datemin">Enter a date after

2000-01-01:</label>
<input type="date" id="datemin"

name="datemin" min="2000-01-02">
Input Type File
<form>
HTML Form: <label for="myfile">Select a file:</label>
The <input> Element <input type="file" id="myfile"

name="myfile">
</form>
● Input Type File
● The <input type="file"> defines a

file-select field and a "Browse" button
for file uploads.
Input Type Number
<form>
HTML Form: <label for="quantity">Quantity (between 1

and 5):</label>
The <input> Element <input type="number" id="quantity"
name="quantity" min="1" max="5">
● Input Type Number </form>

● The <input type="number"> defines a
numeric input field.
● You can also set restrictions on what

numbers are accepted.
● The following example displays a

numeric input field, where you can
enter a value from 1 to 5:
Input Restrictions
Attribute Description
checked Specifies that an input field should be pre-selected when the page loads (for type="checkbox" or type="radio")
disabled Specifies that an input field should be disabled
max Specifies the maximum value for an input field
maxlength Specifies the maximum number of character for an input field
min Specifies the minimum value for an input field
pattern Specifies a regular expression to check the input value against
readonly Specifies that an input field is read only (cannot be changed)
required Specifies that an input field is required (must be filled out)
size Specifies the width (in characters) of an input field
step Specifies the legal number intervals for an input field
value Specifies the default value for an input field

The following example displays a numeric input field,
where you can enter a value from 0 to 100, in steps of
10. The default value is 30:
HTML Form:
Example
The <input> Element
<form>
● Input Restrictions <label for="quantity">Quantity:</label>
<input type="number" id="quantity"

name="quantity" min="0" max="100" step="10"
value="30">
</form>
Input Restrictions Example:
<form action="/action_page.php" autocomplete="on">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname" autofocus><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname" disabled><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" autocomplete="off" required><br><br>
<label for="points">Points:</label>
<input type="number" id="points" name="points" step="3">

HTML Iframe Syntax
The HTML <iframe> tag specifies an inline frame.
HTML IFrames: An inline frame is used to embed another document

within the current HTML document.
Syntax
<iframe src="url" title="description">
● An HTML iframe is used to display a
web page within a web page. Tip: It is a good practice to always include a title
attribute for the <iframe>. This is used by screen
readers to read out what the content of the iframe
is.
Iframe - Set Height and Width
Use the height and width attributes to specify the
HTML IFrames: size of the iframe.
The height and width are specified in pixels by default:
Example
<iframe src="demo_iframe.htm" height="200"
● An HTML iframe is used to display a width="300" title="Iframe Example"></iframe>
web page within a web page.
Or you can add the style attribute and use the CSS
height and width properties:
<iframe src="demo_iframe.htm"
style="height:200px;width:300px;"
title="Iframe Example"></iframe>
Iframe - Remove the Border
By default, an iframe has a border around it.
HTML IFrames: To remove the border, add the style attribute and use
the CSS border property:
style="border:none;" title="Iframe
● An HTML iframe is used to display a Example"></iframe>

With CSS, you can also change the size, style and color
of the iframe's border:
Example
style="border:2px solid red;" title="Iframe
Example"></iframe>
Iframe - Target for a Link
An iframe can be used as the target frame for a link.
HTML IFrames: The target attribute of the link must refer to the name
attribute of the iframe:
<iframe src="demo_iframe.htm" name="iframe_a"

title="Iframe Example"></iframe>
● An HTML iframe is used to display a
<p><a href="https://www.w3schools.com"
target="iframe_a">W3Schools.com</a></p>

HTML FORMS, Frame PDF

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML FORMS, Frame PDF

Uploaded by

Copyright:

Available Formats

HTML FORMS

-Prepared By Ms. Rupam Patel(MCA)

For example: If a user want to purchase some items on

● An HTML form is a section of a document

password, phone number, etc. . 3. </form>

The <input> Element

● The HTML <input> element is the most used

● An <input> element can be displayed in

HTML Form: <html>

The <input> Element <h2>Text input fields</h2>

The <label> tag defines a label for many form

The <label> element is useful for screen-reader

The <label> element also help users who have

The for attribute of the <label> tag should be

HTML Form: <input type="radio" id="male"

<input type="radio" id="female"

The <input type="radio"> deﬁnes a radio <label for="female">Female</label><br>

HTML Form: <label

Input Type Password <label for="pwd">Password:</label><br>

<input type="password" id="pwd"

HTML Form: <label for="fname">First

The <input> Element name:</label><br>

<input type="text" id="fname"

The Submit Button

HTML Form: performed when the form is submitted.

In the example above, the form data is sent to a

The <input type="submit"> deﬁnes a button for <form action="/action_page.php">

The form-handler is speciﬁed in the form's action

HTML Form: _blank The response is displayed in a new

The <input> Element

_self The response is displayed in the

● The target attribute speciﬁes where to display

● The target attribute can have one of the

framename The response is displayed in a

HTML Form: This example uses the GET method when

The <input> Element

● Appends the form data to the URL, in

HTML Form: ● NEVER use GET to send sensitive data! (the

The <input> Element ●

● Appends the form data inside the body of the

Tip: Always use POST if the form data contains

HTML Form: submitted.

This example will not submit the value of the "First

HTML Form: name:</label><br>

The <input> Element name="fname" value="John"><br>

HTML Form: name="vehicle1" value="Bike">

The <input> Element bike</label><br>

HTML Form: <option value="volvo">Volvo</option>

The <input> Element <option value="fiat">Fiat</option>

To define a pre-selected option, add the selected

The <input> Element

The rows attribute specifies the visible number of

<textarea name="message" style="width:200px;

The cat was playing in the garden.

The <input> Element

<legend>Personalia: </legend >

<label for="fname"> First name: </label><br>

● The <legend> element deﬁnes a <label for="lname"> Last name: </label><br>

caption for the <ﬁeldset> element.

<input type="submit" value="Submit">

HTML Form: favorite color:</label>

The <input> Element name="favcolor">