Chapter 1 Creating HTML Forms Using KompoZer (Marks 10)

Introduction to Form
 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.
 The tag <form>…</form> is used to implement various form elements.
 The form element uses two attributes. Action & Method.
 <form action=”[Link]” method=”post”>
 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 an 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 also used to retrieve the details about users registered on the website.
 Following Four elements are used in a form:
1. Form 2. Input 3. Textarea 4. Select and Option
 FORM:
[1] Action: (Submit)
 The action attribute is used to specify where to send the form data when the form is submitted.
 It takes a filename as value.
[2] Method: (HTTP)
 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
[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.
 The default value for method attribute is GET.
[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 (Unlimited).
=> input elements are used to insert various fields in the form.
(1) Textbox (2) Password (3) Radio button (4) Checkbox
(5) Submit button (6) Reset button
 The tag <input>…</input> or <input > is used to implement input 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.
=> 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, (A to Z, 0 to 9, Symbol)
 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.
 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.
 Radio button appears in the form of small circle.
 On selecting a radio button, a black colored dot appears in the circle.
 All group names are Same.
 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 Selected attribute.
 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.
 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 multiples items, from a given group of items.
 Specific checkbox can appear as selected by default by using checked attribute.
 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.
 Example: <input type=”Reset” value=”label”>
 Textarea:
 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. More than 255 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.
 Select and Option:
 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
 Selected by default by using selected attribute. Selected attribute is optional.
 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 [Link] [Link].
 It provides a webpage 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 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).
 List the various Toolbars seen in the KompoZer interface:
 Select Applications → Programming → KompoZer to open KompoZer.
 To view the different toolbars and status bar (if not visible) click on View → Show/Hide.
  As shown in the figure, KompoZer has eight menus.
 They are File, Edit, View, Insert, Format, Table, Tools and Help.
 After the Menu bar have 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.
 Rapid Access, Upload and Download, Local Machine and Remote Machine.
(2) Blank webpage (Page Pane):
 The page pane shows a blank untitled webpage.
 The bottom right side of the window shows Edit mode toolbar.
 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. Display in Red color.
 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/Format/Layout 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.
 Creating New File
In KompoZer, follow the steps to create a new file :
Step – 1:
 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.
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. In normal view, the forms are
shown surrounded by a dotted blue box.
Method to Insert Label of Field:
 Now add label “NAME” field.
 To Add a label for Name, select options in Insert → Form → Define Label.
 To add text an input text field for Name.
Method to Insert Text Field:
 To insert an input text field in the form, click Insert  Form  Form Field.
 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.
 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.
 Required Field Size and Maximum Length can be given in Fewer Properties section.

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.

Method Save the document:

 To save the file which has been created select File  Save option. OR

 Click on the save button in the composition toolbar.

 This opens a Page Title dialog box shown.

 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.
 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.
Method to Insert Radio button:
 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.
 Radio button selected when the form is loaded then, check the box in front of the text “Initially
Selected”.
 Remember, when we create the radio buttons within a group, the group name must be the same
for all the possible answers.

Method to insert Check box:

 Generally, checkbox is used to select a multiple item, from a given group of items.
 Now click Insert → Form → Form Field option.
 This displays Form Field Properties dialog box.
 Check the box in front of “Initially Checked” so as to keep the option checked when the form loads.

Method to insert textarea:

 Create address field in the form to insert address.
 To enter one or more than one line textarea field is used.
 Now, to insert textarea field click Insert → Form → Textarea.
 This will open a Textarea Properties dialog box.
 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.
Method to insert drop down:
 Drop down menu is used when it is not necessary to display all options at a time on the screen.
 To create drop down menu select Insert Form → Selection List option.
 This will open a Selection List Properties dialog 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.

Background:
 The background of form is white.
 If you want to give a background color to the form, go to Format → Page Colors and Background.
 Select “Use custom colors” option.