Computer Class 12 GSEB Solutions Chapter 1 Creating HTML Forms Using KompoZer

Students frequently turn to Computer Class 12 GSEB Solutions and GSEB Computer Textbook Solutions Class 12 Chapter 1 Creating HTML Forms Using KompoZer for practice and self-assessment.

GSEB Computer Textbook Solutions Class 12 Chapter 1 Creating HTML Forms Using KompoZer

Question 1.
What is a Form ? List the elements used to create forms in HTML.
Answer:
Forms are used to accept the data over the web. A form in HTML is a container used to collect different kind of inputs from the user. HTML Forms contains elements like label, checkbox, text input field, radio button, submit button, reset button and many more.

• The form element is used to create an HTML form.
• Form element acts as a container for all the elements used in the form.
• The tag <form>…</form> is used to implement various form elements.
• The example shows the use of the form element: <form action=”anusha.html” method=”post”>
  …………….
  …………….
• Input elements
  …………….
  …………….
  </form>
• In the above example the form element uses two attributes. They are

[1] action :

• The action attribute is used to specify where to send the form data when the form is submitted.
• Action attribute of <form > tag is used to control the processes executing after 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.

[2] method :

• The method attribute specifies the HTTP (Hyper Text Transfer Protocol) method to be used when sending the data.
• Method attribute decides how to submit the information of the form at the specified place.
• The method attribute can take two values :
  (A) GET (B) POST
• The default value for method attribute is GET.

[A] GET method :

• The GET method retrieves the data from the form and sends it to the server by attaching it at the end of the URL.
• The GET method allows only a limited amount of information to be sent at a time.

[B] POST method :

• 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.
• The POST method does not have any restrictions of data length.
• The input elements are used to insert various fields in the form.
• Example of input elements are as follows :
  1. Textbox
  2. Password
  3. Radio button
  4. Checkbox
  5. Submit button
  6. Reset button
  7. Drop down menu
• The tag <input>…</input> or cinput > is used to implement input element.
• The input tag has different attributes like type, t. 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.

Following are the various input elements created using type attribute of <input> tag :

(1) Textbox:

• Textbox is used in the form to enter text.
• Textbox is used to enter data like user name, user e-mail id.
• Textbox is created by giving text value to type attribute of input tag.
• A user can enter any data of his choice in the text field,
• Example :
  <input type=”text” name=”var” value=”txt”>

(2) Password:

• Password field is used to enter password,
• Password field is similar to text field.
• Characters typed in password field are not displayed to the user.
• The characters typed in the password field are converted into non readable format.
• Text typed in the password field appears in the form of dots, asterick or square symbol.
• The advantage of hidding real text being typed in password field is that – when user enters password no one is able to read password entered by him.
• Example :
  <input type=”password” name=”var”>

(3) Radio button :

• Radio button is used to select only one item from the given group of items in the form.
• To create radio button provide radio value to the type attribute.
• Any one radio button can be selected at a time from a group of radio buttons.
• Selecting more than one radio button is not possible.
• Radio button appears in the form of small circle.
• On selecting a radio button, a black colored dot appears in the circle.
• When user selects one radio button from a group then other radio buttons cannot be selected.
• Generally radio button is used to select a single item from a given group of items.
• Specific radio button can appear as selected by default by using checked attribute. Checked attribute is optional.
• Example :
  <input type=”radio” name=”var” value=”txt”>

(4) Checkbox :

• Checkbox is used to select one or more item from the given group of items in the form.
• To create checkbox provide checkbox value to the type attribute.
• It is possible to select more than one check boxex at a time from a group of checkbox.
• Checkbox appears in the form of small square.
• On selecting a checkbox, a tick mark appears in the square.
• Generally checkbox is used to select a multiple items from a given group of items.
• Specific checkbox can appear as selected by default by using checked attribute. Checked attribute is optional.
• Example :
  <input type=”checkbox” name=”var” value=”txt”>

(5) Submit button :

• Submit button is used to send the values of data entered in the form.
• User can click submit button to send the values of data to the server.
• On clicking the submit button, the values of data entered in the form is submitted to the file specified in the action attribute of the form element,
• Example :
  <input type=” submit” value=”label”>

(6) Reset button:

• Reset button is used by user to replace the data values entered in the form by its default values or by blank spaces.
• Reset button is used by user to display default values in the form.
• On clicking the reset button, the values of data entered in the form are cleared and set back to default values.
• Example :
  <input type=”Reset” value=”label”>

Type	Description	Example
Radio	Creates radio buttons in the form. Any one radio button can be selected at a time from a group of radio buttons. Generally used to select a single item from a given group of items.	<INPUT TYPE = “radio” NAME = “var” VALUE = “txt”>
Checkbox	Creates checkboxes in the form. Multiple checkboxes can be selected at a time. Generally used to select a multiple items from a given group of items.	<INPUT TYPE=“checkbox” NAME = “var” VALUE = “txt”>
Text	Creates a text field to enter text in the form. A user can enter any data of his choice in the text field.	<INPUT TYPE=“text” NAME = “var” VALUE = “txt”>
Password	Creates a password field in the form. Similar to the text field but the characters are not displayed to the user. Instead the character typed is converted into non readable format.	<INPUT TYPE=“password” NAME = “var”>
Submit	Creates a submit button in the form. On clicking the submit button, the values of data entered in the form is submitted to the file specified in the action attribute of the form element.	<INPUT TYPE=“submit” VALUE = “label”>
Reset	Creates a reset button in the form. On clicking the reset button, the values of data entered in the form are cleared and set back to default values.	<INPUT TYPE = “reset” VALUE = “label’s

Question 2.
State the use of Input element in HTML forms. Write about the different attributes of Input tag.
Answer:

• The input elements are used to insert various fields in the form.
• Example of input elements are as follows :
  1. Textbox
  2. Password
  3. Radio button
  4. Checkbox
  5. Submit button
  6. Reset button
  7. Drop down menu
• The tag <input>…</input> or cinput > is used to implement input element.
• The input tag has different attributes like type, t. 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.

Following are the various input elements created using type attribute of <input> tag :

(1) Textbox:

• Textbox is used in the form to enter text.
• Textbox is used to enter data like user name, user e-mail id.
• Textbox is created by giving text value to type attribute of input tag.
• A user can enter any data of his choice in the text field,
• Example :
  <input type=”text” name=”var” value=”txt”>

(2) Password:

• Password field is used to enter password,
• Password field is similar to text field.
• Characters typed in password field are not displayed to the user.
• The characters typed in the password field are converted into non readable format.
• Text typed in the password field appears in the form of dots, asterick or square symbol.
• The advantage of hidding real text being typed in password field is that – when user enters password no one is able to read password entered by him.
• Example:
  <input type=”password” name=”var”>

(3) Radio button :

• Radio button is used to select only one item from the given group of items in the form.
• To create radio button provide radio value to the type attribute.
• Any one radio button can be selected at a time from a group of radio buttons.
• Selecting more than one radio button is not possible.
• Radio button appears in the form of small circle.
• On selecting a radio button, a black colored dot appears in the circle.
• When user selects one radio button from a group then other radio buttons cannot be selected.
• Generally radio button is used to select a single item from a given group of items.
• Specific radio button can appear as selected by default by using checked attribute. Checked attribute is optional,
• Example :
  <input type=”radio” name=”var” value=”txt”>

(4) Checkbox :

• Checkbox is used to select one or more item from the given group of items in the form.
• To create checkbox provide checkbox value to the type attribute.
• It is possible to select more than one check boxex at a time from a group of checkbox.
• Checkbox appears in the form of small square.
• On selecting a checkbox, a tick mark appears in the square.
• Generally checkbox is used to select a multiple items from a given group of items.
• Specific checkbox can appear as selected by default by using checked attribute. Checked attribute is optional,
• Example :
  <input type=”checkbox” name=”var” value=”txt”>

(5) Submit button :

• Submit button is used to send the values of data entered in the form.
• User can click submit button to send the values of data to the server.
• On clicking the submit button, the values of data entered in the form is submitted to the file specified in the action attribute of the form element,
• Example :
  <input type=” submit” value=”label”>

(6) Reset button:
Reset button is used by user to replace the data values entered in the form by its default values or by blank spaces.

• Reset button is used by user to display default values in the form.
• On clicking the reset button, the values of data entered in the form are cleared and set back to default values.
• Example :
  <input type=”Reset” value=”label”>

Type	Description	Example
Radio	Creates radio buttons in the form. Any one radio button can be selected at a time from a group of radio buttons. Generally used to select a single item from a given group of items.	<INPUT TYPE = “radio” NAME = “var” VALUE = “txt”>
Checkbox	Creates checkboxes in the form. Multiple checkboxes can be selected at a time. Generally used to select a multiple items from a given group of items.	<INPUT TYPE=“checkbox” NAME = “var” VALUE = “txt”>
Text	Creates a text field to enter text in the form. A user can enter any data of his choice in the text field.	<INPUT TYPE=“text” NAME = “var” VALUE = “txt”>
Password	Creates a password field in the form. Similar to the text field but the characters are not displayed to the user. Instead the character typed is converted into non readable format.	<INPUT TYPE=“password” NAME = “var”>
Submit	Creates a submit button in the form. On clicking the submit button, the values of data entered in the form is submitted to the file specified in the action attribute of the form element.	<INPUT TYPE=“submit” VALUE = “label”>
Reset	Creates a reset button in the form. On clicking the reset button, the values of data entered in the form are cleared and set back to default values.	<INPUT TYPE = “reset” VALUE = “label’s

Question 3.
What is the purpose of textarea element in HTML forms ?
Answer:

• The textarea element allows multi-line text input.
• The tag <textarea>…</textarea> is used to implement textarea 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 row 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 cols attribute is used to set the number of columns of text that will be visible without scrolling right or left.

Practical 1 : Inserting textarea element in form
The following is the example of inserting a textarea element in the form.

<html>
<head>
<meta content = "text/html; charset=IS0-3359-l"
http-equiv=" content-type ">
<title></title>
</head>
<body>
<form method="post" action="comment.html"> Input your comment: <br>
<textarea name= "comments" rows="5" cols="20"> .........Your comments here.... </textarea>
</form>
<br>
<br>
</body>
</html>

• As shown in the figure the textarea element will appear in the web browser.

 

Question 4.
Write about select and option element.
Answer:

• The select element is used to create a drop down list or menu in a form.
• Drop down menu is used when it is not necessary to display all options on the screen .
• The tag <select>….</select> is used to create a drop down menu.
• The option element is used to specify the values that are to be displayed in the menu.
• The tag <option>….</option> is used to create the elements within the menu.
• Specific option from the dropdown menu can appear as selected by default by using selected attribute. Selected attribute is optional.

Practical 2 : Inserting a drop down menu in the form
The following is the example of creating drop down menu in the form using <select> and <option>tags.

<html>
<head>
<meta content = "text/html; charset=IS0-8859-1"
http-equiv="content-type">
<title><title>
</head>
<body>
<br>
<form method="post" action="comment.html">
<select>
<option value="Ahmedabad">Ahmedabad</option>
<option value=" Baroda" >Baroda</option>
<option value="Surat">Surat</option>
<option value=" Rajkot" >Rajkot</option>
</select>
</form>
</body>
</html>

Figure : Code to create drop down menu in the form using select and option element
As shown in the figure 1.4 the drop down menu will appear in the web browser.

Practical 3 : Creating sample registration form using various elements
Registration form can be created using various elements as shown in the Figure

<html>
<head>
<title>Registration Form</title>
</head>
<body bgcolor="aqua">
<h1> <center>Registration Form </center></h1>
<form name="frmregistration" action="form.html" >
<center>
<table border="0">
<tr>
<td width="20%">First Name</td>
<td width="5%">&nbsp;</td>
<td><input type="textbox" name="txtFirstName"></td>
</tr>
<tr>
<td>Middle Name</td>
<td>&nbsp;</td>
<td><input type="textbox" name="txtMiddleName"></td>
</tr>
<tr>
<td>Last Name</td>
<td>&nbsp;</td>
<td><input type="textbox" name="txtLirstName"></td>
</tr>
<tr>
<td>Gender</td>
<td>&nbsp;</td>
<td>
<input type="radio" name="Gender" value="male" checked>Male
<input type ="radio" name="Gender" value="female">Female
</td>
</tr>
<td>Hobby</td>
<td>&nbsp;</td>
<td>
<input type="checkbox" name="chkSinging" value="sing" checked>Singing
<input type="checkbox" name="chkDancing" value="Dance" checked>Dancing
<input type="checkbox" name="chkreading" value="Read" checked>Reading </td>
</td>
<tr>
<tr>
<td>Address</td>
<td>&nbsp;</td>
<td>
<textarea name="txtAdd" rows="5" cols="70">Insert Address</textarea>
</td>
</tr>
<tr>
<td>City</td>
<td>&nbsp;</td>
<td>
<select>
<option selected> Ahmedabad</option>
<option>Baroda</option>
<option>Rajkot</option>
<option>Surat</option>
</select>
</td>
</tr>
<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>

The following is the registration form as displayed in the web browser.

Question 5.
List the various toolbars seen in the KompoZer interface.
Answer:

• To open KompoZer, double click KompoZer icon located on Linux desktop.
  OR
• Select Applications → Programming → KompoZer to open KompoZer.

 

• To view the different toolbars and status bar (if not visible) click on View → Show/Hide.
• Select all the options listed : Composition Toolbar, Format Toolbar 1, Format Toolbar2, Edit Mode Toolbar, Status bar, Sidebar (Site Manager) and Rulers in the Show/Hide option of View menu.

 

• Following figure shows the interface of KompoZer.

 

• As shown in the figure, KompoZer has eight menus. They are File, Edit, View, Insert, Format, Table, Tools and Help.
• Menu bar has three Toolbars :
  1. Composition Toolbar
  2. Format Toolbar-1
  3. Format Toolbar-2
• The composition toolbar is used for the following:
  1. Create new file
  2. Open a file
  3. Save a file
  4. Publish a website.
• The Format toolbar-1 and Format toolbar-2 are used for the following :
  1. Format the text
  2. Add bullets / numbering
  3. Perform similar formatting operations
• There are two panes in the centre of the KompoZer window :

(1) Site Manager :

• Site manager is a powerful tool used to navigate within the site or between the sites.
• To close the site manager pane, click on close button or press F9.

(2) Blank webpage (Page Pane) :

• The page pane shows a blank untitled webpage.
• The bottom right side of the window shows Edit mode toolbar with three viewing modes.
• The three modes of Edit mode are : Normal, HTML Tags and Preview.
• All the three viewing modes provide editing facilities.

Modes of Edit mode and their uses :

(1) Normal View:

• In normal mode, webpage along with its table outlines is visible.
• The Normal view is very similar to preview mode.

(2) HTML Tags View :

• 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.

(3) Preview Mode :

• The preview mode offers the page view as seen in a browser.
• 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 left side of the page pane shows three tabs :

1. Design Tab : The Design tab is used to design the webpage.
2. Split Tab : The Split tab displays the HTML source of the current element.
3. Source Tab : The Source tab shows all details of the HTML code, which helps in editing the source code.

• There is status on the bottom of the window.
• When any item in page is clicked, its structure appears in the status bar.
• To customize any toolbar, right click on the respective toolbar and click on customize toolbar option. There after customize the toolbar as per requirement.

Question 6.
Which are the two attributes of form ? Explain.
Answer:

• The form element is used to create an HTML form.
• Form element acts as a container for all the elements used in the form.
• The tag <form>…</form> is used to implement various form elements.

The example shows the use of the form element:
<form action=”anusha.html” method=”post”>
…………….
…………….
Input elements
…………….
…………….
</form>

In the above example the form element uses two attributes. They are

[1] action:

• The action attribute is used to specify where to send the form data when the form is submitted.
• Action attribute of <form > tag is used to control the processes executing after 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.

[2] method :

• The method attribute specifies the HTTP (Hyper Text Transfer Protocol) method to be used when sending the data.
• Method attribute decides how to submit the information of the form at the specified place.
• The method attribute can take two values :
  (A) GET
  (B) POST
• The default value for method attribute is GET.

[A] GET method :

• The GET method retrieves the data from the form and sends it to the server by attaching it at the end of the URL.
• The GET method allows only a limited amount of information to be sent at a time.

[B] POST method :

• 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.
• The POST method does not have any restrictions of data length.

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

1) 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
Answer:
(A) Form

2) Which of the following element is used to create an HTML form ?
(A) Textarea
(B) Form
(C) Select and Option
(D) Input
Answer:
(B) Form

3) Which of the following is the tag used to implement form element ?
(A) <form>…</form>
(B) <form>… <form>
(C) </form>…</form>
(D)<frm>… </frm>
Answer:
(A) <form>…</form>

4) 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
(C) submit
(D) input
Answer:
(B) action

5) Which of the following attribute of form specifies the HTTP method to be used when sending the data ?
(A) submit
(B) action
(C) method
(D) input
Answer:
(C) method

6) 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
Answer:
(A) GET and POST

7) 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
Answer:
(A) GET

8) Which of the following method sends the data as a block through the HTTP transaction ?
(A) GET
(B) SET
(C) PUT
(D) POST
Answer:
(D) POST

9) Which of the following attribute of the input element specifies the field that is to be created in the form ?
(A) Input
(B) Type
(C) Name
(D) Value
Answer:
(B) Type

10) Which of the following element allows multi-line text input ?
(A) Textarea
(B) Input
(C) Select and Option
(D) Form
Answer:
(A) Textarea

11) Which of the following element is used to create a drop down list or menu in a form ?
(A) Input
(B) Textarea
(C) Select
(D) Form
Answer:
(C) Select

12) Which of the following is a free open source web development IDE ?
(A) HTML
(B) KompoZer
(C) SciTE
(D) Base
Answer:
(B) KompoZer

13) Which of the following stands for “WYSIWYG” ?
(A) When You See Is When You Get
(B) What You See Is When You Get
(C) What You See Is What You Get
(D) When You See Is What You Get
Answer:
(C) What You See Is What You Get

Computer Class 12 GSEB Notes Chapter 1 Creating HTML Forms Using KompoZer

Introduction to Form

• With increase in the use of Internet many activities have become online.
• Web page is used to display various information.
• HTML forms are used to help the visitors of the website to input data.
• Well organized structure designed to input the required data and information of website is called form.
• The method of adding information in the form of the webpage and printed form is same.
• Form allows more interactivity and control in data entry.
• Example :
  1. When a user wants to open a e-mail account on a website, user has to first enter his personal details in the form.
  2. In order to obtain such information on Internet, HTML forms are used.
  3. This data is further stored by the application,
  4. This data is also used to retrieve the details about users registered on the website.
• Form in HTML is a container.
• Form is used to collect different kinds of inputs from the user.
• HTML form contains the following elements :
  1. Label
  2. Checkbox
  3. Text input field
  4. Radio button
  5. Submit button
  6. Reset button and many more.
• A contained named form is used to collect different type of information from the user.
• Form elements are used to enter the data as well as validate the data within the forms.
• Form can be designed easily using HTML (Hyper Text Markup Language) tags.
• Following Four elements are used in a form :
  1. Form
  2. Input
  3. Textarea
  4. Select and Option

Use of IDE to create a form

• 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
• IDE provides 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.

Introduction to KompoZer

• KompoZer is a free open source web development IDE.
• It can be downloaded from http://www. KompoZer.net.

• It provides a webpage editor which has a simple graphical interface known as WYSIWYG “What You See Is What You Get”.
• What you see the same you get as the result of WYSIWYG.
• It is a complete web authoring system which integrates webpage development and web file management.
• Creating new webpages using KompoZer is quick and easy.
• The users can also edit the webpages 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).

Creating New File
In KompoZer, follow the steps to create a new file :

1. • Open KompoZer.
   • In the menu bar click File → New.
   • A dialog box as shown in figure appears with title “Create a new document or template”.
   • Select “Blank document” option from the options that are given 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 create in “Label” at the bottom of the dialog box. This allows us to create the page in a new tab.
   • Click on the Create button.

Opening an Existing File

• Open KompoZer.
• In the menu bar click File → Open.
  OR
• To open an existing file, click on icon present on the composition toolbar.
• If the file has been opened recently, then you can also open the file from File → Recent Pages.

Practical 4 : Creating a form using KompoZer

• Method 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 :
  1. Open KompoZer and Create a new file.
  2. From the menu bar, select Insert → Form → Define Form.
     OR
  3. Click button located on the composition
  4. This will open a Form Properties dialog box as shown in figure.
  5. Clicking on More Properties shows added options for the form.

• Enter appropriate name for the form in the Form Properties dialog box.
• 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.

• Form is inserted with light blue colored outline in the untitled page as shown in figure. In normal view, the forms are shown surrounded by a dotted blue box. All the form elements like text box, radio button, checkbox 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.

Method to insert Label :

• To insert a label for the name field click on Insert → Lorm → Define Label.
• Place the cursor in the form where you want your label to appear.
• Type the text “Name” in the label.
• To come out of the label field, click outside the field.

Method to Insert Text Field :

• To insert an input text field in the form, click Insert Form -> Form Field.
• Figure shows the form field properties dialog box.

• In the form field properties dialog box, the Field type drop down menu shows various input field type options like Text, Password, Check Box, Radio button, Submit button, Reset button, File, Hidden, Image and Button as shown in the figure.

• Click on More properties, it shows advanced properties related to the field like field size, maximum length.
• 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.
• Required Field Size and Maximum Length can be given in Fewer Properties section.

• After OK button is clicked text input field is displayed as shown in Figure.

• Now add another label “E-mail” below the name ‘ label field. To Add a label for E-mail select options in Insert → Form → Define Label. To add text an input text field for E-mail select options in Insert → Form → Form Field. Enter text abc@xyz.com in the Initial Value textbox. This will help the user to understand the format of E-mail address. Figure shows the form with both the text field added.

Method to insert Submit button :

• Finally to 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 as shown in figure.

• Figure shows submit button in the form.

• 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 shows the form in the preview mode.

• Thus, we have created forms within a short span and are relieved from the tedious job of writing the source code which takes a long time. The source code can be seen by clicking on the Source tab.

• To save the file which has been created select File -4 Save option.
  OR
• Click on the save button in the composition toolbar.
• This opens a Page Title dialog box shown in figure.
• Give a suitable title to the webpage here and click on OK button.

• The page title will be displayed in the browser windows title bar when viewed in the browser. In case we have created multiple webpages, we should give the name of the website as the title page. In this example, since we created a single webpage with a form.
• 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.

• Save the file with .html or .htm as an extension. Click on Save button. This will take us back to the main ‘ window.
• Form is displayed as shown in figure.

• 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.

Practical 5 : Designing Registration form using KompoZer

• Follow the steps given to create the registration form.
  1. Create a new file.
  2. From the menu bar, select Insert → Form → Define Form.
  3. In the Form Properties dialog box enter the details as shown in figure.

• After entering the details in Form Properties dialog box press OK. A form will be displayed showing the light blue colored outline. Press the Enter key to create space in the form.

Method to insert Heading in form :

• To give the heading to the form, select Heading 1 from Format Toolbar 1. Here six types of Headings available from Heading 1 to Heading 6.
• In Format Toolbar 2, select center align icon. Here four type of alignments are available, they are Align Left, Align Center, Align Right and Align Justified.
• Enter the text “Registration Form” as shown in figure.

• Method to insert label: To insert the label, click Insert → Form →Define Label. Type “First Name” in the Field name.

Method to insert Input field :

• To insert input field for the label “First name”, click Insert → Form → Form Field. This generates Form Field Properties dialog box as shown in figure.
• Type “first name” in the field name text box.

• Press OK button. The figure display label First name and its textbox.

• 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 tigure.

Method to Insert Radio button :

• Now create radio buttons for the Gender field.
• First, create a label named “Gender”.
• For creating a radio button, click Insert → Form → Form Field. This displays Form Field properties.
• Radio button is used to select a single item from a given group of items.
• Select field type as Radio Button.
• As shown in figure type gender in the Group name box and male in the Field Value textbox. To make the male option of the radio button selected when the form is loaded then, check the box in front of the text “Initially Selected”.

• Enter the required details in the Form field properties and click OK button.
• Thus radio button will be displayed in the form. Insert a label with title “Male” near the radio button is created.
• Similarly 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” for male and female radio button. In the Field Value text box type “female”. Click OK button.
• The form after inserting the radio buttons and their

Method to insert Check box :

• User will be able to specify more than one hobby in the hobby field.
• As a person can have more than one hobby, hence multiple selections of hobbies are possible.
• Generally checkbox is used to select a multiple items from a given group of items.
• Create a label for hobby.
• Now click Insert → Form → Form Field option.
• This displays Form Field Properties dialog box as shown in figure.
• Type Hobby in Field name textbox and type Singing in Field value textbox.
• Check the box in front of “Initially Selected” so as to keep the option checked when the form loads.

• Select appropriate option in the Form Field Properties dialog box and click OK button.
• This displays checkbox. Now Insert a label “Singing” near the checkbox is created.
• Similarly create two checkboxes with Field Values as “dancing” and “reading” respectively.
• Remember to keep the Field Name same for all the options of checkbox.
• The form after inserting checkboxes and their labels will look as shown in figure.

Method to insert textarea :

• Create address field in the form to insert address.
• User enters a large text in the address field.
• To enter one or more than one line textarea field is used.
• First, create a label named “Address”.
• Now, to insert textarea field click Insert → Form → Textarea.
• This will open a Textarea Properties dialog box as shown in figure.
• Type address in Field Name textbox and type 5 in Rows and 70 in Columns textbox.
• In the Initial Text field enter a suitable text which will be displayed when the form loads.

• Enter appropriate options in Textarea Properties dialog box and click OK button.
• This displays Address textarea box in figure.

Method to insert drop down :

• User will be able to enter city in city field.
• The user will be asked to select the city from the drop down menu.
• Drop down menu is used when it is not necessary to display all options at a time on the screen.
• We will have to make list of cities which would appear in drop down menu from which the user will select the city.
• Add a label named city.
• To create drop down menu select Insert Form → Selection List option.
• This will open a Selection List Properties dialog box as shown in figure.
• Type the name “city” in the List Name box.
• Press Add Option button and type “Ahmedabad” in the Text field.
• Again press Add option to add the city “Baroda”. Likewise, add the city “Rajkot” and “Surat”.
• Select the option “Initially Selected” when adding the Ahmedabad city so that by default city appears to be Ahmedabad.

• Select appropriate options in Selection List Properties dialog box and click OK button.
• Figure shows the Selection List Properties dialog box for the added cities.

Method to insert Submit button :

• To add the “Submit” button select Insert → Form → Form Field.
• This will open Form Field Properties dialog box.
• From the Field Type drop down menu select Submit button.
• Enter text Submit in Field Name and also type Submit in Field Value textbox.

• Select appropriate options in Form Field Properties dialog box and click OK button.
• Figure shows the submit button in the form.

Method to insert Reset button :

• To add the “Reset” button select Insert → Form → Form Field.
• This will open Form Field Properties dialog box.
• From the Field Type drop down menu select Reset Button.
• Enter text Reset in Field Name and also type Reset in Field Value textbox.

• Select appropriate options in Form Field Properties dialog box and click OK button.
• Figure shows the submit button in the form.

• Now save the file with appropriate name.
• Figure shows the preview mode of the form.

• Open html file of registration form in the web ^browser which is shown in the figure.

• The background of form is white. If you want to give a background color to the form, go to Format → Page Colors and Background.
• This will open a Page Colors and Background dialog box as shown in figure.
• Select “Use custom colors” option.

• Click the background option and this will display Block Background Color dialog box. From it select the color of your choice and click on OK button. Thus color selected will be displayed in Background option of Page Colors and Background dialog box.

• After selecting the color the form will look as shown in figure.

• View the form using the browser and observe the change in the background color