PGF Gamers
Hi, and thanks for visiting =D

Login to post in forums and become more than a member!

Please wait a moment for the chatbox to load ;D


Where the fun begins!
 
Homedead forum =(FAQSearchMemberlistUsergroupsRegisterLog in
!!!!I am considering a full site overhaul to re-do everything. I will discuss with the other staff. If it happens the forum may go down for a day or two-Trevor!!!!

Share | 
 

 HTML tutorial #5 - select boxes and radio buttons

View previous topic View next topic Go down 
AuthorMessage
t0ph4x0r
Lieutenant
Lieutenant


Number of posts : 6
Age : 27
ranking : 3188
forum activity : 0
Registration date : 2009-02-01

PostSubject: HTML tutorial #5 - select boxes and radio buttons   Sun Feb 01, 2009 8:00 am

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://illiweb.com/fa/pbucket.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://illiweb.com/fa/pbucket.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://illiweb.com/fa/pbucket.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>
Back to top Go down
View user profile
 
HTML tutorial #5 - select boxes and radio buttons
View previous topic View next topic Back to top 
Page 1 of 1
 Similar topics
-
» Tutorial: CSS Notification Boxes
» problem in selecting radio button in selenium RC
» How do i get the Xpath value for a radio button so i can click the button on a form
» how to select an option from select box of a form
» How to select all in codebox for phpbb2?

Permissions in this forum:You cannot reply to topics in this forum
PGF Gamers :: Computers and Internet :: Building websites :: HTML-
Jump to: