Web Site Design 1 : HTML CLASS 1 | CLASS 2 | CLASS 3 | CLASS 4 | CLASS 5 | CLASS 6 | CLASS 7

CLASS 5 : Accepting input: HTML Forms

TROUBLESHOOTING

If you're adding markup to your HTML file and your modifications aren't being displayed when you view the file in a browser, try following these steps to troubleshoot the problem.

General

  1. Make sure you've saved the changes you've made to your HTML file — if you're using BBEdit, a black diamond will appear in the upper left corner of the window if the file is unsaved.
  2. Make sure the file you're viewing in your browser window is the same file (that is, from the same location) as the one you're working on — if you're using BBEdit, check the path at the top of the file against the location toolbar of your browser.

HTML Syntax

  1. Check your spelling — browsers may be somewhat forgiving with HTML syntax, but not so with spelling. If you're attempting to add cell padding to a table, and if, for instance, you type the attribute as CELPADING="5" it will not be displayed properly by the browser.
  2. Look for stray or missing angle brackets (<>).
  3. Look for stray or missing quotation marks ("").
  4. Make sure that all tags that require closing tags have them.
  5. Make sure that your tags are nested properly (i.e., "first tag on, last tag off").
  6. Check that your tag/attribute and attribute/value pairs are valid — refer to this course Web site or any other HTML reference. If you're attempting to change the vertical alignment within a table cell, and if, for instance, you type the attribute as VALIGN="center" it will not be displayed properly by the browser.
  7. Make sure that tags that must be used with other tags (such as <OL> and <LI> and <TABLE>, <TR>, and <TD>) are used together properly.

Links & Anchors

  1. Check to make sure that the hypertext reference path to the file or Web site is correct — if you move any files around, be sure that the paths to these files in your HTML reflect these changes.
  2. For anchors, make sure that the HREF value matches the NAME value — be sure to include the initial pound sign (#) in the HREF value.

Images, Audio & Video

  1. Check to make your <IMG> or <EMBED> syntax is correct (see above).
  2. Check to make sure the image, audio or video file has been saved.
  3. Check to make sure the file name is correct and spelled correctly, including upper- and lowercase letters.
  4. Check to make sure that the path to the image, audio or video file is correct — if you move any files around, be sure that the paths to these files in your HTML reflect these changes.

Tables

  1. Check to make your <TABLE>, <TR>, and <TD> usage is correct (see above) — in tables, neglecting to close a tag can result in disappearing content, in some browsers.
  2. If the content in your table isn't displaying where you expect it to, make sure that you haven't left a table cell out and that any ROWSPAN or COLSPAN attributes are set correctly — even if your final goal is to have a table with no border, use the BORDER="1" attribute until you're satisified that everything is displaying properly and then set the attribute to BORDER="0".

FORMS

HTML offers a number form elements, which the user can fill out by making choices and entering text using the interface elements, and then submit. However, to actually gather input, a separate script or program (in CGI — Common Gateway Interface — or JavaScript) must be used. This course will cover simply how to display the form elements, which can be used as presentational elements.

<FORM>...</FORM>
Definition: The FORM tag creates an HTML form. The form can contain interface elements such as text fields, buttons, checkboxes, radio buttons, and selection lists that let users enter text and make choices. Each interface element in the form must be defined with an appropriate tag, such as <INPUT> or <SELECTION> (see below). All elements in the form must be defined between the <FORM> and </FORM> tags. As well as user input elements, the form can contain other elements such as headings, paragraphs, tables, and so on.

<INPUT>...</INPUT>
Definition: The INPUT tag defines a form element that can receive user input.

Attributes:

TYPE="button|checkbox|radio|text"
Determines the specific sort of form element to be created.

  • BUTTON places a button on an HTML form. [display]

    Attributes:

    VALUE="text"
    Specifies the text to display on the face of the submit button.

  • CHECKBOX places a toggle switch on an HTML form, letting the user set a value on or off. [display]

    Attributes:

    CHECKED
    Determines whether the box appears checked or not.

  • RADIO places a radio button on an HTML form. [display]

    Attributes:

    CHECKED
    Determines whether the radio button appears checked or not.

  • TEXT places a single line text input field on an HTML form. A text field lets the user enter text. [display]

    Attributes:

    SIZE="#"
    Specifies the length of the input field, in characters.

    VALUE="text"
    Specifies the initial value of the text element.

<SELECT>...</SELECT>
Definition: Defines a selection list on an HTML form. A selection list displays a list of options from which the user can select an item. Use the OPTION (see below) tag to define options in the list. [display]

Attributes:

SIZE="#"
Specifies the number of options visible when the form is displayed. If the list contains more options than specified by size, the list is displayed with scrollbars. If this attribute is not included, the list appears as a "pull-down" or "drop-down" menu.

<OPTION>...</OPTION>
Definition: The OPTION tag specifies an option in a selection list. Use the OPTION tag inside a SELECT (see above) tag.

Attributes:

SELECTED
Specifies that the option is selected by default.

<TEXTAREA>...</TEXTAREA>
Definition: The TEXTAREA tag defines a multiline input field on an HTML form. A text area field lets the user enter words, phrases, or numbers. You can defines the number of characters per line the text area can accommodate without scrolling by supplying the COLS attribute. You can specify that the number of lines that can appear without scrolling by supplying the ROWS attribute. Scrollbars appear in the text area if the text in the text area element exceeds the number of specified columns or rows. [display]

Attributes:

COLS="#"
Defines the width (number of characters per line) the text area can accommodate without scrolling.

ROWS="#"
Defines the number of lines (number of rows) the text area can accommodate without scrolling.

WRAP="off|hard"
Specifies whether lines longer than the text area's column width wrap to the next line. OFF disables word wrap. Text the user types is displayed with the exact line breaks that the user types. If the user explicitly inserts a line break, however, the break is included as part of the text area's value. The user has to scroll horizontally to see the ends of lines that do not fit in the text area element. HARD causes word wrap, and the line breaks are included when the form is submitted. The text wraps inside the text area element, and that the user does not need to scroll horizontally. The default is OFF.

SKILL MASTERY

Forms

  1. Try inserting each of the four INPUT elements — change the size of the text input element, add text to the text and button input elements, and set the radio and checkbox input elements to checked.
  2. Experiment with the SELECT element, adding and removing the SIZE attribute to check the differences in display as well as setting one of the OPTION elements to selected.
  3. Practice inserting a TEXTAREA element, changing the size and text wrap style.

FURTHER READING

Forms

NEXT CLASS

Designing with HTML