Creating Forms In Claris Home Page

Workshop by Dave Costello, Canfield High School

[see tut_source in Claris Home Page/ help_files for links ] 

Introduction: A form area can contain any number of form input elements for your audience to use. These include text fields, password fields, text areas, check boxes, radio buttons, pop-up menus, scrolling lists and submit and reset buttons. You can add hidden entry form elements to store information about the form that is hidden from your audience. You can also add other HTML elements such as text and images to the form area.

Every form input element needs a name and a value that is used by the CGI script to process the information. After you insert a form element into the form area, you can use its object editor to specify its name and value. You can also use the element's object editor to specify other parameters such as the size that it displays on the page.

Note You can change form elements the same way you change other Web page elements; that is, you can copy them, move them around, and resize them using the same basic methods.

 1.Open Claris Home Page, and create a New page.

2. From the Insert Menu select Form, Form Area, and an outlined box will appear on screen, with a tagged icon Form appearing above its border. This is the area in which you insert all of your form fields and objects. This insures that Internet Explorer , Netscape, Safari, Opera and most other browsers will properly display your form objects.

3. Next create a title or caption for your form, e.g. this tutorial will title the form area as Tutorial.

4. In order to make the caption or title large select the text of Tutorial and then using the "a+" tool on the toolbar menu, increase the size to the size you want. In this example the word will be enlarged 3 times: it will look like this Tutorial .

5.If you begin typing again, be sure to reduced the size of the text at least 3 times. This text was reduced 2x.

6. Next, in order to center align the text, use the tool bar icons to the right of the Normal drop down menu box in the upper left of the application window.

7. Now tutorial will be centered: Tutorial.


8. Adding a text area

Text areas allow your audience to enter multiple lines of text, which they can scroll through using the scrollbars.

 

The display size of a text area is measured in rows and columns where each row is equivalent to one character in height and each column is equivalent to one character in width. A text area can be 1 to 100 rows tall and 5 to 500 columns wide. This display size of a text area does not limit the amount of text that your viewers can enter; if more text is entered, the text area will scroll.

To add a text area to the form area:

  1. Place the insertion point inside the red border of the form area.
  2. Choose Form from the Insert menu, and then choose Text Area from the submenu.

    Claris Home Page inserts a text area form element and opens the Text Area Object Editor.

     

     

  3. In the Text Area Object Editor, type a short descriptive name in the Name text box.
  4. In the Rows text box, type a number from 1 to 100 to set the height of the text area.
  5. In the Columns text box, type a number from 5 to 500 to set the width of the text area.
  6. Choose Virtual, Physical, or Off from the Wrap pop-up menu to set the type of word wrapping in the text area.

    Choose Virtual to wrap text onscreen, but not include line break characters with the form data. Choose Physical to wrap text onscreen and include line break characters with the data. Choose Off to disable word wrapping onscreen, and include line break characters in the form data if a viewer types them.
  7. Close the Text Area Object Editor to apply your settings.


REAL WORLD GOTCHAS AND TIPS: . In order to do this first type in a question in your form area, then from the Insert Menu, select Form, then select Text Area and you will be presented with a dialog box with several choices. Disregard Name, but in the Rows entry field, chose a number appropriate to the length of the text you want to provide for an answer. Then set the Columns to 100. TIP: Note that whatever is typed on a web form, is not printed. Only the displayed portion of a scrolled field prints. Be careful and provide enough room for extended answers, otherwise the text will be clipped. Also setting the width to 100 columns usually provides enough space to fill the horizontal display of the screen. Making a field much wider may not properly display or print on a web page from some computers [especially PC windows ].

9.Adding a text field

Text fields can contain only one line of text, can be 1 to 500 characters wide, and can only be resized horizontally. These fields are generally used for shorter information such as a name or phone number.

 

To add a text field to the form area:

  1. Place the insertion point inside the red border of the form area.
  2. Choose Form from the Insert menu, and then choose Text Field from the submenu.

    Claris Home Page inserts a text field form element and opens the Text Field Object Editor.

     

     

  3. In the Text Field Object Editor, type a descriptive name for the text field in the Name text box.

    For example, Phone Number.
  4. In the Size text box, type a number from 1 to 500.

    The number you type here determines the display size of the text field in the browser window.
  5. In the Max Length text box, type the maximum number of characters (from 1 to 1000) someone can enter in the text field.
  6. Close the Text Field Object Editor to apply your settings.

You can enter sample text in the text field to show your audience what kind of information to enter, and to provide a default value if nothing is entered in the field.

To enter sample text in the text field:

  • In Edit Page mode, click inside the text field so that the insertion point appears, and then type your sample text.


10.Tables provide a way of organizing and displaying information on your Web page. A table is made up of a series of rows and columns. A single block of information in a table is called a cell and can contain text, images, lists, form elements, and other tables. In fact, anything that can be placed in an HTML document can be placed in a table cell. You can make the background a different color than the rest of the page.

This This is a table cell

Each cell can be colored

Use tables to block layouts

.......................................

This row can be colorized....

.......................................

.......................................

.......................................

.......................................

.......................................

.......................................

.......................................

.......................................

.......................................

.......................................

.......................................

Note Tables are a relatively new part of HTML, and not all browsers support them. For this reason, before you start creating tables, make sure you know who your audience is and what kinds of browsers they use. If the majority of your viewers are using browsers that don't support tables, you might want to consider using preformatted text to lay out your information.

Using the Table Object Editor

Use the Table Object Editor to change the attributes of a table and the contents of each cell. For example, you can make the border invisible so your viewers are unaware that the information is contained in a table. The Table Object Editor appears automatically when you insert a table into your page.

You can also open the Table Object Editor three other ways:

  • Double-click a table border or cell in a table.
  • Click a table or cell, and choose Object Editor from the View menu (Windows) or Show Object Editor from the Window menu (Macintosh).
  • Click a table or cell, and click the Object Editor button on the toolbar.

     

     

Note When you select the table border and open the Table Object Editor, only the Table tab settings are displayed. To see the Cells tab settings, select a cell in the table.

Changing table attributes

To change the attributes of a table, select the table and then change the settings in the Table Object Editor (click the Table tab if necessary). To apply the new settings, press Tab or click the close box of the Table Object Editor. See

Use this table
attribute setting

To do this

Rows

Specify the number of rows in the table. Rows are added to and subtracted from the bottom of the table. The maximum number of rows you can specify is 100.

Add Row

Add a row directly below the selected cell or table.

Remove Row

Delete the selected row or the bottom row of the selected table and its contents.

Columns

Specify the number of columns in the table. Columns are added to and subtracted from the right side of the table. The maximum number of columns you can specify is 25.

Add Column

Add a column directly to the right of the selected cell or table.

Remove Column

Delete a selected column, or the right-most column of a selected table, and its contents.

Width

Change the width of the table. Choose Percent to make the width a percentage of the browser window's width. Choose Pixels to make the width a fixed amount that is not affected by the browser window's width. Choose Auto to make the width fit evenly around the table elements. For more information on changing the table width, see Changing the table width or height.

Height

Change the height of the table. Choose Percent to make the height a percentage of the browser window's height. Choose Pixels to make the height a fixed amount that is not affected by the browser window's height. Choose Auto to make the height fit evenly around the table elements. For more information on changing the table height, see Changing the table width or height.

Spacing

Change the amount of space between cells (by making the border thicker).

Padding

Change the amount of space around the data in cells.

Border

Change the thickness of the table borders to make it appear beveled or three-dimensional. A setting of 0 makes the borders of the table invisible.

Table Color

Change the background color of a table. For more information on changing the color and background of a table, see Changing the color and background of a table.

Table Image

Specify a background image for a table. Click Set to select an image file. Click Remove to restore the default background setting.

Extra HTML Attributes

Add other HTML attributes to a table. Requires knowledge of HTML. For more information, see Adding extra HTML to your page.

Changing cell attributes

To change the attributes of a cell, select the cell and then change the settings in the Table Object Editor. Click the Cells tab if necessary in the Table Object Editor to display the cell attribute settings. To apply the new settings, press Tab or click the close box of the Table Object Editor.

Use this cell
attribute setting

To do this

Column Width

Change the width of all the cells in a column. For more information, see Changing the table width or height.

Column Span

Change how many columns a cell spans. For more information, see Resizing a cell to span rows and columns.

Row Height

Change the height of all the cells in a row. For more information, see Resizing a row or column using the mouse.

Row Span

Change how many rows a cell spans. For more information, see Resizing a cell to span rows and columns.

Horizontal Align

Change how elements are horizontally aligned within the cells. For more information, see Changing the alignment of elements in a table.

Line Wrap

Make text wrap in a cell.

Vertical Align

Change how elements are vertically aligned within the cells. For more information, see Changing the alignment of elements in a table.

Header Cell

Format the selected cell as a table header cell in order to label a row or column. (Text in header cells appear in bold face type in Claris Home Page; they may look different in your browser.)

Cell Color

Change the background color of an individual cell. For more information, see Changing the color and background of a table.

Row Color

Change the background color of an entire row.
Note
The cell color for a specific cell will override its row color setting.

Cell Image

Specify a background image for a cell. Click Set to select an image file. Click Remove to restore the cell's default background setting.

Extra HTML
Attributes

Add other HTML attributes to an individual cell in a table. Requires knowledge of HTML. For more information, see Adding extra HTML to your page.


11. How do I save these forms so people can access them? Where do I save them?

The first step is to save your work in YOUR Webstorage folder on the server. [there are other ways as well ]. Then you must make a decision, do you want people to 'see' all of your web page files, in indexed fashion--with ready access and no additional work for you? Or do you want to create links to your web files as you add them? If so, then you need to link to each new file you add by creating the links from your default.htm file, which acts as a swtichboard or pointer for your site. This can be done by using Claris Home Page as well.

a. create an indexed site

b. create a base document as switchboard to other files

 

Creating a link to a Web page

When you create a link, you select text or an image and specify a destination URL for it. By default, a link you create in a page takes you to the top of the page you're linking to. To make a link go to a different place in the page, you need to create an anchor.

To create a link to a Web page in your site:

  1. Select the text or image you want to make into a link.
  2. Choose Link to File from the Insert menu or click the Link Editor button on the toolbar.
  3. Select the name of the Web page you want to link to and click Open.

    The text becomes underlined and the color of the text or the image border changes to indicate the link.

    To remove the visible border from an image link, select the image, choose Object Editor from the View menu (Windows) or Show Object Editor from the Window menu (Macintosh), and type 0 in the Border text box.

  4. Save your Web page.
  5. TIP I suggest that you create links to every page with the full URL.

To create another link to the same location or a recently used URL:

  1. Select the new text or image you want to make into a link.
  2. Choose Link Editor from the View menu (Windows) or Show Link Editor from the Window menu (Macintosh).
  3. Choose the most recent URL listed at the top of the URL pop-up menu.

    You can also click the Browse Files button to locate a file.

     

 

Setting a Base Document URL--WE USE DEFAULT.HTM IN OUR SYSTEM

You can specify a Base Document URL for the links on a page in your site. This feature can be used for complex Web sites that comprise many folders so that the links are associated with a single document or folder. If your Web site is a single folder, this feature is not necessary.

Note Some older browsers do not support the HTML element used to create the Base Document URL for a page.

Setting a Base Document URL for the links in a page is generally done before links are created for that page, because it affects all the links you create for that page.

To set the Base Document URL for a page in your site:

  1. Choose Document Options form the Tools menu (Windows) or Document Options from the Edit menu (Macintosh).
  2. Click the Parameters tab, if necessary
  3. Type the complete pathname for the page in your site that will serve as the Base Document URL in the Base Document URL text box. For example:

    http://servtlc.access-k12.org/myfolder/default.htm
  4. Click OK to apply your setting.