Master Class Preparation - Lists, forms and anchors

Lists

There are three kind of lists: bulleted, numbered and definition. This page demonstrates all three of them.
The first two - bulleted and numbered - look much alike. This whole chapter on lists uses a numbered list for organizing its paragraphs. Click the button containing the numbers. You'll get several tags. The OL tags indicate the start and end of the list. The LI tags indicates a separate list item. If you prefer a bulleted list simply click the button with the bullets, right next to the numbered list button. Instead of the OL tags you will get UL tags.
The definition list is demonstrated in the chapter on forms. It is meant to be used for definitions and its descriptions. Click the book and questionmark button. You will get three kinds of tags. The DL tags indicate the start and end of the list. The DT tag announces the definition and the DD tag its description.
A tip: You can add list tags to an existing list by placing each item on its own line, selecing the whole as block and then clicking the list button. Each line will be interpreted as a list item. Make sure not to include empty lines in the selected block.

Forms

Forms are simple as long as you remember to place all form elements between the form tags. Take a look at the source of this document. I removed the action attribute of the form tag. Except for that this document is a working form.

By the way, also notice the promised demonstration of definition lists.

<FORM method=post action="mailto:alias@provider"></FORM>: All elements of a form need to be between the form tags. In this example the form is send by email to the person at fictive address alias@provider. For most users of Anansi sending by email is the only way to get the results. If you run your own webserver you can of course use CGI. But if you're that advanced you don't need my advice.

<INPUT type="text" name="whatever" value="This is a textbox." size=16,1 maxlength=20>: The name attribute is necessary to distuingish the returned data of multiple input fields. The value attribute tells the browser if and what should be displayed as default text. Usually you'll leave this empty. As you see both the size of the textbox and the maximum length of the text it will accept can be controlled.

<INPUT type="password" name="User password" VALUE="Secret" size=16,1 maxlength=20>: It's like the textbox, but secured.

<INPUT type="hidden" name="User password" value="something">: Unvisible to the visitor of your homepage. Usually used with advanced applications, think about JavaScript or CGI.

<INPUT type="checkbox" name="Whatever" value="something" checked>: The little v is there due to the checked attribute. If you don't want the v, leave out the attribute.

<INPUT type="radio" name="morechoices" value="choice1" checked>: This is the thing that allows you to make choices.
Choise 1.
Choice 2.
The trick is to give related radiobuttons the same name but different values. Check the source to see how it's done.

<TEXTAREA name="write some..." wrap rows=3 cols=40> </TEXTAREA>: The exeption to the rule, the textarea tag is not single but comes as a container. The wrap attribute is little know, but makes it so much smoother on browsers that support it.

<SELECT size=1 name="More choices"> <OPTION SELECTED> <OPTION> </SELECT>: Text after option selected is visible, text after the option tags appears when you open the box.

<INPUT type="reset" value="reset">: Useless for short forms, dangerous with long forms. But who am I to judge. Reset clears everything a user has filled in.

<INPUT type="submit" value="submit">: The most important part, the submit button. If you have used the correct email addres in the form tag, pressing the button will deliver the complet form. This button here will only give an error message because I left out the email address. There's nothing wrong in getting email, I just don't need to see your trials.

One finishing remark: Nothing is harder than trying to make forms look good on all browsers. They all have their own way of interpreting the size attributes...

Anchors

Anchors allow you to make links to a specific position in a document. Select a small piece of text that you want to use for the anchor, ie a heading or title and click the target or name button. This is how an anchor will look: <A name="Forms">Forms</A>.
To make a link to this anchor, use the # sign and append the name. Ie, <A href="#Forms">Forms</A> or for real Forms. If the anchor is on another page, simply prefix it with the normal address, like <A href="man_form.html#Forms">Forms</A>
Anansi 1.1 may make linking to anchors a little easier. By the way, this chapter demonstrated a bulleted list.

Next: More about stylesheets

Return to the index