last updated: --Sun Oct 26 13:12:41 EDT 2008--
page owned by: bridgeman@hws.edu
| CPSC 343 | Database Theory and Practice | Fall 2008 |
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.
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.
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.
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).
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 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.
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 are the most basic form of input, allowing the user to enter some quantity of text.
| purpose | syntax/example | what it looks like |
|---|---|---|
| single-line input |
<input type="text" name="input1" value="default text" size="25">
|
|
| multi-line input |
<textarea rows="3" cols="25" name="input2" wrap="soft"> default text </textarea>
|
A drop-down list allows the user to choose one option from a predefined list of options, presented in a drop-down list format.
| purpose | syntax/example | what it looks like |
|---|---|---|
| drop-down list |
<select name="input3"> <option value="NY"> New York <option value="MA"> Massachusetts <option value="VT"> Vermont </select>
|
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.
| purpose | syntax/example | what 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
|
(this example does not work in Konqueror, but it does work with Netscape 7.2/Mozilla, Opera, and Firefox) yesno 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
|
yes no |
Note that setting the "value" attribute does not cause labels to appear for the boxes - you must supply your own.
Every form needs at least a submit button, so the user can send the form data to the server for processing.
| purpose | syntax/example | what it looks like |
|---|---|---|
| submit the form (send to the server for processing) |
<input type="submit" value="submit form">
|
|
| clear user inputs in the form |
<input type="reset" value="reset form">
|
A use for hidden elements is described in the Hidden Form Elements section of the PHP Web Quick Start.
| purpose | syntax/example | what 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"> |
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).
|
|