This section should appeal to list-makers (there's actually a classification for people who like making lists) everywhere. Here you will find out the simple HTML way of creating bulleted, ordered and definition lists. If you're already in the know, you can skip straight to our run-down of forms.

Bulleted Lists

These are the simplest of the all the types of lists (although I'm not implying that ordered lists are any more difficult).

• item 1
• item 2
• item 3

The 'items' in this bulleted list can be sentences and paragraphs long (and you'll see why in a moment), contain images, whitespace, etc.To add a list to your page (still have your test/example page open?), you start my writing the beginning and end tags:

<UL>

</UL>

The 'UL' within the angle brackets stands for Unordered List, which makes sense (to me, at least) because the data is not numbered, or listed with some kind of inherent ranking system which is present in ordered lists. This tag, <LI>, is what creates the bullets, simply by denoting the beginning of a new List Item.

<UL>
  <LI>item 1
  <LI>item 2
  <LI>item 3
</UL>

The above code will create the list I showed you at the beginning of this tutorial. As well, you can create nested lists (a list within a list - a technique often used for creating outline-like hierarchies and message board scripts =) ). For example, the indented list in the middle is nested within an outer (not indented) list: 

item 1 Nested List Below: item 4 item 5 item 6 item 3

<UL>   <LI>item 1   <LI>Nested List Below:     <UL>        <LI>item 4        <LI>item 5        <LI>item 6     </UL>   <LI>item 3 </UL>

Of course, you could nest a list within a nested list and so forth (just by creating another instance of a list, using <UL> ... </UL>).

Ordered Lists

This is not too different from unordered lists. In its most basic format, the only difference is that it is an Ordered List and uses <OL> instead of <UL> (and retains the <LI> tag to denote new list items). Take this code from the first section, in which I've swapped the <UL> for an <OL>:

<OL>
  <LI>item 1
  <LI>item 2
  <LI>item 3
</OL>

It produces the following list: 

1. item 1  
2. item 2  
3. item 3

Notice that instead of bullets, we now have ordinal numbers 1., 2., and 3. This ordered list has the same nesting ability as its unordered counterpart. In addition to this, ordered lists can be nested within unordered lists and vice versa for some high-octane mixing and matching :) There is one difference, however, which makes this type of list more flexible in presentation. You can specify a TYPE attribute in your starting <OL>, which must have an ordered value (which means the list will "know" what value will represent the next list item.

For example here, let's use TYPE="A", in which A is the first value of the alphabetical listing order. What the above list would look like is shown below:

1. item 1
2. item 2
3. item 3

If I had started with "B" (which is normally not the starting value of an alphabetical list), it would default to the original numerical <OL> that didn't have a TYPE value (or discreetly, a TYPE value of 1). However, what if you did want to start your list at B and skip A? There's another <OL> attribute called START (which has a numerical value) which can be used simultaneously with TYPE to get the "skipped" output that you want (although it can be used without TYPE to work with numerical values).

<OL TYPE="A" START="2">
  <LI>item 1
  <LI>item 2
  <LI>item 3
</OL>

The code above produces the following effect:

2. item 1 
3. item 2 
4. item 3

Another hypothetical situation: if you want to create an ordered list but have it "skip" certain numbers, you can directly set the value of the list item number by using the VALUE (what else?) attribute in your <LI> tag and it will jump to that number and continue from that. Using our example above, we have:

<OL START="5">
  <LI>item 1
  <LI VALUE="25">item 2
  <LI>item 3
</OL>

Produces the following effect:

5. item 1
25. item 2
26. item 3

Here are some other TYPE values that you might find useful :)

<OL TYPE="I">	<OL TYPE="i">	<OL TYPE="square">	<OL TYPE="circle">	<OL TYPE="a">
item 1 item 2 item 3	item 1 item 2 item 3	item 1 item 2 item 3	item 1 item 2 item 3	item 1 item 2 item 3

Definition Lists

This one apparently is used to imitate definition style formats (to define a term and perhaps give a description of it). Instead of using a <UL> or <OL> container set, you will need to use a <DL> </DL> set. And the 'DL' stands for Definition List (naturally).

The contents of the definition list are structured a bit differently from the rest however. Each "list element" consists of a Definition Term and Definition Description. Think of it this way: You're listing a term and its definition/description in the list (and they seem to go hand-in-hand). As well, you'll notice that there are no "bullets" or marks that separate two definition terms; it is purely separated on the indentation of the description (that and its inherent line break). Well, without further adieu, I'll show you the effects before you cross your eyes trying to understand what I just tried to describe :)

Term1

This is the description for term1. There really isn't anything to say about it because this is just a test; just like this American Broadcasting System tests which broadcast that "This is a test. This is only a test."

Term2

Well gee, with that cheesy comment made for the first term I ran out of useless things to say. Oh wait, I just accomplished filling up this description with more useless text :P

How did I code that? Well, check it out for yourself:

<DL>
   <DT>Term1
   <DD>This is the description for term1. There really isn't anything to say about it because this is just a test; just like this American Broadcasting System tests which broadcast that "This is a test. This is only a test."
   <DT>Term2
   <DD>Well gee, with that cheesy comment made for the first term I ran out of useless things to say. Oh wait, I just accomplished filling up this description with more useless text :P
</DL>

Notice that the <DT> and <DD> tags don't need to be "closed" (just like <LI>) with a </DT> or </DD> tag. In a more serious fashion, I've used definition lists to define and format the definition blurbs in my Meta Tag and Dynamic Fonts tutorial. With that said we can move on.

Forms

I'll tell you this; forms are still currently one of the most fundamental ways to handle input/output (I/O) in an HTML coded page. Although it has its limits, forms have flexibility towards handling data, which is what we will be exploring in the subtopics below.

The initiation of the form begins with the beginning <FORM> and end </FORM> tags. Just like <UL> and </UL> for an unordered list, these container elements tell the browser to interpret form tags.

The <FORM> tag has a few important attributes, two of which are required for a form to interact with a server-side application (like CGI) or even for JavaScript-powered email forms. The aforementioned essential ones are ACTION and METHOD.

ACTION defines what and where the data information will be passed to. Often you will see that ACTION="/cgi-bin/aScript.cgi" where aScript.cgi is a CGI script. So in this case, ACTION is calling a CGI script that will receive the form data (information that was filled in the fields) and proceed by manipuating the data and sending some kind of output to the browser window. Another common entry is ACTION="mailto:myemail@mydomain.com" and that would result in sending the form data to the specified email address (URL encoding and all).

If you're sending by mailto, you also have to specify an auxiliary <FORM> attribute with the following syntax: ENCTYPE="text/plain" All it does is tell the browser to send the form data with an encryption type of "text" (so that the data sent is readable). Also realize that mailto forms are not supported by all browsers. Some will open up an email form instead of sending when the "submit" button is pressed (this seems to be the case even with more recent Internet Explorer browsers 4.0+).

METHOD determines how the form information is sent (i.e. the "method" in which the data is transmitted). The two valid values it can have are GET and POST. What's the difference? Well...

• GET sends the information as a query string (which is attached via a ? sign to the page/ACTION URL). Using this in conjunction with the mailto action will result in all the encoded form data to be concatenated in the subject line!
• POST sends the information unobtrusively and hidden from the browser viewing. As well, the amount of data you can transmit via this method is a lot greater.

You can specify the name of the form for "targeting" with JavaScript with the NAME attribute. (Just keep in mind that Netscape 2.0- browsers don't support forms with NAMEs.)

Also, you can specify the TARGET (much like targeting in links) to specify where the output will occur. Finally, if you don't specify the ACTION or METHOD of the form, nothing will happen when you click the Submit button unless you're using it with JavaScript, but you can explore how that language interacts with HTML forms in Mike's tutorial :)

Text Input

This is the simplest type of form field. It creates a white box that you can type letters,words, sentences etc into. Only supporting up to one paragraph, if you hit enter, the form will take that to mean "process the form data now." In its most basic form it looks like: <INPUT TYPE="text">. With this, you've just said that you want to create an INPUT form field (to get input from the user apparently) and that it should accept input in the form of text. One other thing you should specify is the NAME of the input for this field.

<FORM ACTION="aFormScript.cgi" METHOD="POST">
What's your favorite TV show? <INPUT TYPE="text" NAME="show">
</FORM>

Which creates a text field (wow!):

Just type in some stuff and hit your 'Enter' button when you're done. The form will contact our dummy cgi script (which I've set up to just read your input and split it back out in your face =]). If you want to follow along with my examples and don't have cgi, you can either refer the ACTION variable to our dummy script at http://library.advanced.org/26297/html/aFormScript.cgi (with the full URL I just typed out) or use mailto to send yourself the form data.

You can also specify some default text. For example, the following:

And having by default the "http://" was accomplished by adding the highlighted text (the VALUE attribute) in the code below:

<FORM ACTION="aFormScript.cgi" METHOD="POST">
Your Homepage: <INPUT TYPE="text" NAME="url" VALUE="http://">
</FORM>

If you're receiving this data, you may want to put a lid on the input from this field (don't want to get maliciously spammed by very bored people, now do you?). To do that, you can specify the MAXLENGTH for this form field. For example:

<INPUT TYPE="text" NAME="url" VALUE="http://" MAXLENGTH=60>

Submit and Reset

Now that we've actually been enpowered by text fields, we'll want to be able to actually create submission and reset buttons. And that turns out to be quite simple :) They are similar to text fields except that they have their own TYPE denomination. Just see what I mean when I say that

<INPUT TYPE="submit">
<INPUT TYPE="reset">

create the proper buttons. Let's add that to our text field form:

Code	What you see in the browser:
<FORM ACTION="aFormScript.cgi" METHOD="POST"> What's your favorite TV show? <INPUT TYPE="text" NAME="show"> <INPUT TYPE="submit"> <INPUT TYPE="reset"> </FORM>	What's your favorite TV show?

Go ahead and test out the form and buttons if you're new to this (or have a penchant for pushing buttons).

Text Area

This creates a two dimensional block for inputting text. Any default text is NOT specified by a VALUE parameter, and that is, perhaps why it is unique :)

<TEXTAREA>
Text is sandwiched in between these two container tags. </TEXTAREA>

What you must specify, however, are the ROWS and COLS of this text box (that "spans an area"). A textarea with 5 ROWS and 50 COLS would look like this:

You can also specify that the text cannot scroll off of the visual portion of the textarea by specifying the WRAP attribute to equal "virtual" (what you can "see"). Oh, and don't forget to specify the NAME in the opening <TEXTAREA> tag!

Sometimes it is used to display "cut-and-paste" code. If this is the case, you can add these JavaScript expressions to the textarea (or text input field) so that, in Internet Explorer, the entire block of text will be automatically highlighted and ready to Ctrl-Insert (copy). Netscape Navigator will highlight the whole block of text as soon as the user clicks once in the box: onMouseOver="this.focus()" onFocus="this.select()"

So it would look like:

<FORM>
<TEXTAREA COLS=50 ROWS=5 onMouseOver="this.focus()" onFocus="this.select()">
Text is sandwiched in between these two container tags.
</TEXTAREA>
</FORM>

Try putting your mouse over the text and/or clicking on it to highlight the text. (May require a higher-end browser)

Radio Buttons

A radio button has HTML code similar to the text input field, except for the TYPE, which equals "radio".
<INPUT TYPE="radio" NAME="RadioButtonTest">Choice 1

Unlike the checkbox, only one radio button per form can be selected. If you wish a default radio button choice to be selected (just in case the user forgets, then you can add CHECKED to the radio code:
<INPUT TYPE="radio" NAME="RadioButtonTest" CHECKED>Choice 1

Check Boxes

A checkbox has its own input type which looks like the following:
<INPUT TYPE="checkbox" NAME="CheckBoxName">

You can have it checked by default by adding a VALUE attribute and the phrase CHECKED appended to the checkbox code:

Code	What you see in the browser:
<FORM> <INPUT TYPE="checkbox" NAME="CheckBoxName" VALUE="Yes" CHECKED>Forward all replies to you? </FORM>	Forward all replies to you?

The power here is that you can have more than one checked box, unlike radio buttons (where only one button can be selected).

Password Input

This is a simple modification of the basic text field. All you have to do is swap the TYPE="text" for TYPE="password" and you've got a field that inputs and masks your input with either * or ^ characters. All the other attributes apply.

Selection Menu

Check out this example of a selection menu. It allows you to choose one choice from a drop/pull down menu. Currently it doesn't do anything other than let you select a choice but with a little JavaScript, it can become quite a handy navigational device.

How was this done? Unlike the text input field and its derivative codes, this one has its own tag: <SELECT> ... </SELECT>. Once you have that, to add an option, you write within these container tags: <OPTION>Choice #

So, to create the form created above, we would write:

<FORM>

<SELECT>
  <OPTION>Choice 1
  <OPTION>Choice 2
  <OPTION>Choice 3
  <OPTION>Choice 4
</SELECT>

</FORM>

By default, the first option you specified is selected, however, if you want to have a different one selected, you could add the SELECTED attribute to its <OPTION> tag. For example,

<SELECT>
  <OPTION>Choice 1
  <OPTION SELECTED>Choice 2
  <OPTION>Choice 3
  <OPTION>Choice 4
</SELECT>

would result in having Choice 2 show up as the default value:

The NAME and VALUE attributes apply to this type of form, with one exception; the choice's VALUE must be specified within its <OPTION>.

<SELECT NAME="SelectMenuName">
  <OPTION VALUE="1">Choice 1
  <OPTION VALUE="2" SELECTED>Choice 2
  <OPTION VALUE="3">Choice 3
  <OPTION VALUE="4">Choice 4
</SELECT>

Multiple Selection Menu

This is very similar to the regular selection menu except for two attributes that must be added to the opening <SELECT> tag: MULTIPLE and SIZE.

MULTIPLE allows the form's user to select/highlight more than choice (sounds simple enough =]). SIZE determines the vertical "length" of the selection box. More specifically, it denotes how many choices to show at once.

The following example has a size of 3, showing 3 out of the 4 choices in this selection menu. It also has multiple selection enabled:

<FORM> <SELECT NAME="MSelectMenuBox" SIZE="3" MULTIPLE>   <OPTION Value="1">Choice 1   <OPTION Value="2">Choice 2   <OPTION Value="3">Choice 3   <OPTION Value="4">Choice 4 </SELECT> </FORM>

Choice 1 Choice 2 Choice 3 Choice 4 Click/hold down your mouse button and drag down to select more than one choice.

Since you cannot do something like select Choice 1 and 3 only (Choice 2 is part of the package), its use is limited :(

There is a very cool piece of cut-and-paste JavaScript that allows you to swap values in between two multiple selection menus in a form which you'll be able to find in the script downloads section :)

Locking Text

For some reason, you may want to disallow users from entering data in a certain field that displays certain information that was outputted by default. There are currently 4 ways I've found to do the trick (2 of which use JavaScript). I'll cover the JavaScript methods because they're quite quick and simple.

1. One quick addition to the text input field which has been highlighted: <INPUT TYPE="text" NAME="Box" VALUE="Your Text" onFocus="this.blur()"> This will not allow your cursor to be placed in the text box. Lower-end browsers may ignore this JavaScript syntax.
2. Another JavaScript method is to use the onChange event handler: <INPUT TYPE="text" NAME="Box" VALUE="Your Text" onChange="this.value='Your Text';"> Basically, it changes the value in the text box back to this.value when anything is changed in the field.
3. The attribute READONLY does not "lock" the value into place per se, however, users can modify the data in the text box (when it is submitted, the value that will be used is the default).
   Example: <INPUT TYPE="text" NAME="Box" VALUE="Your Text" READONLY>
4. The attribute DISABLED will shade out your text box in Internet Explorer, however, doesn't visibly shade/lock out any modifications in Netscape. The downside is that any disabled text fields will not be passed as data in the form.
   Example: <INPUT TYPE="text" NAME="Box" VALUE="Your Text" DISABLED>

File Upload

It is (not too surprisingly) similar to a text field. The difference being their TYPE value. This input tag also accepts specifying certain file types as well (although even higher-end browsers do not fully support this). How about an image upload?

<INPUT TYPE="file" NAME="ImageFile" ACCEPT="image/jpg, image/gif">

You can, of course, leave out the accept attribute since it doesn't work anyway :) NAME can be any name you choose. It will also handily create a "Browse" button for the user to select the file.

<FORM ENCTYPE="multipart/form-data" >
<INPUT TYPE="file" NAME="ImageFile">
</FORM>

If you want to be able to upload files to your server, you'll have to be able to run CGI scripts (the "gateway" interface which will give you server access to upload). You can download a simple upload script in our Perl resources section.

Field Background Color

This little CSS trick doesn't work in Netscape 4.03- browsers, although it will in Internet Explorer 4.0+ ones. All you need to do is add a STYLE attribute to your input field's opening (or single) tag, whether it be text, selection menu, or textarea. Let's see a simple example with a regular text input field.

With the modifications:
<INPUT TYPE="text" NAME="TextBox" VALUE="http://" STYLE="background: black; color: #c0c0c0">

If you don't see any noticeable changes, then your browser probably doesn't have extensive support for CSS syntax. To find a comprehensive list of attributes, check out our Cascading Style Sheet reference section.

Image Buttons

Sometimes those regular gray and square push buttons aren't very cool looking in the way it clashes with your site design. Well, rest assured, there is an alternative! By creating an image button, you can easily preserve the fluidity of your design.

Well how? <INPUT TYPE="image" SRC="theButtonImage.jpg" VALUE="submit"> This would be sufficient for a submit button, however, a reset button is trickier (since a value of "reset" would not create a reset button)

You could, however, use JavaScript to reset the fields. Include a function like the following in your header:

<SCRIPT Language="Javascript">
<!-- Begin
function clearFields() {
   document.formname.elements[1].value = "";
   document.formname.elements[2].value = "";
}
//-->
</SCRIPT>

Where formname is the name of the form. Make sure to write as many document.formname.elements[#].value=""; for each form field you want cleared upon resetting.

Then the following would be the code for the reset button:
<INPUT TYPE="image" SRC="theResetButton.jpg" VALUE="Clear" onClick="clearFields();">

But make sure you add the NAME="formname" attribute to your <FORM> tag or else you will get a "formname not defined" JavaScript error!

5 - Tables - So Good You Could Eat Off of Them