HTML Forms

topicTen

IMD311 – Introduction to Web Content Management & Design

MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my

WEB.DESIGN
 WEB.DESIGN
Learning Objectives

IMD311 – Introduction to Web Content Management & Design

• At the end of this chapter the students
should be able to:
– Understand all the tags used in forms.

MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my

– Develop a dynamic web page.
– Use different type of form effectively.
– Creating a website that capable to interact
with visitors.
 WEB.DESIGN
Introduction

IMD311 – Introduction to Web Content Management & Design

• A form is simply an area that can contain form
fields. Form fields are objects that allow the visitor
to enter any kind of information.
• For example text boxes, drop-down menus or radio
buttons.

MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my

• When the visitor clicks a submit button, the
content of the form is usually sent to a program
that runs on the server.
• However, there are exceptions. JavaScript is
sometimes used to create magic with form fields.
• An example could be when turning options in a
drop-down menu into normal links.
 WEB.DESIGN
Forms: CGI-Script

IMD311 – Introduction to Web Content Management & Design

• When submitting a form, we need a
program that can receive the
information and to do something with
it.

MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my

• Such programs are sometimes referred
to as CGI programs.
• CGI stands for Common Gateway
Interface, which is computer latin for a
program that translates information
 WEB.DESIGN
Forms: CGI-Script

IMD311 – Introduction to Web Content Management & Design

• This translation is necessary because the
server might be a UNIX machine while the
visitor might be sending information from
a Windows platform.

MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my

• Windows and UNIX handle information
differently - so if there were no CGI, then
UNIX machines could only communicate
with other UNIX machines.
• Besides that, using PHP and ASP is also a
good practice (web programming
language).
 WEB.DESIGN
Forms: Example of Login Form

IMD311 – Introduction to Web Content Management & Design

• This is what happens
when the form is
submitted:
– The username and
password will be sent
to server.

MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my

– The program will
search the database for
a matching record.
– If the record is found,
user will be redirected
to main page.
– If no record is found,
an error message will
be displayed.
 WEB.DESIGN
Forms: Tag

IMD311 – Introduction to Web Content Management & Design

• When a form is submitted, all fields on the
form are being sent.
• The <form> tag tells the browser where
the form starts and ends.

MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my

• You can add all kinds of HTML tags
between the <form> and </form> tags.
• The tags must be included within the
BODY section of your HTML pages.
 WEB.DESIGN
Forms: Tag

IMD311 – Introduction to Web Content Management & Design

• This form is useless, because there are no form
fields and no recipient that will received the
contents of the forms.
• This statement is just used to declare that we are
using forms in our HTML pages.

MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my

• To let the browser know where to send the
content we add these properties to the <form>
tag:
 Reset

Button
Button

Submit
Image
Button

Drop-do
wn Menu
Text

Radio
Button
Form
Fields

Box
Check
Password
Forms: Fields

Hidden

Textarea

IMD311 – Introduction to Web Content Management & Design

MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my

WEB.DESIGN
 WEB.DESIGN
Forms: Text Fields

IMD311 – Introduction to Web Content Management & Design

• Text fields are one line areas that allow
the user to input text.

MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my

<input type= "text" size= "25" name=
"username">
 WEB.DESIGN
Forms: Password Fields

IMD311 – Introduction to Web Content Management & Design

• Password fields are similar to text fields.
• The difference is that what is entered into a password
field shows up as dots on the screen.
• This is, of course, to prevent others from reading the
password on the screen.

MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my

<input type= "password" size= "25" name= "password">
 WEB.DESIGN
Forms: Hidden Fields

IMD311 – Introduction to Web Content Management & Design

• Hidden fields are similar to text fields, with one very
important difference.
• The difference is that the hidden field does not show on
the page.
• Therefore the visitor can't type anything into a hidden

MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my

field, which leads to the purpose of the field which is to
submit information that is not entered by the visitor.

<input type= "hidden" size= "25" name= "browser_type">

 WEB.DESIGN
Forms: Text Area

IMD311 – Introduction to Web Content Management & Design

• Text areas are text fields that can span several lines.
• Unlike most other form fields, text areas are not defined with an
<input> tag.
• Instead you enter a <textarea> tag where you want the text area to
start and a closing </textarea> tag where you want the area to end.
• Everything written between these tags will be presented in the text area
box.

MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my

<textarea cols= "40" rows= "5" name= "address">Please write your
address here</textarea>
 WEB.DESIGN
Forms: Check Boxes

IMD311 – Introduction to Web Content Management & Design

• Check boxes are used when you want to let the visitor
select one or more options from a set of alternatives.
• If only one option is to be selected at a time you should
use radio buttons instead.

MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my

<input type= "checkbox" name= "option1" value= "cash">
 WEB.DESIGN
Forms: Radio Buttons

IMD311 – Introduction to Web Content Management & Design

• Radio buttons are used when you want to let the visitor
select one - and just one - option from a set of
alternatives.
• If more options are to be allowed at the same time you
should use check boxes instead.

MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my

<input type= "radio" name= "gender" value=
"male">Male

<input type= "radio" name= "gender" value=

"female">Female
 WEB.DESIGN
Forms: Drop Down Menu

IMD311 – Introduction to Web Content Management & Design

• Sometimes you may want to replace text fields with drop-down menus.
• This might be because selecting from a menu is easier than typing.
• But it could also be because the script that handles the form can't interpret just any
text entry.

<select name= "state">

<option value="Kel">Kelantan</option>
<option value="Ked">Kedah</option>
<option value="Shah">Shah Alam</option>

MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my

</select>
 WEB.DESIGN
Forms: Submit & Reset Buttons

IMD311 – Introduction to Web Content Management & Design

• Submit - When a visitor clicks a submit button, the form
is sent to the address specified in the action setting of
the <form> tag.
• Reset - When a visitor clicks a reset button, the entries
are reset to the default values

MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my

<input type= "reset" value= "Reset">
<input type= "submit" value= "Submit">
 WEB.DESIGN
Forms: File

IMD311 – Introduction to Web Content Management & Design

• FILE is used for doing file uploads in a form.
• File uploads are a relatively new and still not
well-standardized type of form input, but they show
great promise once the bugs are ironed out.
• File uploads allow you to send an entire file from your

MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my

computer to the web server as part of your form input.

<input type= "file" name= "gambar">

 WEB.DESIGN
Example: Email Form

IMD311 – Introduction to Web Content Management & Design

<html>
<head></head>
<body>
<form name="form1" method="post"
action="mailto:[email protected]">

MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my

Name: <input name="name" type="text">
Subject: <input name="subject" type="text">
Message: <textarea name="message"></textarea>
<input name="submit" type="submit" value="submit">
</form>
</body>
</html>
 IMD311 – Introduction to Web Content Management & Design

MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my

WEB.DESIGN
 WEB.DESIGN
Exercise

IMD311 – Introduction to Web Content Management & Design

• Construct HTML codes based on the following
statement:

❑ Create HTML codes that request certain information

from the visitors. The script should be able to:

MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my

– Collect name, age, gender, address, campus, mentor and
visitor picture.
– Information on gender can be inputted using either radio
button or drop down list.
– Used multiline for address and drop down/radio button for
campus and mentor.
– Data for campus is Kelantan, Johor, Shah Alam, Sarawak and
Kedah.
– Data for mentor is En Zulkharnain, En Ghazali, Dr Nasir, En
Farouk, En Khalid, En Rashid, En Azhan, En Idzwan, Cik
Fatimah, Pn Nor Rahmawati, and Pn Haslinda.
– The form should be submitted to an email address which is
[email protected] using a POST method.