Highlighted by Pragati Computers, M. 99041676771.

Creating HTML forms

using KompoZer

With increase in the use of Internet many activities have become online. We may use
a web page
to fill information about ourselves or a product. HTML forms are used to help the
visitors of the
website to input data. It allows for more interactivity and control in data entry.
For instance, if you
want to open a mail account or register on a website, you need to enter your
personal details in
a form. This information is used to setup the account for the user. In order to
obtain such information
on Internet, HTML forms are used. This data is further stored by the application
and used to retrieve
the details about the users registered on the website.

A form in HTML is a container used to collect different kinds of inputs from the
user. HTML forms
contains elements like label, checkbox, text input field, radio button, submit
button, reset button and many
more. These elements are used to enter the data as well as validate the data within
the forms. We will
create a sumple form to enter the data using HTML tags, but before that let us
discuss about the elements
used to create HTML forms. The elements used are described in the section below :

e Form

e Input

e Textarea

e Select and Option

Form elements

The form element is used to create an HTML form. It acts as a container for all the
elements used
in the form. The tag <form>... </form> is used to implement this element. The
example shows
the use of the form element :

<form action="register.html" method="post">

input elements

</form>

Observe that the form element uses two attributes namely action and method. The
action attribute is used
to specify where to send the form data when the form is submitted. It takes a
filename as value. This file
is opened when the user clicks on the submit button after filling the data in the
form.

The method attnbute specifies the HTTP method to be used when sending the data. It
can take
Creating HTML forms using KompoZer 1

Highlighted by Pragati Computers, M. 99041676771.

Highlighted by Pragati Computers, M. 99041676771.

two values; GET and POST. The GET method retrieves the data from the form and sends
it to
the server by attaching it at the end of the URL. This method allows only a limited
amount of
information to be sent at a time. In the POST method, the data is sent as a block
through the
HTTP transaction. The data is included in the body of the request. This method does
not have
any restrictions on data length. The default value for method attribute is GET.

Input element

The input elements are used to insert various fields like radio button, text box
and checkbox in
the form. The tag <input> ....</input> or <input> is used to implement this
element. The input tag
has different attributes like type, name and value.

The type attribute of the input element specifies the field that is to be created
in the form. The
name attribute specifies the name to be used for the field in the form. The value
attribute specifies
the default value of the field in the form. Table 1.1 shows different values of
attribute and its usage.

Radio Creates radio buttons in the form. Any oneradio | <INPUT TYPE = "radio" NAME
button can be selected at atime fromagroupof | = “var" VALUE = "txt">

radio buttons. Generally used to select a single

item from a given group of items.

Checkbox | Creates checkboxes in the form. Multiple check | <INPUT TYPE="checkbox"”

boxes can be selected at a time. Generally NAME = "var" VALUE ="txt" >
used to select a multiple items from a given group

of items.

Text Creates a text field to enter textin the form.A | <INPUT TYPE = "text" NAME
user can enter any data of his choice in the | = “var” VALUE = "txt" >
text field.

Password | Creates a password fieldin the form. Similarto | <INPUT TYPE =

"password"
the text field but the characters are not displayed | NAME = "var" >

to the user. Instead the character typed is

converted into non readable format.

Submit Creates a submit button inthe form. Onclicking | <INPUT TYPE = “submit”
the submit button, the values of data enteredin | VALUE = "label" >

the form is submitted to the file specified in the

action attribute of the form element.

Reset Creates a reset button in the form. On clicking | <INPUT TYPE = "reset" VALUE
the reset button, the values of dataenteredinthe | = "Jabel" >
form are cleared and set back to default values.
Table 1.1: Values of Type attribute used with input tag

2 Computer Studies : 12

Highlighted by Pragati Computers, M. 99041676771.

Highlighted by Pragati Computers, M. 99041676771.

Textarea element

The Textarea element allows multi-line text input. The tag <textarea>...</textarea>
is used to implement
this element. It allows entering unlimited number of characters. It can be used to
enter comment,
report or a long description of product. The size of a textarea element can be
specified using rows
and cols attributes. The rows attribute is used to set the number of rows of text
that will be visible
without scrolling up or down. The cols attribute is used to set the number of
columns of text that
will be visible without scrolling right or left. The following example shows how to
insert a textarea
in the form.

<form method="post” action="comment.html">

Input your comments: <br /> <textarea name="comments” rows="4" cols="20">
... Your comments here...
</textarea>
</form>
Select and Option element

The select element is used to create a drop down list or menu in a form. The option
element is
used to specify the values that are to be displayed in the menu. The tag
<select>....</select> is
used to create a drop down menu. The tag <option>...</option> is used to create the
elements

within the menu. Following example shows the use of select and option element.
<select>
<option value="A hmedabad" >Ahmedabad</option>
<option value="Rajkot" >Rajkot</option>
<option value="Surat" >Surat </option>
</select>

Let us now create a sample registration form using the elements learned so far.
Code listing 1.1
shows the HTML source code used to generate the form. The output of the code is
shown in
figure 1.1.

<HEAD>
<TITLE>Registration Form</TITLE>
</HEAD>
<BODY bgcolor="lightblue">
<hl> <center>Registration Form</center></h1>
<FORM name="frmRegistration" action="form.html">
<center>
<TABLE BORDER="0">
<TR>
<TD width="12%">First Name</TD>
<TD width="1%">é&nbsp;</TD>

Creating HTML forms using KompoZer 3

Highlighted by Pragati Computers, M. 99041676771.
<TD> <INPUT type="textbox" name="txtFirstName"></TD>
| <TR> |
co <TD>Middle Name</TD> co
aw <TD>&nbsp;</TD> NM
© <TD><INPUT type="text box" name="txtMiddleName"></TD> co
5 | =
© <The ©
(o>) <TD>Last Name</TD> o>
o <TD> &nbsp;</TD> o
Ss <TD> <INPUT type="text box" name="txtLastName"></TD> =
</TR>
n <TR> n
dd <ID>Gender</TD> “
rT) <TD>&nbsp;</TD> @
baad <TD> =
4 <INPUT type="radio" name="Gender" value="male” CHECKED>Male a
<INPUT type="radio” name="Gender" value="female” >Female
= =
</TD>
\e) </TR> \e)
O <IR> O
— <TD>Hobby</TD> —
w <TD>&nbsp;</TD> 6
©) <TD> ©)
rae} <INPUT type="checkbox" name="chkSinging" value="Sing" CHECKED>Singing ray
in <INPUT type="checkbox" name="chkDancing" value="Dance">Dancing i=
(Ce <INPUT type="checkbox" name="chkReading” value="Read">Reading =
> </TD> >
te) </TR> ©
oO hE oO
@ <TD>Address</TD> rab)
r= <TD>&nbsp;</TD> c
<TD>
oS <Textarea name="txtAddress" rows="5" cols="70">Insert Address Here</Textarea>
oS)
< pa <=
©) wIRe ©)
Ct <TR> =
2 <TD>City</TD> 7
<TD>&nbsp;</TD>
<TD>

4 Computer Studies : 12
Highlighted by Pragati Computers, M. 99041676771.

<Select Name="cmbCity">
<Option >Ahmedabad</Option>
<Option >Baroda</Option>
<Option selected>Rajkot</Option>
<Option >Surat</Option>
</Select>
</TD>

</TR>

<TD>&nbsp;</TD>
<TD>&nbsp;</TD>
<TD> <INPUT type="submit” name="cmdSubmit" value="Submit">
<INPUT type="reset" name="cmdReset" value="Reset">
</TD>
</TR>
</TABLE>
</center>
</FORM>
</BODY>
</HTML>

Code listing 1.1: HTML code to generate sample registration form

Segistration Farm - honllla Firefox

dey! homestripti/examplet bterl -© 4- ce &

Registration Form

First Name

Middle Name

Last Name

Gender “Male Female

Hobby SSingimy Dancing Reading

[niert Address here

Address

City fajkat

Supmet, | Reset

Figure 1.1: Registration Form as displayed in the web browser

Thus, you can see that creating a form using HTML tags is a tedious process. A
simpler method
is to use an IDE (Integrated Development Environment). An IDE is a software
application that provides
complete facilities to programmer to develop software. It provides a GUI (Graphical
User Interface),
text or code editor, a compiler and/or interpreter and a debugger. KompoZer,
Eclipse, JBuilder and
Netbeans are all examples of some open source IDEs. Let us discuss how to use the
KompoZer
to create web pages.

Creating HTML forms using KompoZer 5

Highlighted by Pragati Computers, M. 99041676771.

Highlighted by Pragati Computers, M. 99041676771.

Introduction to KompoZer

KompoZer is a free open source web development IDE. It can be downloaded from
http://
www.KompoZer.net. It provides a web page editor which has a simple graphical
interface known
as WYSIWYG "what you see is what you get". It is a complete web authoring system.
which integrates
web page development and web file management. Creating new web pages using Kompo/er
is
quick and easy. The users can also edit the web pages by using the source code and
making changes.
KompoZer incorporates a Site Manager which gives rapid access to the files on both
local machines
and remote servers. Web pages and associated files can be uploaded to a remote
server from within
KompoZer. It also supports the use of "Styles" through Cascading Style Sheet (CSS).
We will learn
about CSS in the next chapter.

Before we learn how to create forms using KompoZer, let us first learn the KompoZer
interface.
Open KompoZer by locating its icon. To view the different toolbars and status bar
(if not visible)
click on View > Show/Hide. Select all the options listed: Composition Toolbar,
Format Toolbar1,
Format Toolbar2, Edit Mode Toolbar and Status bar. Site Manager and Rulers option
should also
be checked. Figure 1.2 shows the window that will be displayed after selecting the
toolbars.

Menu bar ——7"" [de Yew iuet -Fgemat Tele Tosh Hel
Composition Toolbar —— - | ws PY Lp db ann. aoe @
Farmat Toolbart _ : i : an a :
Format Toolbar? | a ita , 2
verabiaewieth or |W 4 |g ! EnZS
Page tab snag : =
+ Sih Png ee Te | a
Rulers eT at! ie : T
ao a ea TF 1
Site Manager
Page Area
FTP creme!
© DOR tages ee ee || fay al
|
|
Status bar Edit mode Toolbar

Figure 1.2: KompoZer Interface

Observe that in figure 1.2 you can see the menu bar on the top with the options
like File, Edit,
View, Insert, Format, Table, Tools and Help. Below the menu bar there are three
Toolbars:
Composition, Format Toolbar] and Format Toolbar2.

The composition toolbar is used to create new file, open a file, save a file or
publish a web page.
The Format toolbar! and Format toolbar? are used to format the text, add bullets,
numbering and
perform similar formatting operations.

6 Computer Studies : 12

Highlighted by Pragati Computers, M. 99041676771.

Highlighted by Pragati Computers, M. 99041676771.

Open an existing File

To open an existing file, click on 5 icon present on the composition toolbar.

Alternatively, you
pen

can also click on File > Open. If the file has been opened recently, then you can
also open
the file from File > Reeent Pages.

Now let us learn to create a forms using KompoZer. We will create a simple form
with two input
fields: Name and E-mail address and a submit button. Follow the steps given to
create the form.

e Open KompoZer. Create a new file.

e From the menu bar, select Insert > Form > Define Form. Alternatively, you can
also click
on * in the composition toolbar. This will open a Form Properties dialog box as
shown

Focm
in figure 1.4. Clicking on More Properties shows added options for the form.
Settings
Form Name:

Action URL:
Method: *

~More Properties

Advanced Edic...

Cancel OK

Figure 1.4 : Form preperties dialog box

e Enter appropriate name for the form. In the Action URL, enter the file name where
you
want the form data to be submitted. Select the method POST from the method drop
down menu, and
click on the OK button. Figure 1.5 shows the details added in the form property
dialog box.

| = Form Properties eae

Settings
Form Mame: Farm

Action URL: | Form1.html

Method: POST »

~More Properties

| Advanced Edit...
Cancel OK

Figure 1.5 : Details entered in Form properties dialog box

8 Computer Studies : 12

Highlighted by Pragati Computers, M. 99041676771.

Highlighted by Pragati Computers, M. 99041676771.

In the centre of the window, you can see two panes: Site Manager and blank web
page. Site manager
is a powerful tool used to navigate within the site or between the sites. You can
close the site manager

pane by clicking on close button or press F9. The page pane shows a blank untitled
web page.
The bottom right side of the window shows Edit mode toolbar with three viewing
modes: Normal,
HTML Tags and Preview. All the three viewing modes provide editing facilities.

The Preview mode offers the page view as seen in a browser. The difference is that
in the preview
mode the scripts do not run and therefore their effects will not be seen. The links
also does not
operate in preview mode.

The Normal view is very similar to preview mode. In this mode the table outlines
are visible.

The HTML Tags view helps those who are familiar with HTML. A yellow marker is used
to indicate
the start tag for all elements. Clicking on a marker selects and highlights whole
of the element.

The left side of the page pane shows Design, Split and Source tabs. The Design tab
is used to

design the web page. The Split tab displays the HTML source of the current element.
Source tab

shows all details of the HTML code. It helps in editing the source code.

On the bottom of the window you can see the status bar. When we click on any item
in page,
its structure appears in the status bar. If you want to customize any toclbar,
right click on the respective
toolbar and click on customize toolbar option. You can then customize the toolbar
as per your choice.

Create a New File

To create a new file, open KompoZer. In the menu bar click File > New. A dialog box
as shown
in figure 1.3 appears with title "Create a new document or template". Select "Blank
document" option
from the options that are visible in the dialog box. At the bottom of the dialog
box you can see
a label "Create in". Select New Tab option from the drop down menu next to it. This
allows us
to create the page in a new tab. Click on the Create button.

| m Create anew document or template

- What kind of filedo you want to create? -

® A blank document
_| createa XHTML document @& Strict DTD
Anew document based ona template

A blank template
Createin:; |New Tab -

Cancel Create

Figure 1.3 ; Create a mew file

Creating HTML forms using KompoZer 7

Highlighted by Pragati Computers, M. 99041676771.

Highlighted by Pragati Computers, M. 99041676771.

« You can see the form inserted with light blue colored outline in the untitled
page as shown in
figure 1.6. In normal view, the forms are shown surrounded by a dotted blue box.
All the form
elements like text box, radio button, check box and drop down box will be placed
within this
box. Press the Enter key a few times to give some space to work on the form.

Fle bdit View “lesect. Format tole fool Help

oat E@ & 4 ili go «ate ©
. eee = et CUR ieee = a famille diign |1 Recbin a
Bahra id le 4)[ 10 [ee ee) Ss 2 @
Beer pi y
+ Site Manager .
View (ales P | ——
, = vl -# aay |
Name Je]
Th ———————T
> DOM Explore te (hex [teem aesourte ay
shod

Figure 1.6 : Light blue colored form outline.

e First, we will insert a label for the name field. Click on Insert > Form > Define
label.

Place the cursor in the form where you want your label to appear. Type the text
"Name" in

the label as shown in figure 1.7. To come out of the label field, click outside the
field.
S|

Fie Edit view Invert Foroat Table Took Help

ie mH 4 * ul anu. 4ێ q@
ers te Pid Gimmes inal Keim dnt emaga Table Tiers rm
Body Feat =i it %) Luli cig ait = a
Bee w{eBiu
~ site Manager ‘@ honk Riad)
View: Lal filog : |

ee & ef a a ]
Name [s] Niune,
a

> DOM Explore © Gesign [split | 4 Saute tool

Figure 1.7 : Label field inserted in the form

Creating HTML forms using KompoZer 9

Highlighted by Pragati Computers, M. 99041676771.

Highlighted by Pragati Computers, M. 99041676771.

To insert an input text field in the form, click Insert > Form > Form Field. Figure
1.8
shows the form field properties dialog box. The drop down menu shows various input
field type
options which we had discussed earlier. Click on more properties, it shows advanced
properties
related to the field like field size, maximum length.

(mi Form Field Properties nx

y Field Type
[Text iil PS
Field Settings
Field Name:

initial Value:

Read Only

*More Properties

Cancel

Figure 1.8 : Add form field

From the drop down menu select Text. Under the Field Settings heading, enter a name
in the
Field Name text box. In our case we have used name as the field name. Enter some
text in
the Initial Value field, if you want to show some text before the user actually
enters data. Here
we have left this field empty. Click on the OK button. Figure 1.9 shows the form
after text
input field is added.

File dle View fneert Format Table Zoos Help

& PERS 22 RARE: £E @

Rory Teak a) eid) | 8 | S| a

varabieweth 3) |AFe cal BR } YE Bae

> Gite Manager @iuntitied) |

vow | Alfie | Ee

+ OGM Espiner = Oeugr [i spke Lt aurcel

Figure 1.9 : Label and Text field added

10

Computer Studies : 12

Highlighted by Pragati Computers, M. 99041676771.

Highlighted by Pragati Computers, M. 99041676771.

« Similarly, we will add another label "E-mail" below the name label field. Add an
input text field
for E-mail, just like we did for the name field. Here enter text abc@xyz.com in the
Initial Value
textbox. This will help the user understand the format of E-mail address. Figure
1.10 shows

entitled ~ Komporer

y . = a
2.4 eo 6 bo a Ae @
bony Text my) is en: a
Varinblewidth: os||M¢ ja 4/8 } Ul/E © 4 &
i Site Manager IW funtitied) |
Views aM fides = | 7 VAbeipa |
22 fe i
Name Js]
Name |
2 E-mail fabciticyz.com
F Oeret le
+ GOM Explorer ® Design | Salit ‘ee ere Normal
abimis <bodys «farm

Figure 1.10 : Form with both text fields added

e Finally we will add a submit button in the form. Click Insert > Form > Form
Field, From
the drop-down menu select Submit Button. Type Submit in the both Field Name and
Field Value
text boxes, and click on the OK button. Figure 1.1] shows the look of form
properties dialog
box for submit button.

| m Form Field Properties ox

Field Type
Submit Button =

p Field Settings -
FieldName: | Submit

Field Value: Submit

-More Properties

Advanced Edit...

Cancel OK

Figure 1.11 : Input field submit button

Creating HTML forms using KompoZer 11

Highlighted by Pragati Computers, M. 99041676771.

Highlighted by Pragati Computers, M. 99041676771.

e The form at present is in the normal view. To have a preview of the form click on
Edit mode
toolbar and select Preview. Figure 1.12 shows the form in the preview mode.

Fae Edit View. jncert Foret Table Tools Help

_ ae SY vf - . ch G
bee i et Patan Te wirtor Lik keeps Te irre om
Body Teak, = = tL U/E & ) we =z @. |
Variable wieth > r /|\yey A\|B i USER aOo
Lz Sle Manager Siuntitied) | =
Wifes Alles: ¥ 1 7 i}
@ 6 of a = ww
Naene [=]. - a
i Name |
E-mail febogpayz con ~
Subenit
| FTP conscde "|
+ Dt Eeplorer © Design [spit [ak Soarce | Piweiew
clilink> bodys <fortiie

Figure 1.12 : Form as seen in preview mode

Thus, we have created our first form using KompoZer. You can see how KompoZer helps
you
creating forms within a short span and also relieves you from the tedious job of
writing the source
code which takes a long time. You can also see the source code of the form just
created by clicking

on the Source tab. See figure 1.13.

iti ep

file Edit View feert Format Table Toes Help

. #-@ 3 ~~ 7-6 @
1 en fey = Babu teal

Bele ajiery

+ Site Manager
View: All es

# 4 7 8 a ie

Name Iz] i ne ;

FTP pongo

+ OOM Exalorie | = Design | bg spar a Source Prevhy

Figure 1.13 : Source code view of form

12 Computer Studies : 12

Highlighted by Pragati Computers, M. 99041676771.

Highlighted by Pragati Computers, M. 99041676771.

Let us save the file which we have created. Click File > Save. Alternatively you
can also

il
click on the save button 4 in the composition toolbar. This opens a Page Title
dialog box

as shown in figure 1.14. We can give a suitable title to the web page here. We have
given
the name "example1" to the title page. Now click on OK button.

| mi Page Title

Please enter a title for the current page.

This identifies the page in the window title and bookmarks.

Cancel

ox

OK

Figure 1.14 : Page title dialog box

The page title will be displayed in the browser windows title bar when viewed in
the browser. In
case we have created multiple web pages we should give the name of the website as
the title page.
In this example, since we created a single web page with a form, the title page is
named as examplel.

e After clicking the OK button, a new dialog box "Save Page As" is opened which
prompts to enter

a filename and specify the location where you want to save the file as shown in
figure 1.15.

‘Mi Save Page AS

ine 3

Name: jExampletihernl

Saveinfolder: | 4 ae bripti eee pceas)

Places Name

© search example.html
<2 Recently Used farm1.htrnl
i tripti

i Desktop

Lo File System be
J 52 GB Filesystem

Lo harshil-riya
Lj 110 GB Filesyst...

oc) System Seserved

7 Gocuments

a Music

df Pictures

B Videos

i Downloads

» | Size
sSa bytes Yesterday at 17:29
297 bytes Saturday 15 June 2013

Create Folder

Meordi fied

HTML Fikes: =

Cancel

Figure 1.15

: Save Page As Dialog box

Creating HTML forms using KompoZer

13

Highlighted by Pragati Computers, M. 99041676771.

Highlighted by Pragati Computers, M. 99041676771.

Remember to save the file with Aire! or Ain as an extension. Click on Save button.
This will take
us back to the main window.

Note : If you are creating a website and this page is the home page that will open
when you

type the website's URL, then save the page with the name index.html.

Having learnt how to create, open, save and create a simple form in KompoZer, let
us now create
the registration form, which we had created earlier using the HTML tags. Follow the
steps given

to create the registration form.

e Create a new file.

e From the menu bar, select Inseri > Form > Define Form. In the Form Properties
dialog
box enter the details as shown in figure 1.16.

( mi Form Properties

Settings
Form Name:
Action URL:

Method:

forme
Form2.html

POST

~*More Properties

Cancel

Advanced Edit...

OK

Figure 1.16 : Form Properties dialog box

e Press OK. A form will be displayed showing the light blue colored outline. Press
the Enter key

to create space in the form.

e To give the heading to the form, select Heading] from Format Toolbar1. In Format
Toolbar2,
select centre align icon. Enter the text "Registration Form".

e To insert the label, Click Form > Define Label. Type "First Name" in the Field
name. Next,
to insert input field for the label "First name", click Form > Form Field. Select
Text in the
Field Type menu. Figure 1.17 shows the Form Field Properties dialog box. Observe
that we
have used "firstname" as the field name. Press OK button.

‘(gi Form Field Properties: _

Field Type
Text

Field Settings

Field Name:

initial Vaiue:

~Mare Pre

firstname

Read Only

sperties

Cancel

Advanced Edit...

OK

Figure 1.17: Form Field Properties dialog box for Firstname

14

Computer Studies : 12

Highlighted by Pragati Computers, M. 99041676771.

Highlighted by Pragati Computers, M. 99041676771.

e Similarly, insert the label "Middle Name" and "Last Name" in the form. The form
after adding
the fields will look similar to the one shown in figure 1.18.

f= Boat “View isert Format Table Toot, Help

a_i wy aac. d@ @
Body Text mh is q|1 NE =| a == a
varoewien 3 Irele xl( a) UE Ra
fics Site Manager B(untitied) | a
View: “All files 2 [ tide I
ie a eh wi ae 7
Name a
7 4 Registration Form
First Name |
Middle Name |
Last Name |
z
hk
FTP consol
bene fualarer ® Design [EE spt |e source | Howmal

Figure 1.18 : Form displayed after adding the fields

® Now we need to create radio buttons for the Gender field. First, create a label
named "Gender".

e For creating a radio button, click Form > Form Field and select field type as
Radio Button
from the drop down menu as shown in figure 1.19.

| imi Form Field Properties

Field Type

'

Radio Button

Field Settings
Group Name: | gender

Field Value: male

@ Initially Selected

~More Properties

Advanced Edit...

Cancel OK

Figure 1.19 : Ferm field property for Radio Button

Creating HTML forms using KompoZer 15

Highlighted by Pragati Computers, M. 99041676771.

Highlighted by Pragati Computers, M. 99041676771.

Type a name in the Group name box (note that the name should not contain spaces).
Here we
have entered Group Name as "gender". Similarly in the Field Value text box type
“male”. If we
want the male option of the radio button selected when the form is loaded then,
check the box
in front of the text “Initially Selected" and click OK button.

e Insert a label with title "Male" near the radio button created.

e Swunuilarly create another radio button named "Female". Remember, when we create
the radio
buttons within a group, the group name must be the same for all the possible
answers. Hence
enter the Group Name as "gender". In the Field Value text box type "female". Click
OK button.

e Insert a label "Female" near the radio button created. The form after inserting
the radio buttons
and their labels will look as shown in figure 1.20.

eile Edt View jigect Format. Twble Tools Hels

4G : — -
. -#.A@ & 6% iF - - bh & @
‘ Den Seen Dubkth | reueab Sisk Aactoid bind a ladle Rae as
Boaly text a |= 5 a ae: | a = a
Variable width» = r “|x XK) Bl U E £3 @
- site Manager [| miuntithesd} | a
View, Alles . | _ Wee _
Ya oe | #ear]
Name 5]
Registration Form
First Name
Middle Name |
Last Name
Gender @ Male c Female
PETP console
c DOM Explore | © pesign [sok ee somree farm
shims <body <forme

Figure 1.20 : Form displayed after radio buttons are added

® Now we need to add "Hobby" field. As a person can have more than one hobby, hence
multiple
selections of hobbies are possible. Thus we need to create check box for the hobby
field. Create
a label for hobby.

e Now, click Form > Form Field and from the drop down menu select Check Box field
type.
Enter name in the Field Name box and a value in the Field Value box as shown in
figure 1.21.
Check the box in front of "Initially Selected" so as to keep the option checked
when the form
loads. Click OK button.

16 Computer Studies : 12
Highlighted by Pragati Computers, M. 99041676771.
Highlighted by Pragati Computers, M. 99041676771.

‘mi Form Field Properties

Field Type
Check Box =
Field Settings -

FieldName: | hobby

Field Value: singing

@ initially Checked

~More Properties

Advanced Edit...

Cancel OK

Figure 1.21 : Checkbox field type settings

e Insert a label "Singing" near the checkbox created.

e Swmuilarly create two checkboxes with Field Values as "dancing" and "reading"
respectively.
Remember, to keep the Field Name same for all the options of checkbox.

e Insert the labels "Dancing" and "Reading" near the checkboxes created. The form
after inserting
checkboxes and their labels will look as shown in figure 1.22.

Me Edit View feet Farmat® Table “Toals Help

/ 2 HOS b¢ EHeTT. 4B @
eet Seen fae Sabioh Grove Unt ee ee ee fod
Braly Text | |= ee: oe) a
vebeweinis | eiy «|B 1 U ER 26
+ Site Manager | Wéuntzies| | # |
View. | All fies : [ Thies = = |
eaees = @
Mamie [ss] « .
Registration Form
First Niene |
Middle Name,
‘Last Name |
(Gender © Riaig| © ¢ Female
Hobby F Singing |" Dancing i” Reading
F male
|
> DOM Euploger | = Design [ Split | f Source Honma
her y

Figure 1.22 : Form display after checkboxes are added

Creating HTML forms using KompoZer 17

Highlighted by Pragati Computers, M. 99041676771.

Highlighted by Pragati Computers, M. 99041676771.

e Next, we need to the "Address" field. As the user enters a large text in the
address field,
we will keep the field type as textarea. First, create a label named "Address".
Now, click
Form > Text Area. This will open a Text Area Properties dialog box as shown in
figure 1.23.

(MTéxt'Area Properties.

Settings

Field Name: address

Rows: 5

Columns: 70

Fewer Properties

Wrap Mode: | Default

Read Only
"| Bisabled
Tab index:
Actess Key

Initial Text:

Insert Address Here

Advanced Edit..

Cancel OK

Figure 1.23 : Text Area Properties dialog box

Enter the Field Name. Select the rows and the columns required for the textarea.
Here we have
kept the rows as 5 and columns as 70. In the Initial Text field enter a suitable
text which will
be displayed when the form loads. Click OK button.

e Next, we will insert the "City" field. Add a label for the city field. The user
will be asked to
select the city from the drop down menu. So we need to create the city field using
selection

list option. Click Form ~ Selection List. This will open a Selection List
Properties dialog
box as shown in figure 1.24.

‘gi Selection List Properties

Text [ value [ selected [es]

city
Ahmedabad Ahmadabad
Opti Add Option
2 Ahmedabad addicroup
Valve: | Ahmedabad pases
a Remove
initially Selected i
Disabied
Adwancoed Edit...
Cancel fe) 4

Figure 1.24: Selection List Properties dialog box

18 Computer Studies : 12

Highlighted by Pragati Computers, M. 99041676771.

Highlighted by Pragati Computers, M. 99041676771.

Type the name "city" in the List Name box and press Add Option button. Next, type
"Ahmedabad"
in the Text field. Again press Add option to add the city "Baroda". Likewise, add
the city "Rajkot"
and "Surat". Remember, to select the option "Initially Selected” when adding the
Rajkot city. Click
OK button. Figure 1.25 shows the Selection List Properties dialog for the added
cities.

|g [Selection Uist Properties

Text | value [ selected | |

city
Ahmedabad Ahmedabad
Bareda Baroda
Rajkot Rajkot v
Surat Surat
Option add Option
= als Add Group:
Value: | Surat cameo
initially Selected
«Move Up
Disabled ss
Acyvanced Edit..
Cancel Ox

Figure 1.25 : Selection List Properties dialog box for various cities

e Next, we will add the "Submit" button. Click Form > Form Field. From the drop
down menu
select Submit Button. Enter text Submit in Field Name and Field Value text box
respectively.
Click OK button.

e Similarly we will add the "Reset" button. From the drop down menu select Reset
Button. Enter
text Reset in Field Name and Field Value text box respectively. Click OK button.
The final

form in the normal will be as shown in figure 1.26.

sss me SS SSS,”

File: Edie Wiew Grsert Fetrmat Table Too - Help

- #-A@ a 4 dy me OT. A Oe &
8 tigen Fat teu ead 7 Pie RS vee Es
Baily treet w&z |= ei{ 8 0 [te em |e |== a
Mereblewidth jc||f #¢je |B } UlE & SB
= Site Manager MB [uetitled ia
View: Allies. i [ aries i
ot * a Registration Form
ame |]
First Name.
Middle Name
Last Name | —_
Gend: @ Male © Female
Hably © Singing ([~ Dancing [7 Reading
Addre:
City Paget
FI ,
fies
7 seat De | a es |
by

Figure 1.26 : Form displayed in normal view

Creating HTML forms using KompoZer 19

Highlighted by Pragati Computers, M. 99041676771.

Highlighted by Pragati Computers, M. 99041676771.

Save the file with name "example2". Figure 1.27 shows the preview mode of the form.

exaepled [fes/_/examplez.bimll - Kompoger

File Ede Miew Ingért arma Table Tools Help

“Hes uF at. Ae @

tim Upea Perle ieee dikrkes Link ineago Tata Frere

Body Text =) | Si) Yldte EP a) 2 Ss a

Variable widkh £ eg TA BITUEFkEaS

7 Sie Manager exaenplaz | a

Viere, Allies : c eine = |
E - - |

oo % * @ | Registration Form
Naren [=|

First Name =

Middle Name | ~

Lam Name

Gender © Male © Female

4
8 Hobhy F Singing (7 Dancing [ Reading
Ir
|

Address

City [Rajkot
‘Aircomoe |

Rese
| — ish |

* DOM Explorer | * wesign | Split [A Source Sreview

chimle <bodpe

Figure 1.27 : Form displayed in preview mode

Figure 1.28 Shows the registration form as seen in the browser.

hile, Whemde/tipti/kompozerfaxem pied Neral

Registration Form
First Name
Middle Name
Last Name
Gender © Male Female
Hobby ®@ Singing ~ Dancing ~ Reading
Insert address Here
Address
City Rafat

Submit, | gst

Figure 1.28 : Form displayed in Browser

Observe that the form background is white colored. If you want to give a background
color to
the form, go to Format > Page Colors and Background. This will open a dialog box as
shown
in figure 1.29.

20 Computer Studies : 12

Highlighted by Pragati Computers, M. 99041676771.

im Page Colors and Background ox

; Page Colors
Reader's default colors (Don't set colors in page)
@ Use custom colors: }

eho kara i il eee re eh

Normal text: = Normal text

_— ~ Normal te:

Link text: Fs] Pe

sae — | Link text

Activelinktext: | | ee .
| Visited link text: | ml Active tink text

Background: i, Visited link text

Background image:
=

Advanced Edit...

Cancel | OK

Figure 1.29 : Page Colors and Background dialog box

Select "Use custom colors" option. Click the background option and select the color
of your choice
from the Block Background Color dialog box as seen in figure 1.30. Click OK.
button. This will
lead you back to the dialog box shown in figure 1.29. Again click OK button.

im Block Background Color os |

Predefined colors:

i | 6
“Ee Ss ee
HE 8 ES
[nn 8 HG

STS i Lastpicked color

a

Hue: [0 4 Red: = 204 4 Hex: = #CCCCCC

Saturation: | 0 41 Green: 204 4 Name:

Brightness: 204 2} Blue: | 204 4 Transparent

Cancel OK

Highlighted by Pragati Computers, M. 99041676771.

Highlighted by Pragati Computers, M. 99041676771.

Figure 1.30 : Background color selection

After selecting the color the form will look as shown in figure 1.31.
Creating HTML forms using KompoZer 21
Highlighted by Pragati Computers, M. 99041676771.

enameled? (Abe: /.-. he

“omebe2 hemil - Kom poter

eile Eolk Waew insert Format Table Jools Help

“,. £.8A@ & 8 ef wh a ~~ 7. 4 qi
ew a Kabtth Sere Linge hertes ee et ie
Body Text = (= s||! a |e) ez als a a
varisble width 2 i #\er ei Bi U/E 4a &

7 Site Manager I) exarmpie? | #

Views | all Fibes e | { |
awa 2a | |

name [=] Registration Form

First Name |

Middle Name |

Last Name | —

Gender © Male © Female

Hobby Singing 1 Dancing f Reading

Address
“FFeonsale Cily | Roikor

Suemie | Reset |
" 1 -

} POM talons |) = Gecion [silt | source Prewes

shire <duuy> <form

Figure 1.31 : Form displayed in preview mode after adding background color

View the form using the browser and observe the change in the background coler.

SUMmMary

EXERCISE

Ls What is a Form ? List the elements used to create forms in HTML.

iad

State the use of Input element m HTML forms. Wnite about the different attributes
of

fA - &

input tag.

What is the purpose of textarea element in HTML forms ?

Write about select and option element.
List the various toolbars seen in the Kompozer interface.

Which are the two attributes of form? Explain.

Computer Studies : 12

Highlighted by Pragati Computers, M. 99041676771.

Highlighted by Pragati Computers, M. 99041676771.

7. Choose the most appropriate option from those given below :

()

(2)

(3)

(@)

(3)

(6)

(7)

(8)

(9)

Which of the following is a container used to collect different kinds of inputs

from

the user.

(a) Form (b) Webpage (c) Text (d) Input

Which of the following element is used to create an HTML form ?

(a) Textarea (b) Form (c) Select and Option (d) Input
Which of the following is the tag used to implement form element ?

(a) <form>... </form> (b) <form>... <form>

(c) </form>... </form> (d) <fmm>... </frm>

Which of the following attribute of form is used to specify where to send the form
data
when the form is submitted ?

(a) method (b)_action (©) submit (@)_ input

Which of the following attribute of form specifies the HTTP method to be used when
sending the data ?

(a) submit (b) action (c) method (qd) imput

Which of the following values are used by method attribute ?

(a) GET and POST (b) GET and SET

(c) GET and PUT (d) SET and POST

Which of the following method allows only a limited amount of information to be

sent
at a time?

(a) GET (b) POST (c) SET (d) PUT

Which of the following method sends the data as a block through the HTTP
transaction ?
(a) GET (b) SET (c) PUT (d) POST

Which of the following attribute of the input element specifies the field that is
to be created
in the form ?

(a) Input (b) Type () Name (d) Value

(10) Which of the following element allows multi-line text input ?

(a) Textarea (b) Input (c) Select and Option (d) Form

(11) Which of the following clement is used to create a drop down list or menu in a
form ?

(a) Input (b) Textarea (c) Select (4) Form

Creating HTML forms using KompoZer 23

Highlighted by Pragati Computers, M. 99041676771.

Highlighted by Pragati Computers, M. 99041676771.

(13) Which of the following is a free open source web development IDE ?

(a) HTML (b) Kompozer (c) Scite (d) Base

(14) Which of the following stands for "WYSIWYG" ?
(a) When You See Is When You Get (6) What You See Is When You Get
(c) What You See Is What You Get (d) When You See Is What You Get

LABORATORY EXERCISE

Create a form for student's personal details.

2. Create a feedback form for the guests who visit your school.
3. You had gone for a vacation with your parents; the tour operator has asked you
to give
reviews of your trip. Create a form for the same.
e
24 Computer Studies : 12

Highlighted by Pragati Computers, M. 99041676771.