Lists and Forms
By Lisa Hui
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.
These are the simplest of the all the types of lists (although I'm not implying that ordered lists are any more difficult).
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:
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.
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:
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>).
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>:
It produces the following list:
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:
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">
The code above produces the following effect:
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:
Produces the following effect:
Here are some other TYPE values that you might find useful :)
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 :)
How did I code that? Well, check it out for yourself:
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.
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.
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:email@example.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...
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">
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">
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
create the proper buttons. Let's add that to our text field form:
Go ahead and test out the form and buttons if you're new to this (or have a penchant for pushing buttons).
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 :)
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!
So it would look like:
Try putting your mouse over the text and/or clicking on it to highlight the text. (May require a higher-end browser)
A radio button has HTML code similar to the text input field, except for
the TYPE, which equals "radio".
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:
A checkbox has its own input type which looks like the following:
You can have it checked by default by adding a VALUE attribute and
the phrase CHECKED appended to the checkbox code:
The power here is that you can have more than one checked box, unlike radio buttons (where only one button can be selected).
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.
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:
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,
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>.
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:
Since you cannot do something like select Choice 1 and 3 only (Choice 2 is part of the package), its use is limited :(
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" >
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:
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.
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)
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:
©1999 Team 26297 "Ad Infinitum Web." All rights reserved. Any reproduction of this document for commercial or redistribution purposes without the permission of the author is forbidden.