Now let’s take a look at how we can use ratio buttons to gather information. Ratio buttons are good for displaying a certain amount of information or selections in a row and are sometimes better to use then pop up boxes. So let’s take a look at how they are properly used so we can better understand how to use them for our on forms.

Ratio buttons are mainly used for deciding yes or no or picking one thing from another. They can’t be used to check more then one thing at a time within the same group. Let’s take a look at an example using ratio buttons.

Code Example

<form name="form1" method="post" action="mailto:email@domain.com">
<p> Name:
<input type="text" name="name">
<br>
Company:
<input type="text" name="company">
<br>
Contact Name:
<input type="text" name="company_name">
<br>
Contact Number:
<input type="text" name="contact_number">
<br>
E-Mail Address:
<input type="text" name="email_address">
<br>
Reason For Contacting?
<select name="select">
<option selected>Business</option>
<option>Information</option>
<option>Personal</option>
<option>Comments</option>
</select>
<br>
Product Pack?
<input type="radio" name="radiobutton" value="radiobutton">
Yes
<input type="radio" name="radiobutton" value="radiobutton">
No <br>
Questions &amp; Comments
<textarea name="questions_comments"></textarea>
</p>
</form>

Output Example

Name:
Company:
Contact Name:
Contact Number:
E-Mail Address:
Reason For Contacting? Business Information Personal Comments
Product Pack? Yes No
Questions & Comments

As we can see from the output, we can only choose yes or no from the ratio boxes. So they are really only used to choose from one option to the next and not multiple options. We’ll take a look at multiple option boxes later, which are called check boxes and an infinite amount can be checked within a form.

Let’s take a look at each part of the ratio buttons so we can better understand them.

<input type="radio" name="radiobutton" value="radiobutton"> - Each ratio button will start and look exactly like this. We can change the name of the ratio button to anything we’d like but the type and values should stay the same. The name will be what’s displayed in the information we get from each form.

The above is just about it when it comes to ratio buttons, there isn’t any closing tag, just an opening tag.

Now let’s take a look at check boxes. Check boxes are setup very similar to ratio buttons but can be checked and selected as many times as a user would like. Let’s take a look at an example utilizing check boxes instead of ratio boxes.

Code Example

<form name="form1" method="post" action="mailto:email@domain.com">
<p> Name:
<input type="text" name="name">
<br>
Company:
<input type="text" name="company">
<br>
Contact Name:
<input type="text" name="company_name">
<br>
Contact Number:
<input type="text" name="contact_number">
<br>
E-Mail Address:
<input type="text" name="email_address">
<br>
Reason For Contacting?
<select name="select">
<option selected>Business</option>
<option>Information</option>
<option>Personal</option>
<option>Comments</option>
</select>
<br>
Product Pack? <br>
Product Pack 1
<input type="checkbox" name="checkbox" value="checkbox">
<br>
Product Pack 2
<input type="checkbox" name="checkbox2" value="checkbox">
<br>
Product Pack 3
<input type="checkbox" name="checkbox3" value="checkbox">
<br>
Questions &amp; Comments
<textarea name="questions_comments"></textarea>
</p>
</form>

Output Example

Name:
Company:
Contact Name:
Contact Number:
E-Mail Address:
Reason For Contacting? Business Information Personal Comments
Product Pack?
Product Pack 1
Product Pack 2
Product Pack 3
Questions & Comments

As we can see from the above example, we can check as many of the check boxes as we’d like. These are great for users to pick from more then one option at once. We can also see that they are setup exactly the same as the ratio buttons, but with a different type. Again the name can be change to whatever we’d like.