Lists and Forms

• Description : In this tutorial you will learn how to create Lists and Forms.
• Language : HTML
• Date Added : 2nd October, 2009

Welcome to another tutorial. In this tutorial you will learn how to create Lists and Forms in HTML.

So first let's look at lists. Lists come in two forms, ordered and unordered. Unordered means the list has no numbering and just displays a bullet point for each item in that list. Ordered will display a number instead of a bullet point. Below is the code for both, the first is an unordered list:

Code :

<ul> <li>Point One</li> <li>Point Two</li> <li>Point Three</li> </ul>

Output:

• Point One
• Point Two
• Point Three

Code :

<ol> <li>Point One</li> <li>Point Two</li> <li>Point Three</li> </ol>

Output:

1. Point One
2. Point Two
3. Point Three

As you can see the syntax is extremely similar. The <li> tag stands for "List Item". You can nest lists one inside the other like below:

Code :

<ol> <li>Point One</li> <ul> <li>Sub Point One</li> <li>Sub Point Two</li> </ul> <li>Point Two</li> <li>Point Three</li> </ol>

Output:

1. Point One
• Sub Point One
• Sub Point Two
2. Point Two
3. Point Three

Now onto something a little more complex, forms. A form always starts with a line similar to this:

Code :

<form action="mailto:joebloggs@joebloggs.com" method="post" enctype="multipart/form-data">

This line starts the form, don't worry too much about the enctype or the method. The method only details how the form is submitted, whether it's visible in the URL or not. Now below are the main form elements used:

Code :

<input type="text" name="name" /> Male<input type="checkbox" name="male" />Female<input type="checkbox" name="female" /> Dog<input type="radio" name="dog" />Cat<input type="radio" name="cat" /> <textarea name="comments"></textarea> <select name="cars"> <option value="Ferrari">Ferrari</option> <option value="Ford">Ford</option> <option value="Renault">Renault</option> </select> <input type="submit" name="submit" value="submit" />

The mainly used form elements are listed above. Below is the full working code of a form:

Code :

<form action="mailto:joebloggs@joebloggs.com" method="post" enctype="multipart/form-data"> <input type="text" name="name" /><br /> Male<input type="checkbox" name="male" />Female<input type="checkbox" name="female" /><br /> Dog<input type="radio" name="dog" />Cat<input type="radio" name="cat" /><br /> <textarea name="comments"></textarea><br /> <select name="cars"> <option value="Ferrari">Ferrari</option> <option value="Ford">Ford</option> <option value="Renault">Renault</option> </select><br /> <input type="submit" name="submit" value="submit" /> </form>

Output:

MaleFemale
DogCat

Ferrari Ford Renault

When only knowing just HTML the uses of a form are limited to mailing the content straight to an address. If you choose to go on to learn PHP forms become a lot more useful.

In the next tutorial we will look at frames!

Previous		Next

Login Required