CPSC 343 Database Theory and Practice Fall 2008

HTML Quick Start

This document is intended to be an extremely brief introduction to HTML and HTML forms. Many details are omitted or simplified (e.g. not all syntax variations are presented). For more information, check out the HTML Tutorial from W3Schools.

See the HTML/PHP Local Quick Start for details on where to put your HTML files and how to view them.


Contents


Introduction to HTML

HTML stands for the Hypertext Markup Language. It is structured as a series of tags (markup) which you add to a text document to provide information about the structure and meaning of the text. Originally HTML was intended only to indicate structure and semantic meaning (marking paragraphs, headings, table elements, etc) with the specific formatting (such as font, font size, bold/italics/underline, positioning on the page, etc) left up the thing displaying the document, though formatting tags have crept into HTML.

The "hypertext" part refers to HTML's ability to specify links between documents.


Structure of an HTML Document

HTML tags are enclosed with <> symbols. Many tags have an open <tag> and a corresponding </tag>, indicating that the effect of the tag is applied to the text contained between the open and close tags. Some tags also have attributes which are listed between the tag name and the > in the open tag.

Tags should be properly nested, so <tag1> <tag2> </tag2> </tag1> is allowed but <tag1> <tag2> </tag1> </tag2> is not. Browsers differ wildly with what they'll let you get away with and how they interpret mistakes. You can use a validator like the one at http://validator.w3.org/ to check that your document adheres to the standards.

Every HTML document has the following basic structure:

<html>
<head>
  <title>The Page Title</title>
</head>
<body>
  ...page content goes here...
</body>
</html>

The material in the <head> section does not actually appear on the page, but rather specifies information about the page. Of particular interest is the <title> tag, which specifies the page's title. This is what appears in the title bar of your browser window, on a tab in your browser window, or in the history list. It does not appear on the page itself (though often the information in the title is repeated elsewhere in the HTML document so that it does appear).

The material in the <body> section is what actually governs the appearance of the page.

No particular indentation or line-break convention is required, but indenting nested tags and using sensible line breaks can greatly improve readability.


File Naming

HTML files are traditionally named with a .html extension (.htm on some Windows servers).

Also, many webservers are configured to automatically load a file with the name index.html when the URL specifies a directory name. It is a good idea to name your main page in each directory index.html (or index.php, if it contains PHP code).


What Tags are There?

If you aren't familiar with basic HTML tags like <p>, <h1> (and its relatives), <hr>, <ul> and <li>, and tables then you should check out at least one of the following links:

HTML comments are indicated by <!-- ... --> - these are multiline comments, and everything between the start and end tags is a comment.


HTML Forms

HTML forms allow a user to input information which is then sent to the webserver for processing. There are many different kinds of form elements, intended for different kinds of input.

A form is denoted by the <form> tag:

<form action="action.php" method="POST">
  ...
</form>

The action attribute specifies the name of the script (on the webserver) that will process the data entered in the form when the form is submitted; the method attribute specifies how the data is sent to the webserver. There are two choices for the method, "POST" and "GET". (a quick discussion of POST vs GET)

The form tag itself doesn't generally produce any visible effect - it's what replaces the "..." between the <form> and </form> tags that defines what the form looks like and what can be entered. Pretty much any tag that can occur in the body of an HTML document can go inside a form, so you can use paragraphs, headings, lists, tables, etc to format the form.

Form Elements

The other ingredients in a form are form elements - these are what allow the user to enter information.

Each form element has a name attribute. It is very important to specify a name - this is how PHP will be able to access the values the user entered into the form. In general each form element should have a different name (exceptions are noted below).

Input Fields

Input fields are the most basic form of input, allowing the user to enter some quantity of text.

purposesyntax/examplewhat it looks like
single-line input
<input type="text" name="input1" value="default text" size="25">
  • value (optional) - initial text to be displayed in the text element
  • size (optional) - width of the text element
multi-line input
<textarea rows="3" cols="25" name="input2" wrap="soft">
default text
</textarea>
  • the text between the tags, if any, is the initial text to be displayed in the textarea element
  • wrap (optional) - specifies what to do if the user types text which exceeds the width of the text area ("soft" will cause the text to wrap)

Drop-Down Lists

A drop-down list allows the user to choose one option from a predefined list of options, presented in a drop-down list format.

purposesyntax/examplewhat it looks like
drop-down list
<select name="input3">
  <option value="NY"> New York
  <option value="MA"> Massachusetts
  <option value="VT"> Vermont
</select>
  • the value associated with the selected option is sent as the value of the select element, while the text after each <option> tag is what appears on-screen as the label of the list item

Radio Buttons and Checkboxes

Both radio buttons and checkboxes allow the user to choose one or more options from a predefined collection, but with all the choices presented at once (instead of in a drop-down list format). Radio buttons only allow one choice to be selected at a time, and will automatically unselect a previously-selected choice if a new one is made. Checkboxes allow multiple choices to be checked simultaneously.

purposesyntax/examplewhat it looks like
radio buttons
(only one button in a group can be selected at a time)
<input type="radio" name="input4" value="yes" checked> yes <br>
<input type="radio" name="input4" value="no"> no <br>
<input type="radio" name="input4" value="maybe"> maybe
  • all of the radio buttons in one group have the same name (the name is what defines the group)
  • the value of the selected button is sent as the value of the input element
  • checked (optional) - the button which is checked by default

(this example does not work in Konqueror, but it does work with Netscape 7.2/Mozilla, Opera, and Firefox)

 yes
 no
 maybe
check boxes
(more than one button can be checked at a time)
<input type="checkbox" name="input5[]" value="yes" checked> yes <br>
<input type="checkbox" name="input5[]" value="no"> no
  • the value is sent as the value of the input element if the box is checked (if the checkbox name ends with [], PHP will create an array containing the values of the checked boxes)
  • checked (optional) - button is checked by default
yes
no

Note that setting the "value" attribute does not cause labels to appear for the boxes - you must supply your own.

Submit and Reset Buttons

Every form needs at least a submit button, so the user can send the form data to the server for processing.

purposesyntax/examplewhat it looks like
submit the form
(send to the server for processing)
<input type="submit" value="submit form">
  • value (optional) - text displayed on the button
clear user inputs in the form
<input type="reset" value="reset form">
  • value (optional) - text displayed on the button

Hidden Elements

A use for hidden elements is described in the Hidden Form Elements section of the PHP Web Quick Start.

purposesyntax/examplewhat it looks like
hidden element
(nothing is displayed on the screen, but the value of the hidden element is submitted when the form is submitted, just like visible elements)
<input type="hidden" name="input6" value="secret message">
 

Style Sheets

Cascading style sheets (CSS) are the "proper" way to do appearance formatting (i.e. fonts, font styles, spacing, etc). They are a separate mechanism from HTML, though strongly tied to HTML, and (among other things) provide a very easy way to maintain a uniform appearance across a website. You are encouraged, though not required, to use style sheets for your final project. If you want to learn more, check out the nice example-driven tutorial from W3 Schools or the information from the Web Design Group (particularly useful for the list of CSS properties if you are already familiar with the basics of style sheets).


Valid HTML 4.01!