Scribd
Upload
26 views

HTML ch10 HTML Forms

The document describes HTML forms and their elements. It discusses that HTML forms are used to collect user input on web pages through interactive controls like text boxes, checkboxes, etc. and submit it to a server. It provides details on the <form> tag and form attributes like action and method. It also explains different form controls like text input, password, textarea, and their uses in taking single-line, multi-line and hidden user inputs.

Uploaded by

Lilian Nguru
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
26 views

HTML ch10 HTML Forms

The document describes HTML forms and their elements. It discusses that HTML forms are used to collect user input on web pages through interactive controls like text boxes, checkboxes, etc. and submit it to a server. It provides details on the <form> tag and form attributes like action and method. It also explains different form controls like text input, password, textarea, and their uses in taking single-line, multi-line and hidden user inputs.

Uploaded by

Lilian Nguru
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 48

IBP HTML FORMS

Html forms
HTML Forms

An HTML form is a section of document that contains interactive


controls that enable a user to submit information to a web server.
What is HTML Form
• HTML Forms are required to collect different kinds of user inputs,
such as contact details like name, email address, phone numbers,
or details like credit card information, etc.
• Forms contain special elements called controls like inputbox,
checkboxes, radio-buttons, submit buttons, etc. Users generally
complete a form by modifying its controls e.g. entering text,
selecting items, etc. and submitting this form to a web server for
processing.
• The <form> tag is used to create an HTML form. Here's a simple
example of a login form:
Introduction
• A form will take input from the site visitor and
then will post it to a back-end application such
as CGI, ASP Script or PHP script etc. The
back-end application will perform required
processing on the passed data based on
defined business logic inside the application.
• There are various form elements available like
text fields, textarea fields, drop-down menus,
radio buttons, checkboxes, etc.
Syntax

• The HTML <form> tag is used to create an


HTML form and it has following syntax:
• <form action="Script URL"
method="GET|POST"> form elements like
input, textarea etc. </form>
Form Attributes
• Apart from common attributes, following is a list of
the most frequently used form attributes:
Attribute Description

action Backend script ready to process your passed data. The action attribute defines
the action to be performed when the form is submitted.
method Method to be used to upload data. The most frequently used are GET and POST
methods.

target Specify the target window or frame where the result of the script will be displayed. It
takes values like _blank, _self, _parent etc.

enctype You can use the enctype attribute to specify how the browser encodes the data before
it sends it to the server. Possible values are:
•application/x-www-form-urlencoded - This is the standard method most forms use in
simple scenarios.
•mutlipart/form-data - This is used when you want to upload binary data in the form of
files like image, word file etc.
Form methods
• The method attribute specifies the HTTP
method (GET or POST) to be used when
submitting the form data:
• The default method when submitting form
data is GET.
• However, when GET is used, the submitted
form data will be visible in the page address
field:
GET method

• Appends form-data into the URL in name/value


pairs
• The length of a URL is limited (about 3000
characters)
• Never use GET to send sensitive data! (will be
visible in the URL)
• Useful for form submissions where a user wants
to bookmark the result
• GET is better for non-secure data, like query
strings in Google
Get method example
<!DOCTYPE html>
<html>
<body>

<h2>The method Attribute</h2>


<p>This form will be submitted using the GET method:</p>

<form action="/action_page.php" target="_blank" method="GET">


First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>

<p>After you submit, notice that the form values is visible in the address bar of the new browser
tab.</p>

</body>
</html>
Post
• Always use POST if the form data contains
sensitive or personal information. The POST
method does not display the submitted form
data in the page address field.
• POST has no size limitations, and can be used
to send large amounts of data.
• Form submissions with POST cannot be
bookmarked
Post example
<!DOCTYPE html>
<html>
<body>

<h2>The method Attribute</h2>


<p>This form will be submitted using the POST method:</p>

<form action="/action_page.php" target="_blank" method="POST">


First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>

<p>After you submit, notice that, unlike the GET method, the form values is NOT visible in the address bar of the new
browser tab.</p>

</body>
</html>
HTML Form Controls
• There are different types of form controls that
you can use to collect data using HTML form:
Adding text
• Text Input Controls text input
• Checkboxes Controls Password input
• Radio Box Controls Multi line text
• Select Box Controls Choices
• File Select boxes Radio buttons
Check boxes
• Hidden Controls
Drop down boxes(Select boxes)
• Clickable Buttons Submitting forms
• Submit and Reset Button File select boxes
Clickable buttons
Submit button
Image button
Upload button
Text Input Controls

• There are three types of text input used on forms:


• Single-line text input controls - This control is used for
items that require only one line of user input, such as
search boxes or names. They are created using
HTML <input> tag.
• Password input controls - This is also a single-line text
input but it masks the character as soon as a user
enters it. They are also created using HTMl <input>
tag.
• Multi-line text input controls - This is used when the
user is required to give details that may be longer than
a single sentence. Multi-line input controls are created
using HTML <textarea> tag.
Single-line text input controls

• This control is used for items that require only


one line of user input, such as search boxes or
names. They are created using HTML <input>
tag.
• Example
• Here is a basic example of a single-line text
input used to take first name and last name:
Example
• <!DOCTYPE html>
• <html>
• <head>
• <title>Text Input Control</title>
• </head>
• <body>
• <form >
• First name: <input type="text" name="first_name" />
• <br>
• Last name: <input type="text" name="last_name" /> </form>
• </body>
• </html>
Attributes
Following is the list of attributes for <input> tag for creating
text field.

Attribute Description
type Indicates the type of input control and for text input control it will be set
to text.

name Used to give a name to the control which is sent to the server to be
recognized and get the value.

value This can be used to provide an initial value inside the control.

size Allows to specify the width of the text-input control in terms of characters.

maxlength Allows to specify the maximum number of characters a user can enter
into the text box.
Password input controls

• This is also a single-line text input but it masks


the character as soon as a user enters it. They
are also created using HTML <input> tag but
type attribute is set to password.
• Example
• Here is a basic example of a single-line
password input used to take user password:
Password control
• <!DOCTYPE html>
• <html>
• <head>
• <title>Password Input Control</title>
• </head>
• <body>
• <form > User ID : <input type="text" name="user_id" />
• <br>
• Password: <input type="password" name="password" />
• </form>
• </body>
• </html>
Attributes
Following is the list of attributes for <input> tag for creating password field.

Attribute Description
type Indicates the type of input control and for password
input control it will be set to password.
name Used to give a name to the control which is sent to the
server to be recognized and get the value.
value This can be used to provide an initial value inside the
control.
size Allows to specify the width of the text-input control in
terms of characters.
maxlength Allows to specify the maximum number of characters
a user can enter into the text box.
Multiple-Line Text Input Controls

• This is used when the user is required to give


details that may be longer than a single
sentence. Multi-line input controls are created
using HTML <textarea> tag.
• Example
• Here is a basic example of a multi-line text
input used to take item description:
Example
• <!DOCTYPE html>
• <html>
• <head>
• <title>Multiple-Line Input Control</title> </head>
• <body>
• <form> Description :
• <br />
• <textarea rows="5" cols="50" name"> Enter description here...
="description
• </textarea>
• </form>
• </body>
• </html>
Attributes
Following is the list of attributes for <textarea> tag.

Attribute Description
name Used to give a name to the control
which is sent to the server to be
recognized and get the value.
rows Indicates the number of rows of text
area box.
cols Indicates the number of columns of text
area box
Grouping elements
• Grouping Form Data with <fieldset>
• The <fieldset> element is used to group
related data in a form.
• The <legend> element defines a caption for
the <fieldset> element.
Fieldset example
• <!DOCTYPE html>
• <html>
• <body>

• <h2>Grouping Form Data with Fieldset</h2>


• <p>The fieldset element is used to group related data in a form, and the legend element defines a
caption for the fieldset element.</p>

• <form action="/action_page.php">
• <fieldset>
• <legend>Personal information:</legend>
• First name:<br>
• <input type="text" name="firstname" value="Mickey">
• <br>
• Last name:<br>
• <input type="text" name="lastname" value="Mouse">
• <br><br>
• <input type="submit" value="Submit">
• </fieldset>
• </form>
• </body>
• </html>
Checkbox Control

• Checkboxes are used when more than one


option is required to be selected. They are also
created using HTML <input> tag but type
attribute is set to checkbox.
• Example
• Here is an example HTML code for a form with
two checkboxes:
example
• <!DOCTYPE html>
• <html>
• <head>
• <title>Checkbox Control</title>
• </head>
• <body>
• <form>
• <input type="checkbox" name="maths" value="on"> Maths
• <input type="checkbox" name="physics" value="on"> Physics
• </form>
• </body>
• </html>
Attributes
Following is the list of attributes for <checkbox> tag.

Attribute Description

type Indicates the type of input control and for checkbox input
control it will be set to checkbox.

name Used to give a name to the control which is sent to the


server to be recognized and get the value.

value The value that will be used if the checkbox is selected.

checked Set to checked if you want to select it by default.


Radio Button Control

• Radio buttons are used when out of many


options, just one option is required to be
selected. They are also created using HTML
<input> tag but type attribute is set to radio.
• Example
• Here is example HTML code for a form with
two radio buttons:
Example
• <!DOCTYPE html>
• <html>
• <head>
• <title>Radio Box Control</title>
• </head>
• <body>
• <form>
• <input type="radio" name="subject" value="maths"> Maths
• <input type="radio" name="subject" value="physics"> Physics
• </form>
• </body>
• </html>
Attributes
Following is the list of attributes for radio button.

Attribute Description
type Indicates the type of input
control and for checkbox input
control it will be set to radio.
name Used to give a name to the
control which is sent to the
server to be recognized and get
the value.
value The value that will be used if the
radio box is selected.
checked Set to checked if you want to
select it by default.
The select element
• The <select> Element
• The <select> element defines a drop-down list
• The <option> elements defines an option that
can be selected.
• 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:
Select Example 1
• <!DOCTYPE html>
• <html>
• <head>
• <title>Select Box Control</title>
• </head>
• <body>
• <form>
• <select name="dropdown"> <option value="Maths"
selected>Maths</option>
• <option value="Physics">Physics</option> </select> </form>
• </body>
• </html>
Select Example 2
• <!DOCTYPE html>
• <html>
• <body>

• <h2>The select Element</h2>

• <p>The select element defines a drop-down list:</p>

• <form action="/action_page.php">
• <label for="cars">Choose a car:</label>
• <select id="cars" name="cars">
• <option value="volvo">Volvo</option>
• <option value="saab">Saab</option>
• <option value="fiat">Fiat</option>
• <option value="audi">Audi</option>
• </select>
• <input type="submit">
• </form>

• </body>
• </html>
Attributes
Following is the list of important attributes of <select> tag:

Attribute Description

name Used to give a name to the


control which is sent to the server
to be recognized and get the
value.

size This can be used to present a


scrolling list box.

multiple If set to "multiple" then allows a


user to select multiple items from
the menu.
Following is the list of important attributes of <option> tag:

Attribute Description

value The value that will be used if an


option in the select box box is
selected.

selected Specifies that this option should be


the initially selected value when the
page loads.

label An alternative way of labeling options


File Upload Box

• If you want to allow a user to upload a file to


your web site, you will need to use a file
upload box, also known as a file select box.
This is also created using the <input> element
but type attribute is set to file.
• Example
• Here is example HTML code for a form with
one file upload box:
Upload example
• <!DOCTYPE html>
• <html>
• <head>
• <title>File Upload Box</title>
• </head>
• <body>
• <form>
• <input type="file" name="fileupload" accept="image/*" />
• </form>
• </body>
• </html>
Attributes
Following is the list of important attributes of file upload box:

Attribute Description

name Used to give a name to the control which is sent


to the server to be recognized and get the value.

accept Specifies the types of files that the server


accepts.
Button Controls
There are various ways in HTML to create clickable buttons. You can
also create a clickable button using <input> tag by setting its type
attribute to button. The type attribute can take the following values:

Type Description
submit This creates a button that automatically submits a form.

reset This creates a button that automatically resets form controls to their
initial values.

button This creates a button that is used to trigger a client-side script when
the user clicks that button.

image This creates a clickable button but we can use an image as


background of the button.
example
• <!DOCTYPE html>
• <html>
• <head>
• <title>File Upload Box</title>
• </head>
• <body>
• <form>
• <input type="submit" name="submit" value="Submit" /> <input
type="reset" name="reset" value="Reset" />
• <input type="button" name="ok" value="OK" />
<input type="image" name="imagebutton" src="/html/images/logo.png" />
• </form>
• </body>
• </html>
Hidden Form Controls

• Hidden form controls are used to hide data inside


the page which later on can be pushed to the
server. This control hides inside the code and does
not appear on the actual page. For example,
following hidden form is being used to keep
current page number. When a user will click next
page then the value of hidden control will be sent
to the web server and there it will decide which
page has be displayed next based on the passed
current page.
example
• <!DOCTYPE html>
• <html>
• <head>
• <title>File Upload Box</title>
• </head>
• <body>
• <form>
• <p>This is page 10</p>
• <input type="hidden" name="pagename" value="10" />
<input type="submit" name="submit" value="Submit" />
<input type="reset" name="reset" value="Reset" />
</form> </body> </html>
HTML5 <datalist> Element

• The <datalist> element specifies a list of


pre-defined options for an <input> element.

• Users will see a drop-down list of the


pre-defined options as they input data.

• The list attribute of the <input> element, must


refer to the id attribute of the <datalist>
element.
Html5 Data list
<!DOCTYPE html>
<html>
<body>

<h2>The datalist Element</h2>


<p>The datalist element specifies a list of pre-defined options for an input element.</p>

<form action="/action_page.php">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
</form>

<p><b>Note:</b> The datalist tag is not supported in Safari or IE9 (and earlier).</p>

</body>
</html>
HTML5 <output> Element

• The <output> element represents the result of


a calculation (like one performed by a script).
Output example
<!DOCTYPE html>
<html>
<body>

<h2>The output Element</h2>


<p>The output element represents the result of a calculation.</p>

<form action="/action_page.php"
oninput="x.value=parseInt(a.value)+ parseInt(b.value)"> 0
<input type="range" id="a" name="a" value="50"> 100 +
<input type="number" id="b" name="b" value="50">
= <output name="x" for="a b"></output>
<br><br>
<input type="submit">
</form>
<p><strong>Note:</strong> The output element is not supported in Edge 12 or Internet Explorer
and earlier versions.</p>
</body>
</html>
HTML5 Input Types

• HTML5 added several new input types:


• color
• date
• datetime-local
• email
• month
• number
• range
• search
• tel
• time
• url
• week
HTML5 <datalist> Element

• The <datalist> element specifies a list of


pre-defined options for an <input> element.

• Users will see a drop-down list of the


pre-defined options as they input data.

• The list attribute of the <input> element, must


refer to the id attribute of the <datalist>
element.
HTML5 Input Types

• HTML5 added several new input types:


• color
• date
• datetime-local
• email
• month
• number
• range
• search
• tel
• time
• url
• week

You might also like