HTML tutorial #5 - select boxes and radio buttons

Hello, my name is Cole Snydle. In my tutorials i will be using a mixture of PHP and HTML. One of my favorite hosts (a host is what you "host" your website on) is http://www.freehostia.com/. The good thing about Freehostia is that you can code from the site and you can host PHP and MySql. now just open up "Notepad", always and we will begin the tutorial.

Today i will teach you about drop down boxes (select boxes), and radio buttons. the one thing you must know is, that you are goin to learn how to display your options, not save them (unless i decide to throw in some AJAX in the tutorial). shall we begin?

Here is the code we had last time, we are going to add on to this throughout the lesson.

Code:: <html>
<body>
<BODY bgcolor="black">
<center><h1><font color="red">HTML tutorial #1</font></h1></center>
<a href="http://www.bounty-wars.co.nr/">
<img border="0" src="http://i217.photobucket.com/albums/cc1/estefani84/Stewie_Griffin.gif" width="65" height="38">
</a>
<marquee><font color="magenta">Hey, this is marquee</font></marquee>
<br>
<br>
<br>
</body>
</html>

[glow=red,2,300]Drop Down Boxes[/glow]

So lets break down the drop down box option

The Block Of Code

Code:: Gender:<select name="Gender">
<option>Male</option>
<option>Female</option>
</select>

In My website, we have it rigged with PHP to save the data and store it, but right now ill just show you my friend and i's script for our register menu

Code:: Class:<select name="class">
<option>Mage</option>
<option>Archer</option>
<option>Daemon</option>
<option>Vampire</option>
<option>Monk</option>
<option>Bard</option>
<option>Cleric</option>
<option>Druid</option>
<option>Rogue</option>
<option>Necromancer</option>
<option>Paladin</option>
<option>Assassin</option>
<option>Barbarian</option>
<option>Knight</option>
<option>Thief</option>
<option>Battlemage</option>
<option>Custom</option>
</select>

now adding the gender box to the main code

Code:: <html>
<body>
<BODY bgcolor="black">
<center><h1><font color="red">HTML tutorial #1</font></h1></center>
<a href="http://www.bounty-wars.co.nr/">
<img border="0" src="http://i217.photobucket.com/albums/cc1/estefani84/Stewie_Griffin.gif" width="65" height="38">
</a>
<marquee><font color="magenta">Hey, this is marquee</font></marquee>
<br>
<br>
<br>
Gender:<select name="Gender">
<option>Male</option>
<option>Female</option>
</select>
</body>
</html>

[glow=red,2,300]Radio Buttons[/glow]

Now lets do radio buttons, my example is a simple 3 button script, heres the code, then ill break it down so you can understand it better-

Code:: <form action="">
Mage:
<input type="radio" checked="checked"
name="class" value="mage">
<br>
Ranger:
<input type="radio"
name="class" value="ranger">
<br>
Warrior:
<input type="radio"
name="class" value="warrior">
</form>

Now as you can see its a longer script or block of code, now, you see <form action="">, the "" is left with nothing because you dont want it to take action on anything, is you had either an AJAX script that would save that data and display it, you woul put <form action="locationwerescriptis.correctextension">

now it says <input type="radio", as we saw in "HTML tutorial #4 - password protect a page", you could put <input type="text"> and it would change the form completely. Now the name and value you just assign with the option and what theyre filling out.

that concludes another tutorial bye Cole Snydle, ¿t0p h4x0r?

Final Code

Code:: <html>
<body>
<BODY bgcolor="black">
<center><h1><font color="red">HTML tutorial #1</font></h1></center>
<a href="http://www.bounty-wars.co.nr/">
<img border="0" src="http://i217.photobucket.com/albums/cc1/estefani84/Stewie_Griffin.gif" width="65" height="38">
</a>
<marquee><font color="magenta">Hey, this is marquee</font></marquee>
<br>
<br>
<br>
Gender:<select name="Gender">
<option>Male</option>
<option>Female</option>
</select>
<br>
<br>
<form action="">
Mage:
<input type="radio" checked="checked"
name="class" value="mage">
<br>
Ranger:
<input type="radio"
name="class" value="ranger">
<br>
Warrior:
<input type="radio"
name="class" value="warrior">
</form>
</body>
</html>

» HTML tutorial #1- base of a website
» HTML tutorial 3 - minor tweaks/ just for fun
» HTML tutorial #2- adding images/ fun with pictures
» HTML/PHP tutorial #4 - password protect a page
» i dont get html