|GETTING STARTED |HTML |GRAPHICS |ADD-ONS |FINAL TOUCHES |HELP |GEOHELP |HOME|

title image [2,498 bytes]

|ESCAPE CHARACTERS |FONTS |FORMS |FRAMES |HTML EDITORS |LINKING |LISTS |TABLES |TAGS
BASIC STRUCTURE

FEEDBACK FORMS - FORMS LINKS

bar gif [1,869 bytes]

A Form is a great source for retrieving information. It can be put to many uses on your Web Page, some of which will be outlined in this part of the Site.
One could be used on your page for collecting information eg: a survey/questionnaire, for visitors to be able to send you comments about what they thought of your Site or to activate an Email form.

bar gif [1,869 bytes]

What does a form look like?

The layout of a form can be suited to your own preference.
You can include checkboxes or radio buttons, input fields and add your own information.

To create a Form it must begin with a <FORM> tag and close with a </FORM> tag.

So, to start we will type <FORM>.
Now we want to tell the Form what we want to do with it.

  • The attribute METHOD will tell your server how to collect the information that has been entered into the Form.
  • The attribute ACTION will define the URL of the script that should be used to process the information (data).

Let's put some information between the <FORM> and </FORM> tags. A form is a great way to receive information from your viewers and is a great way to make your page interactive.
Whether it be a Survey, Questionnaire or a simple feedback form requesting viewers opinions of your site.

The tag <INPUT> can be included in your form script and with added attributes, can accept certain information from your Web document.
The word TYPE when put within the <INPUT> tag can define the type of input field that you are providing.
eg: <INPUT TYPE="text">.

Input fields for 'TYPE' could include:

TEXT this displays a box that enables the user to input information
HIDDEN can be used to pass 'invisible' data to the script without the user seeing it.
CHECKBOX is a little square box which you can click (can also be used to make multiple choices)
RADIO this is a little circle (radio button) to make a single selection.
SUBMIT this button is clicked to send the information on the form to the Web Server.
RESET this button is clicked to reset all the information previously entered into the field.

Other fields could include:

VALUE this is used to supply a default value for the input field ('value'= a text or numerical string.
SIZE this tells you the number of characters that can be displayed in the 'text' field box without having to scroll.
MAXLENGTH specifies the maximum length of a 'text' field.

And you can also use some other tags that also have closing tags.

<SELECT>
</SELECT>
for a selection of lists. The SIZE is for the number of items to be displayed in the select window when it is first seen. Each item is preceded by the
<TEXTAREA>
</TEXTAREA>
has designated ROWS and COLS (columns) and a NAME. It allows a large box to be displayed which can include lines of text, the width and the height of the box.

back to top

bar gif [1,869 bytes]

How to Create a simple Feedback Form

Creating a Form is a great way to become interactive with your site viewers. Below is an example of a basic Feedback Form for if you are wanting to collect information, or input from viewers of your site and have it sent to you via Email. eg: a survey, a questionnaire, comments about your site, notification of dead links etc.

This is going to be a Feedback form that is going to tell let the user fill out their name, Occupation, Country, number of times they have visited the site, what they liked about it and their own comments and suggestions.
It is going to consist of an example of 2 TEXT fields, 3 CHECKBOXES, 3 RADIO BUTTONS, SELECT and a TEXTAREA comment box.

We are going to begin a Form, so we start with the
<FORM> tag.

Next we will choose our Method
<FORM METHOD="POST">.

Next we will choose our Action
<FORM METHOD="POST" ACTION="mailto:me@geocities.com">.

Ok, so now we have told the Form what to do with the data, lets add some input fields.

Let's put in some text boxes.

  • Please enter your name:(this text will show as a heading for the box).
    Next we will add the Input type
    <INPUT TYPE="TEXT">.
    Next we will give it a name (so you can understand the result when it is returned in your email)
    <NAME="person">.
    Next we will say how many characters are allowed to be typed into the box
    <SIZE="30">.
    The rest of the text boxes will be the same but just change the 'NAME' as shown in the example.

    Now we will add some Radio Buttons.

  • How many times do you visit this site?:(this text will be the heading for your box).
    first time <INPUT TYPE="RADIO" NAME="times" VALUE="first">
    once a week <INPUT TYPE="RADIO" NAME="times" VALUE="once">
    twice or more a week <INPUT TYPE="RADIO" NAME="times" VALUE="twice">

    Now we will add some Checkboxes.

  • Do you like the:(this will be the heading for your box).
    Java <INPUT TYPE="CHECKBOX" NAME="page" VALUE="java">
    Frames <INPUT TYPE="CHECKBOX" NAME="page" VALUE="frames">
    Layout <INPUT TYPE="CHECKBOX" NAME="page" VALUE="layout">.

    Now we will add a Select box.

  • Please select your occupation:(this will be the heading for your box).
    <SELECT NAME="job" SIZE="3">
    <OPTION>Homemaker
    <OPTION>Student
    <OPTION>Law
    <OPTION>Medicine
    <OPTION>Computers
    <OPTION>Other
    </SELECT>

    Now we will enter a Textbox for the viewers comments.

  • Please place any comments or suggestions below:
    <TEXTAREA NAME="comments" ROWS="10" COLS="50">
    Type your comments here.
    </TEXTAREA>

    Now that we have all the information for the Form that we want, we can add the Submit and Reset buttons.

  • Submit and Reset
    <INPUT TYPE="SUBMIT"
    VALUE="Send Feedback Form">
    <INPUT TYPE="RESET"
    VALUE="Reset Feedback Form">

    That is all the information we are going to have in the Form, so now let's close the Form.

    </FORM>
  • - This is How it will Look -

    Please enter your name:

    Please enter your Country:

    What is your Occupation?:

    How many times do you visit this page?:

    First time
    Once a week
    Twice or more a week

    Do you like the:

    Java
    Frames
    Layout

    Please enter your comments and suggestions below:

    back to top

    bar gif [1,869 bytes]

    That is just one example of how you can put a form on your Web Page. Forms are relatively easy to include on your Web Page once you understand the basic concept and interpret the tags used.

    If you would like to read more about creating Forms, check out:

    The Super Simple Forms Tutorial Professional Web Design HTML Goodies - Forms Tutorial

    back to top


    GOOD LUCK - LET'S GET FORMING!


    Do you have a favourite 'Forms' link? - Why not add it here!
    - ADD MY LINK -
    Or Email: - websister@geocities.com -, with the Subject line: - Forms


    [ UPDATES ][ DISCLAIMER ][ EMAIL ][ GEOCITIES ][ SILICON VALLEY ][ SITE MAP ][ HOME ]
    site © of websister 1997/98