Welcome...

Forms

How To: Forms
  • Forms are used to gather information from a viewer and make a site more interactive. Typical kinds of forms are guestbooks, questionaires, contests, order forms, etc.
  • Forms can be a headache to code in plain text, and it is often much more expedient to use a WYSIWYG (What You See Is What You Get) editor
    		•


    The Basics and Concepts
  • All forms must start with the <FORM> tag and end with the </FORM> tag.

  • There are two very important attributes, or 2ndtier tags that beloing the the <FORM> tag.
    1. METHOD - this attribute can have values of either "GET" or "POST". These are commands that tell the browser how to communicate with your server. Most search engines use "GET" because they want to query data from a pre-established index, and most questionaire-type forms use "POST" because they are collecting information and posting it to the server.

    2. ACTION - this attribute tells the browser what CGI script to run to process the data. The value for this attribute would be either the URL to the CGI script, or a mailto: function which will send the form data directly to an e-mail address. The latter option is generally easier for most beginners and those using free web space, or other servers which do not allow CGI-BIN access. (AOL, PRODIGY, NETCOM, AT&T, and many others DO NOT allow CGI-BIN access to users.)



    • Simple Form
  • Below is a very simple form.


    		HTML Code: <FORM METHOD="POST" ACTION="MAILTO:[email protected]">
    <INPUT TYPE="TEXT" WIDTH="40" NAME="UserName" VALUE= "JohnDoe"><BR>
    <INPUT TYPE="SUBMIT" VALUE="Send It!">
    <INPUT TYPE="RESET" VALUE="Reset">
    </FORM>
    Code Explanation:

  • The "ACTION" attribute in the <FORM> Tag is set to MAILTO:. This will send an e-mail to the e-mail address specified.
  • The first INPUT is a "TEXT" field. The "NAME" attribute is simply for your own purposes when viewing form responses.
  • In that same field, the "VALUE" attribute, set to "John Doe", is simply a default.
  • The second INPUT is a "SUBMIT" or a submit button. The "VALUE" attribute in both this button, and the RESET button, is the text that will appear in the button.



    • Form Elements
    There are very many INPUT types that can be used in HTML forms. For all types, the coding is as follows: <INPUT="Type">. The "Type" option is the name off the field type you wish to put in your form.

    Element
    Description & HTML Code
    Text Fields Text fields are used the most commonly used field in forms.

    example:

    code:
    <INPUT TYPE="TEXT" WIDTH= "20" NAME= "Data1">< /font>< /font>< /font>< /font>
    Password Fields Password fields are essentially the same as text fields, except they change characters inputed to asterisks (****).

    example:

    code:
    <INPUT TYPE="PASSWORD" WIDTH= "20" NAME= "PassWd">< /font>< /font>< /font>< /font>
    Hidden Fields Hidden fields do not appear on the actual form; they are invisible in the browser display.

    example:
    You can't see it! But if you view the page source, it's here.

    code:
    <INPUT TYPE="HIDDEN" NAME= "Invisible" VALUE= "DefaultData">< /font>< /font>< /font>< /font>
    Check Boxes We all know what these are.

    example:
    Option 1
    Option 2
    Option 3


    code:
    Option 1 <INPUT TYPE="CHECKBOX" NAME="Check1"><BR>
    Option 2 <INPUT TYPE="CHECKBOX" NAME="Check2"><BR>
    Option 3 <INPUT TYPE="CHECKBOX" NAME="Check3"><BR>


    Radio Buttons Radio buttons are used when one option in a set of data needs to be selected.

    example:
    Option 1
    Option 2
    Option 3


    code:
    Option 1 <INPUT TYPE="RADIO" NAME="LIST" VALUE="Option1"><BR>
    Option 2 <INPUT TYPE="RADIO" NAME="LIST" VALUE="Option2"><BR>
    Option 3 <INPUT TYPE="RADIO" NAME="LIST" VALUE="Option3"><BR>

    *Note: In a list of radio buttons, the name of each button must be the same, and the "VALUE" attributes must be different.
    Submit Buttons A submit button is used to process form data and send it off to your CGI script or mailbox.

    example:


    code:
    <INPUT TYPE="SUBMIT" VALUE="Click Me!">

    Special Option

    Images can be used in place of submit buttons, like the "Find It!" button at the top of this page.

    example 2:


    code 2:
    <INPUT TYPE="IMAGE" SRC= "../images/findit.gif">< /font>< /font>< /font>< /font>
    Reset Buttons Reset buttons are used to clear form data, or to reset the fields to the defaults.

    example:


    code:
    <INPUT TYPE="RESET" VALUE= "Clear Info">< /font>< /font>< /font>< /font>
    Drop-Down Menus Drop-down menus are very commonly used in forms. They are a good way to arrange large numbers of options. They are slightly different in coding from the other form fields because they do not use the <INPUT TYPE=""> tag.

    example:

    code:
    <SELECT NAME="Menu1">
    <OPTION SELECTED>Selected Choice
    <OPTION>Choice 2
    <OPTION>Choice 3
    <OPTION>Choice 4
    </SELECT>

    There is another kind of drop-down menu that is coded almost exactly the same, but it allows for multiple selections. The only difference is the "MULTIPLE" option in the <SELECT> tag.

    example 2:

    code 2:
    <SELECT NAME="Menu1" MULTIPLE>
    <OPTION SELECTED>Selected Choice
    <OPTION>Choice 2
    <OPTION>Choice 3
    <OPTION>Choice 4
    </SELECT>
    Text Areas Text areas, like drop-down menus, do not use the <INPUT TYPE=""> tag. Text areas are multiline text fields.

    You've seen several examples of forms. If you want to you can test you knowledge her, but you will have to code the minimum HTML needed for a web page plus the code for the form you want to try:




    code:
    <TEXTAREA NAME="Area1" ROWS="5" COLS="30" WRAP="VIRTUAL">
    </TEXTAREA>

    Note: The "WRAP" attribute decides how the text should wrap. There are three possibilites:
    1. WRAP="OFF" -- Wrapping doesn't happen. Lines are sent exactly as typed.
    2. WRAP="VIRTUAL" -- The display word wraps, but long lines are sent as one line without new lines.
    3. WRAP="PHYSICAL" -- The display word wraps, and the text is transmitted at all wrap points.


    [ The End ]


    image
    image

    Hosted by www.Geocities.ws

    1