FORMs in HTML

CHAPTER 6

LOGO
 Contents

7.1 About Forms

7.2 Form Elements
7.3 HTML5 Input Types

2
D. Gichuki
 7.1 About Forms

 Forms are used to collect information from people

viewing your web site.
 For example, you can use forms to find out details about
your visitors through surveys and feedback, or engage in
e-commerce by selling your goods and services to
people.
 Forms are defined by the <FORM> </FORM> tags and
are made up of different elements to collect data.
 Once the user inputs all of the information, they submit
the form by using the "submit" button that you create.
 What happens with the data is a decision you will need to
make.
 You can use a script to manage the data, send the data
to database, or even receive data via e-mail.
3
D. Gichuki
 7.1 About Forms

 Forms can contain;

 Text boxes
 Password boxes
 Check boxes
 Radio buttons
 Buttons
 Select lists
 Text areas
 Labels
 Fieldsets
 Legends
 and more.. (will be discussed in 7.3)

4
D. Gichuki
 7.2 Form Elements

 All form elements should be written in between the

<form>..</form> tags.
Tag Description
<form> Defines an HTML form for user input
<input> Defines an input control
<label> Defines a label for an <input> element
<textarea> Defines a multiline input control
<select> Defines a drop-down list
<option> Defines an option in a drop-down list
<fieldset> Groups related elements in a form
<legend> Defines a caption for a <fieldset> element
<button> Defines a clickable button
5
D. Gichuki
 7.2 Form Elements - <form>

 The <FORM> </FORM> element is used to create an HTML

form and act as a container for form elements. Although the
form element itself isn’t usually a visible part of the page
(like the body tag), it could be with appropriate CSS.

Most commonly used FORM element Attributes

Attribute Description
method Specifies the HTTP method used when submitting the
form
action Specifies an address (url) where to submit the form
autocomplete Specifies if the browser should autocomplete the form
novalidate Specifies that the browser should not validate the
form.
name Specifies a name used to identify the form
6
D. Gichuki
 7.2 Form Elements - <form>

 The METHOD attribute specifies the HTTP method to be

used when submitting the form data:
 GET
 POST
 GET;
 The default method when submitting form data
 Submitted form data will be visible in the page address field
 The length of a URL is limited (about 3000 characters)
 Never used to send sensitive data! Better for non-secure data
 Useful for form submissions where a user want to bookmark
the result
 POST;
 The POST method does not display the submitted form data in
the page address field.
 Used for sensitive or personal information.
 Has no size limitations, and can be used to send large amounts
7
of data.
D. Gichuki
 7.2 Form Elements - <form>

 The ACTION attribute defines the action to be performed

when the form is submitted.
 Normally, the form data is sent to a web page on the server
when the user clicks on the submit button.
 In the example below, the form data is sent to a page on the
server called "action_page.php". This page contains a
server-side script that handles the form data:
 <form action="action_page.php">

8
D. Gichuki
 7.2 Form Elements - <form>

 AUTOCOMPLETE attribute is used to provide an

autocompletion option to user, when user visit the form
page. Default value is "on"
 If autocompletion is on, it will autocomplete the form and if
autocompletion is off, the user have to fill the form field
mannual.
 It is possible to have autocomplete “on” and “off” for the
form, and “off” and “on” for specific input fields.
 The autocomplete attribute works with <form> and the
following <input> types:
 text
 search <form action="demo_form.php"
 url autocomplete="on">
 tel
 password
 datepickers
9
 color
D. Gichuki
 7.2 Form Elements - <form>

 NOVALIDATE attribute is used to send the information

for not validating the form field. It specifies that form data
shouldn’t be validated.
 <form action="demo_form.php" novalidate>

 NAME attribute used to identify the form.

 for DOM usage: (document.forms.name)

10
D. Gichuki
 7.2 Form Elements - <input>

 The most important form element is the input element.

 An input element can vary in many ways, depending on
the type attribute.
 An input element can be of type
 text,
 checkbox,
 password,
 radio,
 submit,
 reset
 and more.. (will be discussed in 7.3)

11
D. Gichuki
 7.2 Form Elements - <input>

INPUT element Attributes:

TYPE (required)
 Defines the usage of the INPUT element.
 Hidden inputs always have TYPE = “hidden”.
NAME provides a unique identification for INPUT element.
 Each input field must have a name attribute to be
submitted.
 If the name attribute is omitted, the data of that input
field will not be sent at all.
VALUE indicates the value that the INPUT element sends to
the server upon submission.
SIZE attribute specifies the size for the input field. (in
characters)
MAXLENGTH attribute specifies the maximum number of
characters that the input field will accept.
12
D. Gichuki
 7.2 Form Elements - <input>

INPUT element Attributes:

The READONLY attribute specifies that the input field is

read only (cannot be changed)
 <input type="text" name="firstname" value="Raygan
" readonly>
The DISABLED attribute specifies that the input field is
disabled.
 A disabled input field is unusable and un-clickable, and
its value will not be sent when submitting the form
 <input type="text" name="firstname" value="Raygan
" disabled>

13
D. Gichuki
 7.2 Form Elements - <input>
Text Box
 Text boxes allow the users to enter a single-line text.
 Default width of a text field is 20 characters.

Example

First name: <input type="text" name="fname"

size="25"><br>
Last name: <input type="text" name="lname" size="25">

Result

14
D. Gichuki
 7.2 Form Elements - <input>
Password Box
 Password boxes are like text boxes, except the characters
in a password field are automatically masked.
(shown as asterisks or circles)
Example
User Name:<br>
<input type="text" name="username"><br>
Password:<br>
<input type="password" name="pswd">

Result

15
D. Gichuki
 7.2 Form Elements - <input>
Radio Buttons
 Usually found in a group of options, only one radio button in a group can be selected at a time.
 Selecting one radio button deselects the others in its group.
 Each radio button within a group should have the same name and different values. (Otherwise,
browsers cannot distinguish between them)
 CHECKED attribute indicates which radio button is selected initially

Example
<input type="radio" name="gender" value="male"> Male<br>
<input type="radio" name="gender" value="female"
checked>Female<br>
Result

16
D. Gichuki
 7.2 Form Elements - <input>
Check Boxes
 Check boxes let a user select NONE/ONE/MORE options of a
limited number of choices.
 Each check box within a group should have the same name
and different values. (Otherwise, browsers cannot
distinguish between them)
 CHECKED attribute indicates initially selected checkboxe/s.
Example
<input type="checkbox" name="choice" value="cb1" checked>Love
<br>
<input type="checkbox" name="choice" value="cb2">Cash <br>
<input type="checkbox" name="choice" value="cb3"
checked>Education <br>
Result

17
D. Gichuki
 7.2 Form Elements - <input>
Submit Button
<input type="submit"> defines a submit button.
A submit button is used to send form data to a server.
The data is sent to the page specified in the form's action
attribute.
The file (form-handler) defined in the action attribute
usually does something with the received input. (include
script for processing input data).
VALUE attribute changes the text displayed on the
button (default is “Submit”).

18
D. Gichuki
 7.2 Form Elements - <input>
Submit Button

Example

<form name="input" action="html_form_action.asp" method="get">

Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>

Result

If you type some characters in the text field above, and click
the "Submit" button, the browser will send your input to a page
called "html_form_action.asp".

19
D. Gichuki
 7.2 Form Elements - <input>
Reset Button
 A reset button is used to clear all the entries user
entered into the form and reset the form-data to its
default values.
 VALUE attribute changes the text displayed on the
button (default is “Reset”)
Example
<form name="input" action="html_form_action.asp" method="get">
<P>Username: <input type="text" name="user" size="25"></P>
<P>Password: <input type="password" name="pswd" size="25"></P>
<P><input type="submit" value="Submit">
<input type="reset" value="Reset"></P></form>
Result

20
D. Gichuki
 7.2 Form Elements - <label>
Label
 The <label> tag defines a label for an <input> element.
 The <label> element does not render as anything special
for the user. However, it provides a usability improvement
for mouse users, because if the user clicks on the text
within the <label> element, it toggles the control.
 The for attribute of the <label> tag should be equal to the
id attribute of the related element to bind them together.
 A label can be bound to an element either by using the
"for" attribute, or by placing the element inside the <label>
element.

21
D. Gichuki
 7.2 Form Elements - <label>
Label

Example
<input type="radio" name="gender" id="male" value="male"
checked>
<label for="male">Male</label><br>

<input type="radio" name="gender" id="female" value="female">

<label for="female">Female</label><br>

<input type="radio" name="gender" id="other" value="other">

<label for="other">Other</label><br>
Result

22
D. Gichuki
 7.2 Form Elements - <button>
Button
The <button> element defines a clickable button.

Example
<button type="button" onclick="alert('Hello World!')">
Click Me!
</button>

Result

23
D. Gichuki
 7.2 Form Elements - <textarea>
Text Area
 Inserts a scrollable text box into FORM for entering
multi-line text.
 It is commonly used in situations where you ask for info
that may require multiple sentences.
 You control the dimension of the text area by using the
ROWS and COLS attributes.
 The rows attribute specifies the visible number of lines
in a text area.
 The cols attribute specifies the visible width of a text
area.

24
D. Gichuki
 7.2 Form Elements - <textarea>
Text Area
Example

<textarea name="message" rows="5" cols="30">

Doğu Akdeniz Üniversitesi
Gazimağusa, Kuzey Kıbrıs
Mersin 10, Turkey
</textarea>

Result

25
D. Gichuki
 7.2 Form Elements - <select>,<option>
List Box
 <select> tag presents a drop-down list with choices
indicated by the <option> tags
 Include NAME attribute

 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
 Change the number of list options visible by including the
SIZE = “x” attribute inside the <SELECT> tag
 x number of options visible
 Use the multiple attribute to allow the user to select more
than one value:
 if you use multiple attribute, you should also assign
different values for each of the value attributes of option
tags
26
D. Gichuki
 7.2 Form Elements - <select>,<option>
List Box

Example

<select name="cars">
<option selected>BMW</option>
<option>Mercedes</option>
<option>Audi</option>
</select>

Result

27
D. Gichuki
 7.2 Form Elements - <select>,<option>
List Box

Example

<select name="colors" size="3" multiple>

<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
<option value="purple">Purple</option>
</select>
Result

28
D. Gichuki
 7.2 Form Elements - <fieldset>,<legend>
Grouping Form Data
 The <fieldset> element is used to group related data in a
form.
 The <legend> element defines a caption for the
<fieldset> element.
Example
<fieldset><legend>Personal Information:</legend>
Name:<br>
<input type="text" name="firstname" value="your first
name"><br>
Surname:<br>
<input type="text" name="lastname" value="your last name">
</fieldset>
Result

29
D. Gichuki
 7.2 Form Elements

Example
<!DOCTYPE html>

<!-- Form using a variety of components. -->

<html>
<head>
<meta charset = "utf-8">
<title>Form Example-1</title>
</head>
<body>
<h1>Feedback Form</h1>
<p>Please fill out this form to help us improve our site.</p>

<form method = "post" action = "">

<p><label><strong>Name:</strong>
<input name = "name" type = "text" size = "25">
</label></p>

<p><label><strong>Comments:</strong><br>
<textarea name = "comments" rows = "4" cols = "36"></textarea>
</label></p>

<p><label><strong>E-mail Address:</strong>
<input name = "email" type = "email" size = "25">
</label></p>

30
D. Gichuki
 7.2 Form Elements

Example (cont..)
<p><strong>Things you liked:</strong><br>
<label>Site design
<input name = "thingsliked" type = "checkbox" value = "Design"></label>
<label>Links
<input name = "thingsliked" type = "checkbox" value = "Links"></label>
<label>Ease of use
<input name = "thingsliked" type = "checkbox" value = "Ease"></label>
<label>Images
<input name = "thingsliked" type = "checkbox" value = "Images"></label>
<label>Source code
<input name = "thingsliked" type = "checkbox" value = "Code"></label>
</p>

<p><strong>How did you get to our site?:</strong><br>

<label>Search engine
<input name = "howtosite" type = "radio" value = "search engine" checked></label>
<label>Links from another site
<input name = "howtosite" type = "radio" value = "link"></label>
<label>Reference in a book
<input name = "howtosite" type = "radio" value = "book"></label>
<label>Other
<input name = "howtosite" type = "radio" value = "other"></label>
</p>

31
D. Gichuki
 7.2 Form Elements

Example (cont..)
<p>
<b>Rate our site:<b>
<select name = "rating">
<option selected>10</option>
<option>9</option>
<option>8</option>
<option>7</option>
<option>6</option>
<option>5</option>
<option>4</option>
<option>3</option>
<option>2</option>
<option>1</option>
</select>
</p>

<p>
<input type = "submit" value = "Submit">
<input type = "reset" value = "Clear">
</p>
</form>
</body>
</html>

32
D. Gichuki
 7.2 Form Elements

Output

33
D. Gichuki
 7.3 HTML5 Input Types

 HTML5 added several new input types:

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

 New input types that are not supported by older web

browsers, will behave as <input type="text">.

34
D. Gichuki
 7.3 HTML5 Input Types - color

 Is used for input fields that should contain a color.

 The color tool allows the user to choose a color using
standard web formats.
 Depending on browser support, a color-picker can show up
in the input field like the ones

35
D. Gichuki
 7.3 HTML5 Input Types - color

Example
Select your favorite color:
<input type="color" name="favcolor" value="#ff0022">

Result

36
D. Gichuki
 7.3 HTML5 Input Types - date

 Setting the input type to date indicates that you wish the
user to enter a date.
 Depending on browser support, a date picker can show up
in the input field.
 You can restrict the dates allowed to a specific range by
applying the min and max attributes to the element.

37
D. Gichuki
 7.3 HTML5 Input Types - date

Example
Birthday:
<input type="date" name="bday"><br><br>
Enter a date before 2017-11-23:<br>
<input type="date" name="bday" max="2017-11-
22"><br><br>
Enter a date after 2010-12-16:<br>
<input type="date" name="bday" min="2010-12-
17"><br><br>
Result

38
D. Gichuki
 7.3 HTML5 Input Types - time

 The purpose of the time input type is to allow the user to

enter a time.
 Depending on browser support a time picker might pop-up
when you enter the input field.

Example

Select a time:
<input type="time" name="times">

Result

39
D. Gichuki
 7.3 HTML5 Input Types – datetime-local

 The datetime-local element combines date and time in a

single input field, with no time zone.
 Depending on browser support a time picker might pop-up
when you enter the input field.

Example

Birthday (date and time):<br>

<input type="datetime-local" name="bdaytime">

Result

40
D. Gichuki
 7.3 HTML5 Input Types - month

 Allows the user to select a month and year.

 Depending on browser support, a date picker can show up
in the input field.
Example

Birthday (month and year):

<input type="month" name="bdaymonth">

Result

41
D. Gichuki
 7.3 HTML5 Input Types - week

 Allows the user to select a week and year.

 Depending on browser support, a date picker can show up
in the input field.

Example

Select a week and year:

<input type="week" name="week_year">

Result

42
D. Gichuki
 7.3 HTML5 Input Types – email

 Used for input fields that should contain an e-mail address.

 Depending on browser support, the e-mail address can be
automatically validated when submitted.

Example
E-mail:
<input type="email" name="mail">

Result

43
D. Gichuki
 7.3 HTML5 Input Types - number

 Defines a numeric input field.

 You can also set restrictions on what numbers are accepted
by using minand max attributes.

Example

Enter Your Office No. (between 101 and 112):

<input type="number" name="quantity" min="101"
max="112">
Result

44
D. Gichuki
 7.3 HTML5 Input Types - range

 Defines a control for entering a number whose exact value is not

important.
 Default range is 0 to 100. However, you can set restrictions on what
numbers are accepted with the min and max attributes.
 Depending on browser support, the input type "range" can be
displayed as a slider control.

Example
Grade:
<input type="range" name="points" min="0" max="100">
Result

45
D. Gichuki
 7.3 HTML5 Input Types - tel

 Used for input fields that should contain a telephone

number.
 The tel type is currently supported only in Safari 8.

Example
Telephone:
<input type="tel" name="telephone">

Result

46
D. Gichuki
 7.3 HTML5 Input Types - search

 Used for search fields.

 A search field behaves like a regular text field.

Example
Search Google:
<input type="search" name="googlesearch">
<input type="submit" value="Search">

Result

47
D. Gichuki
 7.3 HTML5 Input Types - url

 Used for input fields that should contain a URL address.

 Depending on browser support, the url field can be automatically
validated when submitted.

Example
Add your homepage:
<input type="url" name="homepage">
<input type="submit" value="Submit">

Result

48
D. Gichuki