BSc (Hons) in Information Technology

Year 1
Lab Exercise 4

Internetof
IT – Internet and Web
Web Technologies
Techniques Semester 2, 2017

Objective: Understand how to create an html5 web form with various input types.

Prerequisites: Basic knowledge in HTML5 tables and completed the previous lab exercise.

Instructions
Download this Lab Sheet into your machine. Complete the Lab Exercises given.

HTML5 Forms

HTML forms are used to create (rather primitive) GUIs on Web pages.
 Usually the purpose is to ask the user for information
 The information is then sent back to the server
Form elements include: buttons, checkboxes, text fields, radio buttons, drop-down
menus etc.

A form is defined with the <form> tag.

E.g.
<form>
.
input elements
.
</form>

Form Elements
The most used form tag is the <input> tag. The type of input is specified with the type attribute.
An input field can be a text field, a checkbox, a password field, a radio button, a button, and
more. The most commonly used input types are explained below.
a. text field
Text fields are used when you want the user to type letters, numbers, etc. in a
form.
E.g. <b>First name :< /b>
<input type="text" name="firstname" value="Kamal">

1
b. password field:
You can define password field when you want to insert password. Note that
when you type characters in a password field, the browser displays asterisks or bullets
instead of the characters.
E.g. <b>A password field: </b>
<input type="password" name="textfield3" value="secret">

c. submit button, reset button, plain button:

You can use submit button when you submit the data.
E.g. <input type="submit" name="Submit" value="Submit" >

d. checkbox:
Checkboxes are used when you want the user to select one or more options of a
limited number of choices.
E.g. <b>A checkbox: </b>
<input type="checkbox" name="checkbox” value="checkbox" checked>

e. radio button
Radio Buttons are used when you want the user to select one of a limited number
of choices.
E.g. <input type="radio" name="sex" value="male" /> Male <br/>
<input type="radio" name="sex" value="female" />Female

f. Data list:
This is used to predefine the input elements. When a user moves the mouse
over the text box an arrow will be shown to select the option. When the enters the text
it will auto complete.
E.g.
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
</datalist>

g. multi-line text field

Using multi-line text field you can insert multiple lines to multi-line text field.
In text-area you can write an unlimited number of characters.
E.g. <b>A multi-line text field </b>
<textarea name="textarea" cols="24" rows="2">Hello </textarea>

h. e-mail
A new feature of html 5, e-mail is a used to check whether the entered text is a proper
e-mail address. But it only checks whether ‘@’ sign is inputted. Therefore cannot be
used to exactly validate any email address.
E.g:- E-mail: <input type="email" name="email">

2
 i. url:
Another new feature in html 5 , this type is used to validate whether the entered text is
a url. But this is only able to check <sometext>:<sometext> ; therefore this cannot be
used to exactly validate the url.
E.g: - Add your homepage: <input type="url" name="homepage">

j. Input images:
This is used to search and upload images to the server. since there is no server
connected to currently we will only select the image.
E.g :- Select images: <input type="file" name="img" multiple>

This allows to select more than one file.

Form attributes
Forms are used to collect data from the user in the presentation layer and send those data to
the server for further processing. Form attributes are used to transfer data from the form to
the server.
a. name
When there are two or more forms in one web page the attribute “name” is used
to identify them uniquely.

b. action
The data is sent to the page specified in the form's action attribute. It can be
another web page .html, .php, .asp etc.
c. method
The method attribute specifies how to send form-data. (The form-data is sent to
the page specified in the action attribute). The form-data can be sent as URL variables
(with method="get") or as HTTP post transaction (with method="post").

E.g. <form name="myForm" method="POST" action="form2.html">

.
.
</form>

3
Textbox Place Holder attribute:-
This is used to assist the user to understand what type of data must be entered to the text box.
The place holder attribute works with: text, email, url, password and tel.
E.g. <input type="text" name="firstname" placeholder="First Name">

Exercise 1

4
5
EXERCISE: Create the following form in the project you are already working in. Make sure
to give the following name attributes to the input elements of the form.
HTML element name/ id
First name fname

Last name lname

Gender gender

Date of birth dob

Username username

Password password

Confirm Password re_password

Country country

Communication via comm

Profile picture pic

6
 Exercise:
Login to the System

Powered by TCPDF (www.tcpdf.org)