Ch-1 Creating HTML forms using KompoZer

 Creating HTML forms using KompoZer

As Internet usage increases, numerous activities have shifted to the online realm. It has become common to fill in personal or product details using web pages. To assist website visitors in entering their data, HTML forms are utilized, providing a more interactive and controlled experience for the user. For example, when creating an email account or signing up for a website, one must input their personal details into a form. This information is then used to establish the user's account. To collect such information online, HTML forms are used. The application stores the data obtained, allowing for retrieval of user details registered on the website.

An HTML form is a collection of fields used to gather various types of user input. It typically includes elements such as labels, checkboxes, text input fields, radio buttons, submit buttons, reset buttons, and more. These elements not only enable data entry but also validate the data entered within the form. Prior to creating a basic form using HTML tags, let's first examine the various elements utilized in constructing HTML forms.

Form elements

Form elements are integral to building an HTML form, with the form element serving as a container for all the form's constituent elements. The <form>...</form> tag is utilized to implement this crucial element. For instance, consider the following example demonstrating the use of the form element:

The following code snippet shows the basic structure of an HTML form with input elements enclosed within the form tags:

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

.

input elements

.

</form>

The form element required two attributes, namely action and method. The action attribute specifies the destination where the form data should be submitted once the form is submitted. It takes a filename as a value, and when the user clicks on the submit button, the specified file opens and receives the form data.

The method attribute specifies the HTTP method to be used while transmitting the data. It can take two values: GET and POST. With the GET method, the data is appended to the end of the URL, which is then retrieved by the server. It allows only a limited amount of data to be sent at a time. In contrast, with the POST method, the data is transmitted as a block through the HTTP transaction, and the data is included in the request body. This method does not have any restrictions on the length of the data transmitted. The default value for the method attribute is GET.

Input element

Input elements play a crucial role in forms by allowing users to enter information through various fields such as radio buttons, text boxes, text area, select and option, label, and checkboxes. To create an input element, the <input> tag is used with attributes like type, name, and value. The type attribute determines the type of field to be created, while the name attribute specifies the field's name in the form. The value attribute sets the default value for the field. 

Element	Usage	Sample Code
Radio Button	Used when the user must choose one option from a group of options. For example, a radio button group might be used to ask the user to choose their gender or their preferred language.	<input type="radio" name="gender" value="male"> Male<br> <input type="radio" name="gender" value="female"> Female
Check Box	Used when the user can choose one or more options from a group of options. For example, a check box group might be used to ask the user to select their hobbies or their interests.	<input type="checkbox" name="interests" value="reading"> Reading<br> <input type="checkbox" name="interests" value="music"> Music
Text Input	Used when the user needs to enter a small amount of text (such as a name, email address, etc.). For longer texts, a text area element may be more appropriate.	<input type="text" id="username" name="username">
Submit Button	Used when the user has finished filling out a form and wants to submit it to the server for processing. Typically, the form action attribute specifies the URL of the script that will process the form data.	<input type="submit" value="Submit">
Reset Button	Used when the user wants to reset the form to its default values. Note that the reset button does not clear the form data on the server.	<input type="reset" value="Reset">
Password Input	Used when the user needs to enter a password. Typically, the password input element is used in combination with a label element that describes the purpose of the password field.	<input type="password" id="password" name="password">
List	Used when the user needs to select one or more options from a list of options. The list can be configured to allow single or multiple selections. For example, a list might be used to ask the user to select their country or their preferred payment method.	<select id="country" name="country"> <option value="usa">USA</option> <option value="canada">Canada</option> </select>

The Textarea element

The Textarea element is used for multi-line text input and is implemented using the <textarea>...</textarea> tags. It allows for the input of an unlimited number of characters and can be used for entering comments, reports, or long descriptions of products. The size of a Textarea element can be specified using the rows and cols attributes. The rows attribute determines the number of visible rows of text that do not require scrolling up or down, while the cols attribute specifies the number of visible columns of text that do not require scrolling right or left.

<label for="comments">Comments:</label>

<textarea id="comments" name="comments" rows="5" cols="30">

Enter your comments here...

</textarea>

This code will display a label "Comments:" next to the Textarea element. The Textarea element has an id of "comments" and a name of "comments" for form submission. The rows attribute is set to 5, which means that five rows of text will be visible without scrolling, and the cols attribute is set to 30, which means that thirty columns of text will be visible without scrolling. The default text "Enter your comments here..." will appear in the Textarea element, but it will disappear as soon as the user starts typing.

Select and Option element

The select element is utilized for generating a dropdown menu or list within a form, while the option element is used to specify the values that should be displayed within the menu. To create a dropdown menu, the <select>...</select> tag is used, while the <option>...</option> tag is used to create the individual items within the menu. An example of the application of the select and option elements is provided below:

<select id="fruits" name="fruits">

  <option value="apple">Apple</option>

  <option value="banana">Banana</option>

  <option value="orange">Orange</option>

  <option value="pear">Pear</option>

  <option value="strawberry">Strawberry</option>

</select>

Let us now create a sample registration form using the elements learned so far.

This form includes fields for the user's name, email, destination, rating, and comment. The name and email fields are required and must be filled out before the form can be submitted. The destination field is a dropdown menu, while the rating field is a set of radio buttons to allow the user to choose a rating from 1 to 5. The comment field is a textarea where the user can write additional feedback. The form includes a submit button to allow the user to submit their feedback.

<form>

  Name:<br>

  <input type="text" name="name" required><br>

  Email:<br>

  <input type="email" name="email" required><br>

  Destination:<br>

  <select name="destination">

    <option value="paris">Paris</option>

    <option value="newyork">New York</option>

    <option value="tokyo">Tokyo</option>

    <option value="sydney">Sydney</option>

  </select><br>

  Rating:<br>

  <input type="radio" name="rating" value="1">1

  <input type="radio" name="rating" value="2">2

  <input type="radio" name="rating" value="3">3

  <input type="radio" name="rating" value="4">4

  <input type="radio" name="rating" value="5">5<br>

  Comment:<br>

  <textarea name="comment"></textarea><br>

  <input type="submit" value="Submit">

</form>

As you can see, creating an HTML form using only tags can be a cumbersome task. However, there's a simpler way to create forms using an IDE (Integrated Development Environment). An IDE is a software application that offers a wide range of features to developers for software development, such as a Graphical User Interface, code editor, compiler/interpreter, and debugger. There are many open source IDEs available, including KompoZer, Eclipse, JBuilder, and Netbeans. Let's take a look at how to use KompoZer to create web pages.

introduction to KompoZer

KompoZer is a free and open source IDE used for web development. It can be easily downloaded from the website http://www.KompoZer.net. One of its key features is a web page editor with a user-friendly graphical interface, which is also known as WYSIWYG, "what you see is what you get". With KompoZer, users can create new web pages quickly and easily, or edit existing ones by directly modifying the source code. It also provides a Site Manager feature that allows users to easily manage web files on both local machines and remote servers. Uploading web pages and their associated files to a remote server can also be done directly within KompoZer. Additionally, KompoZer supports the use of "Styles" through Cascading Style Sheets (CSS),

Before we dive into creating forms with KompoZer, let's take a look at its interface. To open KompoZer, simply locate its icon and click on it. If the toolbars and status bar are not visible, you can display them by clicking on "View" and selecting "Show/hide". Check all the options listed, including Composition Toolbar, Format Toolbar1, Format Toolbar2, Edit Mode Toolbar, and Status bar. You should also check the options for Site Manager and Rulers. After selecting the toolbars, you will see a window displayed, as shown in Figure

At the top of the screen, there is a menu bar featuring various options such as File, Edit, View, Insert, Format, Table, Tools, and Help. Below the menu bar, there are three toolbars: Composition, Format Toolbar1, and Format Toolbar2.

The Composition toolbar enables users to perform actions like creating a new file, opening a file, saving a file, or publishing a web page. On the other hand, Format Toolbar1 and Format Toolbar2 are utilized for text formatting tasks like adding bullets, numbering, and other similar formatting operations.

The window's center displays two panels: SiteManager and a blank web page. SiteManager is a robust tool that aids in site navigation within or across sites. To close the SiteManager panel, users can click the close button or press F9. The page panel, on the other hand, displays a blank untitled web page.

At the window's bottom-right side, the Edit mode toolbar appears, offering three viewing modes: Normal, HTML Tags, and Preview. All three modes support editing functionalities.

In Preview mode, you can view the page as it would appear in a browser, but without running any scripts, so any corresponding effects won't be visible. Additionally, links will not function in this mode.

The Normal view closely resembles the Preview mode, but with the added feature of visible table outlines. The HTML Tags view is useful for those familiar with HTML, as it uses a yellow marker to indicate the start tag for each element. Clicking on the marker selects and highlights the entire element. The page pane on the left side of the window displays the Design, Split, and Source tabs. The Design tab is utilized for designing the web page, while the Split tab displays the HTML source of the current element. The Source tab shows all the details of the HTML code, aiding in editing the source code.

The status bar at the bottom of the window displays the structure of any clicked item on the page. Customizing toolbars is possible by right-clicking on the respective toolbar and selecting the "customize toolbar" option, allowing for personalization.

Create a New File

To initiate the creation of a new file, launch KompoZer and navigate to the menu bar. Click on File, and then select New from the drop-down menu. A dialog box titled "Create a new document or template" will appear, as shown in figure

 From the visible options in the dialog box, select "Blank document". At the bottom of the dialog box, there is a label "Create in". Next to it there is a drop-down menu where you can choose the "New Tab" option. This allows you to create the page in a new tab. Finally, click on the Create button to complete the process.

Open an existing File

To access an existing file in KompoZer, you can click on the icon present on the composition toolbar. Alternatively, you can navigate to File and select Open from the drop-down menu. If the file has been opened recently, you can also access it by selecting it from the "Recent Pages" list under the File menu.

To create a form in KompoZer, follow these steps:

1. Launch KompoZer and create a new file.
2. Navigate to the menu bar and select Insert ➔ Form ➔ Define Form. Alternatively, you can click on the Form icon in the composition toolbar. This will open a Form Properties dialog box, as shown in Figure

3. To access additional form properties, click on "More Properties."
4. In the Form Properties dialog box, enter a suitable name for the form. In the Action URL field, specify the file name to which the form data will be submitted. Choose the POST method from the Method drop-down menu, and then click on the OK button to save the changes. Figure displays the details that have been added to the Form Properties dialog box.

On the untitled page, a form with a light blue outline can be observed, as illustrated in figure  In normal view, the forms are encircled by a blue dotted box. All form components such as text boxes, radio buttons, check boxes, and drop-down boxes will be positioned inside this dotted outline  box. Pressing the Enter key multiple times creates some workspace within the form.

To begin, let's add a label to the name field. Follow these steps:

1. Go to the "Insert" menu.
2. Select "Form" and then choose "Define label."
3. Position your cursor within the form where you want the label to be displayed.
4. Enter the text "Name" into the label field, as depicted in figure
5. To exit the label field, click anywhere outside of the field.

In a similar fashion, we will now include a label for the "E-mail" field. Follow these steps to complete the process:

1. Place the label "E-mail" below the name label field.
2. Add an input text field for the E-mail, similar to the one used for the name field.
3. Within the Initial Value textbox, enter the text "abc@zyx.com" to provide an example E-mail address format.
4. This will assist the user in understanding the expected format for the E-mail address.

Continuing with the process, let's add a label for the "Mobile Number" field. Follow these steps:

5. Position the label "Mobile Number" below the Email label field.
6. Insert an input text field for the mobile number, similar to the one used for the name field.
7. In the Initial Value textbox, you can provide an example mobile number format such as "999-999-9999".
8. This example will help users understand the expected format for the mobile number.
9. Figure   illustrates the form with all three text fields added.

Lastly, we will include a submit button in the form. Please follow these steps:

1. Click on the "Insert" menu.
2. Choose "Form" and then select "Form Field." ( Insert 🡪 Form 🡪 Form Field using this we can insert all input field like text, password, checkbox, radio button, submit button, reset button, file, hidden, Image, and button in the form)
3. From the drop-down menu, select "Submit Button."
4. In the Field Name and Field Value text boxes, type "Submit" for both.
5. Click on the OK button to confirm the changes.
6. Refer to Figure  to see the appearance of the form properties dialog box for the submit button.

Currently, the form is in the normal view. To preview the form, follow these steps:

1. Locate the Edit mode toolbar.
2. Click on it to access the toolbar options.
3. Select the "Preview" option from the toolbar.
4. This will switch the form to the preview mode, allowing you to see how it will appear to users.
5. Refer to Figure  to see an illustration of the form in the preview mode.

By following the previously mentioned steps, we have successfully created our first form using KompoZer. This demonstrates how KompoZer simplifies the process of creating forms in a short amount of time, relieving you from the laborious task of manually writing source code, which can be time-consuming.

To further explore the details of the form, including the underlying source code, you can switch to the Source tab. Clicking on the Source tab will allow you to view the source code of the form you just created. Please refer to Figure for a visual representation of this feature.

To save the file we have created, follow these steps:

1. Go to the "File" menu.
2. Click on "Save". Alternatively, you can also use the save button in the composition toolbar.
3. This action will open a Page Title dialog box, as depicted in figure
4. In the dialog box, provide a suitable title for the web page.
5. For instance, let's give it the name "Ch1Practical1" as the title.
6. Finally, click on the OK button to save the file with the given title.

The page title will be visible in the title bar of the browser window when the web page is viewed. If you have created multiple web pages, it is advisable to use the name of the website as the title page. In our current example, since we have created a single web page containing a form, we named the title page as "Ch1Practical1".

After clicking the OK button in the Page Title dialog box, a new dialog box called "Save Page As" will appear. This dialog box prompts you to enter a filename for the web page and specify the desired location for saving the file. Please refer to Figure  for a visual representation of this dialog box.

To ensure proper file saving, remember to use the appropriate file extension such as .html or .htm. After making the necessary changes in the Page Title dialog box, click on the Save button. This action will return you to the main window of the application.

Important Note: If you are creating a website and this particular page serves as the home page that will be displayed when the website's URL is entered, it is recommended to save the page with the name "index.html".

Now that we have covered the basics of creating, opening, and saving files, as well as creating a simple form in KompoZer, let's proceed to recreate the registration form we previously built using HTML tags. Follow these steps:

1. Create a new file.
2. From the menu bar, select Insert ➔ Form ➔ Define Form.
3. In the Form Properties dialog box, input the required details as demonstrated in Figure

After pressing OK in the Form Properties dialog box, a form will be displayed with a light blue colored outline. Press the Enter key to create space within the form.

To provide a heading for the form, follow these steps:

1. From the Format Toolbar, select "Heading 1".
2. In the Format Toolbar2, choose the center align icon.
3. Enter the text "Activity Registration Form" as the heading.

To insert a label for the "Name" field, follow these steps:

1. Click on "Form" in the menu.
2. Select "Define Label".
3. In the "Field name" section, type "Name".
4. Next, to insert an input field for the label "Name", click on "Form" and then choose "Form Field".
5. In the Field Type menu of the Form Field Properties dialog box (shown in Figure), select "Text".
6. Note that we have used "name" as the field name.
7. Finally, press the OK button to confirm the settings.

Following the same process, let's insert the labels for "Middle Name" and "Family Name" in the form. This will result in a form that resembles the one depicted in Figure

1. Click on "Form" in the menu.
2. Select "Define Label" to insert a label for "Middle Name".
3. In the "Field name" section, type "Middle Name".
4. Repeat the same steps to insert a label for "Family Name".
5. After adding these fields, the form will resemble the one shown in Figure

To create radio buttons for the "Gender" field, follow these steps:

1. Enter the label "Gender" for the field.
2. Click on "Form" in the menu.
3. Select "Form Field" and choose "Radio Button" as the field type from the dropdown menu, as illustrated in Figure
4. In the "Group name" box, enter a name for the group (without spaces). For example, we can use "gender".
5. Similarly, in the "Field Value" text box, type "male" for the male option.
6. Click the OK button to confirm the settings.
7. Insert a label with the title "Male" near the radio button that was created.

To create the radio button for "Female" with the same group name:

1. Repeat the previous steps to create another radio button.
2. Enter the group name as "gender".
3. In the "Field Value" text box, type "female".
4. Click the OK button to confirm the settings.
5. Insert a label with the title "Female" near the radio button that was created.
6. If you want the female option to be selected by default when the form is loaded, check the box next to "Initially Selected".

After adding the radio buttons and their labels, the form will resemble the one shown in Figure

To add the "Activity" field with multiple selections using checkboxes, follow these steps:

1. Create a label for the "Activity" field.
2. Click on "Form" in the menu.
3. Select "Form Field" and choose "Check Box" as the field type from the dropdown menu, as shown in Figure

4. Enter a name for the field in the "Field Name" box.
5. Enter a value for the field in the "Field Value" box.
6. If you want the option to be initially selected (checked) when the form loads, check the box next to "Initially Selected".
7. Click the OK button to confirm the settings.

By following these steps, you will have created a checkbox for the "Activity" field with the desired options and initial selection.

To create checkboxes for the "Activity" field with their respective labels, follow these steps:

1. Insert a label "Singing" near the checkbox that was created previously.
2. Repeat the previous steps to create two more checkboxes.
3. For the first checkbox, set the Field Value as "dancing".
4. For the second checkbox, set the Field Value as "Skating".
5. Ensure that the Field Name remains the same for all the checkbox options.
6. Insert the labels "Dancing" and "Skating" near the checkboxes created.

After inserting the checkboxes and their labels, the form will resemble the one shown in Figure

To create the "Address" field as a large text input area, follow these steps:

1. Create a label named "Address" for the field.
2. Click on "Form" in the menu.
3. Select "Text Area" from the options. This will open the TextArea Properties dialog box, as shown in Figure

To set up the "Address" field with a textarea input, follow these steps:

1. Enter the desired "Field Name" for the textarea.
2. Specify the number of rows and columns required for the textarea. In this case, we have set the rows as 5 and columns as 60.
3. In the "Initial Text" field, enter a suitable text that will be displayed when the form loads.
4. Click the OK button to confirm the settings.

Next, to insert the "City" field using a drop-down menu, follow these steps:

1. Add a label for the "City" field.
2. Click on "Form" in the menu.
3. Select "Selection List" to create the city field.
4. This action will open the Selection List Properties dialog box, as shown in Figure

To create the "City" field using a selection list (drop-down menu), follow these steps:

1. In the "List Name" box, enter the name "city".
2. Press the "Add Option" button.
3. In the "Text" field, type "Gandhinagar".
4. Press the "Add Option" button again to add the city "Ahmedabad".
5. Repeat the process to add the cities "Rajkot" and "Surat".
6. For the city "Ahmedabad", make sure to select the option "Initially Selected" to have it pre-selected when the form loads.
7. Click the OK button to confirm the settings.

visual representation of the Selection List Properties dialog box, as shown in Figure

To add the "Submit" button, follow these steps:

1. Click on "Form" in the menu.
2. Select "Form Field" and choose "Submit Button" from the dropdown menu.
3. Enter "Submit" in both the "Field Name" and "Field Value" text boxes.
4. Click the OK button to confirm the settings.

Similarly, to add the "Reset" button, follow these steps:

1. Click on "Form" in the menu.
2. Select "Form Field" and choose "Reset Button" from the dropdown menu.
3. Enter "Reset" in both the "Field Name" and "Field Value" text boxes.
4. Click the OK button to confirm the settings.

After adding both buttons, the final form in the normal view will appear as shown in Figure

Save the file with the name "Ch1Example2.html" to complete the process. In Figure , you can see the preview mode of the form, which allows you to visualize how it will appear to users.

In Figure 1.28, you can observe the registration form as it appears in the browser. This visual representation showcases how the form will be displayed to users when they interact with it on a webpage.

If you wish to give a background color to the form, follow these steps:

1. Go to "Format" in the menu.
2. Select "Page Colors and Background" from the options. This action will open a dialog box, as shown in Figure.

To select a custom background color for the form, follow these steps:

1. In the "Page Colors and Background" dialog box (Figure 1.29), select the "Use custom colors" option.
2. Click on the "Background" option to choose the color for the form's background.
3. This will open the "Block Background Color" dialog box (Figure 1.30), where you can select the desired color.

4. Once you have chosen the color, click the OK button to confirm your selection.
5. You will be returned to the "Page Colors and Background" dialog box (Figure 1.29).
6. Click the OK button again to apply the selected background color to the form.

Please note that visual references, such as Figure 1.30, may not be available in text-based format. I recommend referring to your source material for a visual representation of the dialog boxes and their options.

After selecting the desired background color, the form will be displayed with the chosen color, as shown in Figure 1.31.

This visual representation demonstrates how the form's appearance changes when the background color is applied.

Open the form using a browser to observe the change in the background color. You will notice that the form now displays the selected background color, providing a visual distinction and enhancing the overall appearance of the form.

Forms are essential elements used to gather data from users on the web. In HTML, a form acts as a container that collects various types of user inputs. These inputs can range from personal information, feedback about a product or service, survey responses, or even shipping and credit card details. KompoZer is a freely available open source web development Integrated Development Environment (IDE) that enables users to create websites. It offers a user-friendly web page editor with a graphical interface known as WYSIWYG ("what you see is what you get"), making the process of creating forms using KompoZer both straightforward and efficient.