Scribd
Upload
226 views

HTML FORMS, Frame PDF

HTML forms allow users to enter data into a website. Forms contain controls like text fields, checkboxes, and buttons. The <form> element defines an HTML form, which typically contains <input>, <select>, and <textarea> elements for collecting user input. Form data is submitted to a server for processing, with the target specified by the form's action attribute and submission method defined by the method attribute.

Uploaded by

Liyanshu patel
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
226 views

HTML FORMS, Frame PDF

HTML forms allow users to enter data into a website. Forms contain controls like text fields, checkboxes, and buttons. The <form> element defines an HTML form, which typically contains <input>, <select>, and <textarea> elements for collecting user input. Form data is submitted to a server for processing, with the target specified by the form's action attribute and submission method defined by the method attribute.

Uploaded by

Liyanshu patel
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 29

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
<form action="/action_page.php">
<label for="fname">First
name:</label><br>
<input type="text" id="fname"
value="John"><br><br>
<input type="submit" value="Submit">
</form>
Input Type Reset
<form action="/action_page.php">
<label for="fname">First

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


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

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="submit" value="Submit">
<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>


<input type="checkbox" id="vehicle2"
name="vehicle2" value="Car">
<label for="vehicle2"> I have a
car</label><br>
● Input Type Checkbox
<input type="checkbox" id="vehicle3"
● <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>

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

</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">

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


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:

<iframe src="demo_iframe.htm"
style="border:none;" title="Iframe
● An HTML iframe is used to display a Example"></iframe>

web page within a web page.


With CSS, you can also change the size, style and color
of the iframe's border:

Example

<iframe src="demo_iframe.htm"
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
web page within a web page.
<p><a href="https://www.w3schools.com"
target="iframe_a">W3Schools.com</a></p>

You might also like