XHTML and CSS - Check Boxes & Radio Buttons
Check Boxes & Radio Buttons
In this tutorial we're going to be looking at some different types of input because sometimes you want the user to enter a unique piece of information, a username or password or something, but other times your going to want the user to pick from a set list. The first thing we need is our form, I'm going to use the form I made in the last tutorial.
<html> <head> <title> This is the title. </title> <style type="text/css"> </style> </head> <body> <form> Username:<br/> <input type="text" name="username" maxlength="20"><br/> Password:<br/> <input type="password" name="password"><br/> </form> </body> </html>
First we're going to give the user three choices, either male, female or other, I doubt we really need the other but you never know. For this we're going to be using radio buttons, a radio button is pretty much a few check boxes where you can only select one check box. To do this we use the input tag and set the type to radio, then set the name to sex for all of our radio boxes this is so they all belong to the same group of radio boxes encase you have multiple set's of radio boxes. The next attribute we need to set is the value, this would be the bit of data that is submitted to the script we're submitting to, I'm going to make a radio box for male, female and other.
<html> <head> <title> This is the title. </title> <style type="text/css"> </style> </head> <body> <form> Username:<br/> <input type="text" name="username" maxlength="20"><br/> Male: <input type="radio" name="sex" value="male"> Female: <input type="radio" name="sex" value="female"> Other: <input type="radio" name="sex" value="other"> <br/> Password:<br/> <input type="password" name="password"><br/> </form> </body> </html>
When you view this in your browser you'll see that you can only select one of the radio boxes at a time. You might be wondering what if I want to let the user select more then one thing, you can do this with check boxes, a check box is pretty much the same a radio box but you can select more then one box, the only difference is we need to set the type of the input to checkbox rather then radio, I'm just going to add in favorite foods for this example.
<html> <head> <title> This is the title. </title> <style type="text/css"> </style> </head> <body> <form> Username:<br/> <input type="text" name="username" maxlength="20"><br/> Male: <input type="radio" name="sex" value="male"> Female: <input type="radio" name="sex" value="female"> Other: <input type="radio" name="sex" value="other"> <br/> Select your favorite food: </br> Pizza: <input type="checkbox" name="food" value="pizza"> Chips: <input type="checkbox" name="food" value="chips"> Pasta: <input type="checkbox" name="food" value="pasta"><br/> Password:<br/> <input type="password" name="password"><br/> </form> </body> </html>
Now when you view this in your browser you'll see that you can select as many check boxes as you want and you still can only select one radio box.

Page generated in 0.0054 seconds.