HTML for the complete beginner

Forms

To use forms we really need some sort of server side programming language, like CGI or with a database etc, which is way to advanced to go into here.
We can however use forms with a mailto: tag (details sent via email) and/or with the help of JavaScript, we'll look into these two ways briefly to give you an idea, if you want to learn more about forms you'll find some links on the 'related links' page.

First off we declare the form by way of tags, yep form tags:
<form>
<input type="??" name="??">
<input type="??" name="??">
</form>

or

<form>
<select name="??">
<option value="?">choice 1</option>
<option value="?">choice 1</option>
</select>
</form>

or we can combine the two. These are the basic forms, but with nothing for it to do is pretty useless, first let me explain the parts of the make up.

<form> and </form> start and end the form like all HTML tags.
<input ... > part is the form itself, the contents of this make the form what it will be.
type="??" is how the form field will display, such as: text, radio, checkbox, submit.
<select> and </select> start the selection part of the form.
name="??" is the name of the selection, name is the ID part of the form
<option> and </option> give the options to be selected
value="?" is the value or contents of that option

Here are a few examples of input types

	<form> <type="text"> </form>
	<form> <type="radio"> </form>
	<form> <type="checkbox"> </form>
	<form> <type="file"> </form>
	<form> <type="image" src="graphics/smile.gif"> </form>
	<form> <type="hidden"> </form>
	<form> <type="password"> </form>
	<form> <type="reset"> </form>
	<form> <type="submit"> </form>

As you can see there are quite a few of them, but that's only touching the surface of ways forms work. I think since we can't use a lot of this on free servers (need server side scripts) we'll just work on the mailto option.
The mailto option is mainly used I think for feedback forms, like so

When we make a form it's always good to use the <label> tag as well, this allows people to click on the actual name beside the form type as well as the bit itself, here is an example and how we do it.

<form><label for="name">Name: </label><input id="name" type="text" />
<label for="human">Are you human?</label><input id="human" type="checkbox" /></form>

Now click on and off the words beside the inputs, notice how the focus is drawn to that section

The send button has been disabled for this example.

How I did the above:

<form action="mailto:you@youraddress.com" method="post" enctype="text/plain">

<input type="text" name="name" size=15> your name<br>
<input type="text" name="email" size=15> your e-mail<br>
<input type="hidden" name="subject" value="feedback form">

<select name="height">
<option value="under 3'">under 3 foot </option>
<option selected value="between 3 and 6 foot">between 3 and 6 foot</option>
<option value="over 6 foot">over 6 foot</option>
</select> How tall are you?<br><br>

<textarea name="details" cols="40" rows="5">Type something here</textarea>

<br><br>

This form example is
<input type="radio" name="opinion" value="silly" checked>silly
<input type="radio" name="opinion" value="ok">ok
<input type="radio" name="opinion" value="neato">neato<br><br>

Are you confused
<input type="checkbox" name="umm" value="yes">yes
<input type="checkbox" name="umm" value="no">no
<input type="checkbox" name="umm" value="maybe" checked>maybe

<br><br>weather today is
<select name="weather">
<option selected value="">pick one</option>
<option>hot</option>
<option>warm</option>
<option>average</option>
<option>raining</option>
<option>storms</option>
<option>other</option>
</select><br><br>

<input type="submit" value="send">
<input type="reset" value="clear">

</form>

Its probably not the best way to show you but hey it works, In the source code you'll see I placed it all together, but in this example I spaced them as to help you determine what's what
If you'll notice the above starts and ends with the <form> and </form> tags, and everything in between them is not nested but started and finished before the other one starts. I'll leave you to study over this example, for those who don't want to know there are programs you can get that will make forms for you that can be got on the related links page.

But before you hurry off, here is another example, this is using JavaScript but isn't sending information, rather just a simple pop up, try it

Pop ups can be really annoying so take it easy with this way, but this is how I did it, I wont explain it as this is a HTML tutorial not a JavaScript one

<form name="form1"> Does this page need work?<br>
<select name="list" size="1" onChange="top.location.href=this.form.list.options[this.form.list.selectedIndex].value">
<option selected value="choose">-- choose an answer --
<option value="javascript:alert('yep, I think you\'re right, I\'ll get onto it soon, Thanks for bringing it to my attention');">yes, i think so
<option value="javascript:alert('You don\'t get out much do you');">no, i don't think so
<option value="javascript:alert('Did you not read the question?');">none of the above
</select>
</form>