Freelance Writing Jobs | Today's Articles | Sign In

Articles
Writers
 
Browse Sections
Home HTML Lessons

Forms - part 2


There is no need for an </option> tag. An example will make it clear how to use the <select>, <option> & </select> tags properly:

<form>
<select name="selection" size=3 multiple>
<option value="1" selected>One
<option value="2">Two
<option value="3">Three
<option value="4">Four
<option value="5">Five
<option value="6">Six
</select>
</form>

This creates a list that looks like the image shown.

You will notice that there are 6 options but only three are displayed at a time, this is because I set "size=3". You will also notice that "One" is automatically selected when the page is loaded, this is because I specified "selected" in the <option> tag for that option.

Another attribute that I set without telling you about is "multiple" in the <select> tag. If this is selected it allows your visitors to choose more than one option by pressing the SHIFT or CTRL keys while selecting.

That basically sums up selection lists. They may seem a bit difficult at first - if so, read back over this section until you understand - now go practice: open up notepad and make some select lists of your own - save with a *.html or *.htm extension and check it out in your browser.

A CHECKBOX
A checkbox appears as a square box, if it is checked the box has a tick in it. It is very simple to use. This is the full tag:

<input type="checkbox" name="check" value="yes" checked>

name: sets the name of the checkbox

value: this is the same as the value option that I explained for selection lists

checked: if this is set then the box will already be checked when it is loaded

So that's selection lists and checkboxes. How about a sample code:

<html>
<head>
<title>Practice Form</title>
</head>
<body>
<form>
Please select your favourite sport from the list:<br>
<select name="sport" size=3>
<option value="bask">Basketball
<option value="foot">Football
<option value="socc">Soccer
</select><br>
IF OTHER: <input type="text" name="other" size=30><br>
What kind of television shows do you like to watch?<br>
<input type="checkbox" name="comedy" value="sitcom">Comedy<br>
<input type="checkbox" name="documentary" value="docu">Documentaries<br>
<input type="checkbox" name="news" value="news">News<br>
<input type="checkbox" name="quiz" value="quiz">Quiz-Shows<br>
THANK YOU
</form>
</body>
</html>

This form doesn't do anything really, it's just a practice, check out the page at http://www.usheen.com/suite101/form.html

Now you can practice by making your own sample pages. This article wasn't so short after all. I hope it didn't feel too disjointed - my brain is slightly tired at the moment.

If you want you could read my other complete forms tutorial @ http://www.usheen.com/html/tut9.html

Please rate the article below
Thanks for learning
Oisin

The copyright of the article Forms - part 2 in HTML Lessons is owned by Oisin Prendiville. Permission to republish Forms - part 2 in print or online must be granted by the author in writing.

Go To Page: 1 2

Articles in this Topic    Discussions in this Topic