www.webdeveloper.com
Results 1 to 2 of 2

Thread: How Do I add description to radio buttons and limit number choices from a list

  1. #1
    Join Date
    Nov 2013
    Posts
    1

    How Do I add description to radio buttons and limit number choices from a list

    Hi Everyone,

    I am trying to setup a webpage to track a number of people coming to an event and allow users to select a limited number choices 2 out of 5 choices.
    Here is the code ( i gathered from various sources) I have. It looked like i am still missing some command to 1) show the description of choices and 2) limit the number of choices to 2 from 5 choices total
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    </head>

    <body>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Document1</title>
    </head>

    <body>
    <INPUT TYPE="radio" NAME="heading of button" VALUE="choice 1">

    <P>
    <INPUT TYPE="radio" NAME="heading of button" VALUE="choice 2">
    <P>
    <INPUT TYPE="radio" NAME="heading of button" VALUE="choice 3">
    <P>
    <INPUT TYPE="radio" NAME="heading of button" VALUE="choice 4">
    <P>
    <INPUT TYPE="radio" NAME="heading of button" VALUE="choice 5">
    <P>
    <INPUT TYPE="radio" NAME="heading of button" VALUE="choice 6">
    <P>
    <INPUT TYPE="radio" NAME="heading of button" VALUE="choice 7">
    <P>
    <INPUT TYPE="radio" NAME="heading of button" VALUE="choice 8">
    <P>
    <INPUT TYPE="radio" NAME="heading of button" VALUE="choice 9`">
    <P>
    <INPUT TYPE="radio" NAME="heading of button" VALUE="choice 10">
    <P>
    <INPUT TYPE="radio" NAME="heading of button" VALUE="choice 11">
    <P>
    <INPUT TYPE="radio" NAME="heading of button" VALUE="choice 12">
    <P>
    <P>


    <INPUT TYPE="checkbox" NAME="Signing_from" VALUE="Joes_page">
    <INPUT TYPE="checkbox" NAME="Signing_from" VALUE="Joes_page">
    <INPUT TYPE="checkbox" NAME="Signing_from" VALUE="Joes_page">
    <INPUT TYPE="checkbox" NAME="Signing_from" VALUE="Joes_page">
    <INPUT TYPE="checkbox" NAME="Signing_from" VALUE="Joes_page">

    <P>

    </body>
    </html>
    </body>
    </html>

  2. #2
    Join Date
    Oct 2013
    Posts
    543
    First let's clean up your existing code:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>Document1</title>
    </head>
    
    <body>
    <form action="scriptname">   <!--replace scriptname with the URL of your form handling script -->
    <p><input type="radio" name="heading of button" value="choice 1" /></p>
    
    <p><input type="radio" name="heading of button" value="choice 2" /></p>
    
    <p><input type="radio" name="heading of button" value="choice 3" /></p>
    
    <p><input type="radio" name="heading of button" value="choice 4" /></p>
    
    <p><input type="radio" name="heading of button" value="choice 5" /></p>
    
    <p><input type="radio" name="heading of button" value="choice 6" /></p>
    
    <p><input type="radio" name="heading of button" value="choice 7" /></p>
    
    <p><input type="radio" name="heading of button" value="choice 8" /></p>
    
    <p><input type="radio" name="heading of button" value="choice 9`" /></p>
    
    <p><input type="radio" name="heading of button" value="choice 10" /></p>
    
    <p><input type="radio" name="heading of button" value="choice 11" /></p>
    
    <p><input type="radio" name="heading of button" value="choice 12" /></p>
    <p></p>
    <p></p>
    
    <!-- I don't know why you need 5 unlabeled checkboxes for "Joes_page". But whatever, I'll leave them for the moment. -->
    <input type="checkbox" name="Signing_from" value="Joes_page" />
    <input type="checkbox" name="Signing_from" value="Joes_page" />
    <input type="checkbox" name="Signing_from" value="Joes_page" />
    <input type="checkbox" name="Signing_from" value="Joes_page" />
    <input type="checkbox" name="Signing_from" value="Joes_page" />
    
    </form>
    
    </body>
    </html>
    To add a description to an input:
    Code:
    <p><input type="radio" name="heading of button" value="choice 1" /> Choice 1</p>
    <p><input type="checkbox" name="Signing_from" value="Joes page" /> Joe's Page</p>
    etc.
    The answer to your second question is, "it depends." You see, radio buttons are exclusive inputs. That means that any radio button with the same name= value will exlude all the other radio buttons with that same value. So using your code, out of the 12 radio buttons only one could be selected. Checkboxes are not exclusive so a user could select more than one with the same name= attribute. But each should have a separate value= attribute as in:
    Code:
    <input type="checkbox" name="Signing_from" value="Joes page" /> Joe's page<br />
    <input type="checkbox" name="Signing_from" value="Freds page" /> Fred's page<br />
    <input type="checkbox" name="Signing_from" value="Toms page" /> Tom's page<br />
    <input type="checkbox" name="Signing_from" value="Georges page" /> George's page<br />
    <input type="checkbox" name="Signing_from" value="Marys page" /> Mary's page
    This also somewhat depends on your form handling script and can also be scripted with JavaScript.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles