FORMs in HTML

Lesson 6
Lecturer: Dr. Geoffrey Mariga, PhD
EMAIL: gmariga@mut.ac.ke
Contents

6.1 About Forms

6.2 Form Elements
6.3 HTML5 Input Types

2
6.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, sent the data to
database, or even receive data via e-mail.
3
6.1 About Forms

 Forms can contain;

- Text boxes, - Password boxes
- Check boxes, - Radio buttons
- Buttons - Select lists
- Text areas, - Labels
- Fieldsets
- Legends
and more…

4
6.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
6.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
6.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
of data.
7
6.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
6.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 manual.
 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
 url <form action="demo_form.php" autocomplete="on">
 tel
 password
 datepickers
 color
9
6.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
6.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
6.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
6.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" read
only>
 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" disa
bled>

13
6.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
6.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
6.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
6.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
6.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
6.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
6.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
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
7.2 Form Elements - <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
6.2 Form Elements - <button>
 The <button> element defines a clickable button.
Example
<button type="button" onclick="alert('Hello World!')">
Click Me!
</button>

Result

23
6.2 Form Elements - <textarea>

 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
6.2 Form Elements - <textarea>

Example

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

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

Result

25
 List Box
7.2 Form Elements - <select>,<option>
 <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
 List Box
7.2 Form Elements - <select>,<option>
Example

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

Result

27
 List Box
7.2 Form Elements - <select>,<option>
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
 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
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
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
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
7.2 Form Elements
Output

33
 6.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
6.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
6.3 HTML5 Input Types - color
Example
Select your favorite color:
<input type="color" name="favcolor" value="#ff0022">

Result

36
6.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
6.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
6.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
6.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
6.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
6.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
6.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
6.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
6.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
6.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
6.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
6.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