HTMLHelp Forums > HTML help me

HTMLHelp Forums > Web Authoring > Markup (HTML, XHTML, XML)

htmlammie

Oct 22 2008, 07:40 PM

ok so here is my thing. when i try to validate it i get so many errors saying that all the radio buttons get: reference to non-existent ID "a5". or something like that. also my <li> and <ol> and <ul> tags are wrong apperently. but if some1 could look through this and tell me what my problems are thank that person.

ps. ya this includes javascript. and if there are any problems with it then plz tell me those!!

(o and ya i kno that the first couple of javascript if(document.capitals.XX) r not matching.
ok here it is:

<?xml version="1.0" encoding="utf-8" ?>
<!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" xml:lang="en" lang="en">
<head>
<title>The Big Project Thing</title>
<script type= "text/javascript">
function calc()
{
correct = 0;
if(document.capitals.a1[0].checked)
++correct;
if(document.capitals.a1[1].checked)
++correct;
if(document.capitals.a1[3].checked)
++correct;
if(document.capitals.a2[0].checked)
++correct;
if(document.capitals.a2[1].checked)
++correct;
if(document.capitals.a2[3].checked)
++correct;
if(document.capitals.a3[0].checked)
++correct;
if(document.capitals.a3[1].checked)
++correct;
if(document.capitals.a3[3].checked)
++correct;
if(document.capitals.a4[0].checked)
++correct;
if(document.capitals.a4[1].checked)
++correct;
if(document.capitals.a4[3].checked)
++correct;
if(document.capitals.a5[0].checked)
++correct;
if(document.capitals.a5[1].checked)
++correct;
if(document.capitals.a5[3].checked)
++correct;
if(document.capitals.a6[0].checked)
++correct;
if(document.capitals.a6[1].checked)
++correct;
if(document.capitals.a6[3].checked)
++correct;
if(document.capitals.a7[0].checked)
++correct;
if(document.capitals.a7[1].checked)
++correct;
if(document.capitals.a7[3].checked)
++correct;
if(document.capitals.a8[0].checked)
++correct;
if(document.capitals.a8[1].checked)
++correct;
if(document.capitals.a8[3].checked)
++correct;
if(document.capitals.a9[0].checked)
++correct;
if(document.capitals.a9[1].checked)
++correct;
if(document.capitals.a9[3].checked)
++correct;
if(document.capitals.a10[0].checked)
++correct;
if(document.capitals.a10[1].checked)
++correct;
if(document.capitals.a10[3].checked)
++correct;
alert ('you answered ' + correct + ' questions incorrectly.');
}
</script>
<style type="text/css">

</style>
</head>
<body>


<br />
<br />
<br />
<br />
<br />
<br />
<br />

<p>
Below is a questionnaire about three internet topics (and an extra question), the topics range from Internet Safety, Evaluating a Webpage, and Searching the Internet. After you choose an option from each multiple choice question, it will alert you if the answer was correct or incorrect. If it is correct, good job and move on to the next quesiton, if incorrect, try another option.
Here is an overview of each topic:
<ul>
<li>Internet Safety: Questions that relate to strangers on the internet and password and identity safety.
<li>Evaluating a Website: What things to look for on a website.
<li>Searching on the Internet: Things about Boolean searching, and other search related questions.
</ul>
</p>

<br />
<br />
<br />
<br />
<br />
<br />

<h2><u>Internet Questionare</u></h2>
<h4>Internet Safety</h4>
<form name = "capitals" action = "">
<ol>
<li><u>If a stranger contacts you and asks you to visit them, What do you do?:</u></li>
<br />
<br />
<input type = "radio" name = "a1.1" value = "0"
onclick = "alert('TRY AGAIN')" /><label for="a1.1">Go to strangers house.</label>
<br /> <br/>
<input type = "radio" name = "a1.2" value = "2"
onclick = "alert('TRY AGAIN')" /><label for="a1.2">Ignore it and do whatever you were doing.</label>
<br /> <br/>
<input type = "radio" name = "a1.3" value = "1"
onclick = "alert('CORRECT!')" /><label for="a1.3">Tell your parents, and contact the hotline.</label>
<br /> <br/>
<input type = "radio" name = "a1.4" value = "3"
onclick = "alert('TRY AGAIN')" /><label for="a1.4">Tell a random stranger on the street, you met while you were going to the other stranger's house.</label>
<br /> <br/>

<li><u>If somebody asks for your password<a href ="http://pbskids.org/license/passwords.html"></a> you:</u>
<br /> <br />
<input type = "radio" name = "a2" value = "0"
onclick = "alert('TRY AGAIN')" /><label for="a2">Give them your password with a smile and not think about it.</label>
<br /> <br/>
<input type = "radio" name = "a2" value = "1"
onclick = "alert('TRY AGAIN')" /><label for="a2">Do not give them your password.</label>
<br /> <br/>
<input type = "radio" name = "a2" value = "2"
onclick = "alert('CORRECT!')" /><label for="a2">Ask why and then give them your password</label>
<br /> <br/>
<input type = "radio" name = "a2" value = "3"
onclick = "alert('TRY AGAIN')" /><label for="a2">Run away and call the police.</label>
<br /> <br/>

<li><u>What information should you give out online?<a href ="http://pbskids.org/license/besafe.html"></a>:</u>
<br /> <br />
<input type = "radio" name = "a3" value = "0"
onclick = "alert('TRY AGAIN')" /><label for="a3">Everything the website asks for.</label>
<br /> <br/>
<input type = "radio" name = "a3" value = "1"
onclick = "alert('TRY AGAIN')" /><label for="a3">None.</label>
<br /> <br/>
<input type = "radio" name = "a3" value = "2"
onclick = "alert('CORRECT!')" /><label for="a3">Your name, and age.</label>
<br /> <br/>
<input type = "radio" name = "a3" value = "3"
onclick = "alert('TRY AGAIN')" /><label for="a3">Contact information.</label>
<br /> <br/>



<h4>Evaluating a Website</h4>

<li><u>What things do you look for when you are evaluating a website?</u>
<br /> <br /> 
<input type = "radio" name = "a4" value = "0"
onclick = "alert('TRY AGAIN')" /><label for="a4">Who made the website?</label>
<br /> <br/>
<input type = "radio" name = "a4" value = "1"
onclick = "alert('TRY AGAIN')" /><label for="a4">What is the extension: .com, .org, .gov?</label>
<br /> <br/>
<input type = "radio" name = "a4" value = "3"
onclick = "alert('CORRECT!')" /><label for="a4">All of the above?</label>
<br /> <br/>
<input type = "radio" name = "a4" value = "2"
onclick = "alert('TRY AGAIN')" /><label for="a4">When was it last updated?</label>

<br /> <br/> 
<li><u>Does a website with an extension of .org, does it mean it is official?</u>
<br /><br />
<input type = "radio" name = "a5" value = "0"
onclick = "alert('TRY AGAIN')" /><label for="a5">Always</label>
<br /> <br/>
<input type = "radio" name = "a5" value = "1"
onclick = "alert('TRY AGAIN')" /><label for="a5">Never</label>
<br /> <br/>
<input type = "radio" name = "a5" value = "2"
onclick = "alert('CORRECT!')" /><label for="a5">Likely</label>
<br /> <br/>
<input type = "radio" name = "a5" value = "3"
onclick = "alert('TRY AGAIN')" /><label for="a5">Rarely</label>

<br /> <br /> 

<li><u>If it says .gov what does it mean?</u>
<br /><br />
<input type = "radio" name = "a6" value = "0"
onclick = "alert('TRY AGAIN')" /><label for="a6">It tracks everything you do, and the government can spy on every single thing.</label>
<br /> <br/>
<input type = "radio" name = "a6" value = "1"
onclick = "alert('TRY AGAIN')" /><label for="a6">That it is likely fraudulent.</label>
<br /> <br/>
<input type = "radio" name = "a6" value = "2"
onclick = "alert('CORRECT!')" /><label for="a6">That it is a government website and a trusted resource.</label>
<br /> <br/>
<input type = "radio" name = "a6" value = "3"
onclick = "alert('TRY AGAIN')" /><label for="a6">That it’s a commercial website.</label>



<h4>Searching the Internet</h4>

<li><u>Boolean Searching Keyword(s) are:</u>
<br /> <br /> 
<input type = "radio" name = "a7" value = "0"
onclick = "alert('TRY AGAIN')" /><label for="a7">AND, BUT, NOT, OR</label>
<br /> <br/>
<input type = "radio" name = "a7" value = "1"
onclick = "alert('TRY AGAIN')" /><label for="a7">NEVER, ALWAYS</label>
<br /> <br/>
<input type = "radio" name = "a7" value = "3"
onclick = "alert('CORRECT!')" /><label for="a7">BOOLEAN</label>
<br /> <br/>
<input type = "radio" name = "a7" value = "2"
onclick = "alert('TRY AGAIN')" /><label for="a7">OR, AND, BUT</label>

<br /> <br/> 
<li><u>Boolean Searching is used to:</u>
<br /><br />
<input type = "radio" name = "a8" value = "0"
onclick = "alert('TRY AGAIN')" /><label for="a8">Limit your results</label>
<br /> <br/>
<input type = "radio" name = "a8" value = "1"
onclick = "alert('TRY AGAIN')" /><label for="a8">Greaten your results</label>
<br /> <br/>
<input type = "radio" name = "a8" value = "2"
onclick = "alert('CORRECT!')" /><label for="a8">Limit or greaten your results</label>
<br /> <br/>
<input type = "radio" name = "a8" value = "3"
onclick = "alert('TRY AGAIN')" /><label for="a8">Search for things about Boolean</label>

<br /> <br /> 
<li><u>Are all search engines the same?:</u>
<br /><br />
<input type = "radio" name = "a9" value = "0"
onclick = "alert('TRY AGAIN')" /><label for="a9">Yes</label>
<br /> <br/>
<input type = "radio" name = "a9" value = "1"
onclick = "alert('TRY AGAIN')" /><label for="a9">No</label>
<br /> <br/>
<input type = "radio" name = "a9" value = "2"
onclick = "alert('CORRECT!')" /><label for="a9">Some are specific categories</label>
<br /> <br/>
<input type = "radio" name = "a9" value = "3"
onclick = "alert('TRY AGAIN')" /><label for="a9">What’s a search engine?</label>

</ol>

<p>Good job, hopefully you've learned something about the above topics, and your better at searching the internet, evaluating webpages, and being safer online.</p>
<h3>Made by Me</h3>

<input type = "button" name = "check" value = "CHECK ANSWERS"
onclick = "calc();"/>
<input type = "reset" name = "reset" value = "CLEAR ANSWERS" />
</form>

</body>
</html>

Darin McGrew

Oct 22 2008, 08:06 PM

If you follow the links on the validator output page, you'll get more information about the elements that you're trying to use. For example, the only thing that can go inside an ol element is an li element. Once you close the li element with a </li> tag, the next thing has to be another opening <li> tag (or the closing </ol> tag that ends the list).

And while you specify multiple radio buttons with name="a5" you don't use id="a5" anywhere. The various <label for="a5">...</label> elements need to refer to specific radio buttons, not to the set of radio buttons. In addition to name="a5" (which refers to the set of radio buttons), each radio button needs a unique id attribute, and the for attributes should refer to those unique id attribute values.

htmlammie

Oct 22 2008, 08:13 PM

i originally had the lists like
<ol>
<li>
radio1,2,3,4
</li>
<li>
radio1,2,3,4
</li>
</ol>

but it still said it was wrong. and also it mentions at the bottom that </html> is like premature ending or w.e for like 30 instances.

and my class told me to the radio buttons like the way i have them, but how r u saying i should have them with the id= ??

pandy

Oct 22 2008, 09:49 PM

QUOTE(htmlammie @ Oct 23 2008, 03:13 AM)

i originally had the lists like
<ol>
<li>
radio1,2,3,4
</li>
<li>
radio1,2,3,4
</li>
</ol>

That list is correct.

QUOTE

and my class told me to the radio buttons like the way i have them, but how r u saying i should have them with the id= ??

You need an id if you want to use <label for="ID_NAME">
http://htmlhelp.com/reference/html40/forms/label.html

Darin McGrew

Oct 23 2008, 03:02 AM

And just to be clear, you can have both name and id attributes, like this:

CODE

htmlammie

Oct 24 2008, 04:28 PM

but y do i need the id?

htmlammie

Oct 24 2008, 04:31 PM

also to add:
i hav document.capitals.(the name rite?)[#].checked
so y do i need an id if i hav a name assigned?: name = "a5"

and wat would b wrong w the lists? like y did the vaildator say they were wrong if pandy says that they r right.

pandy

Oct 24 2008, 04:42 PM

QUOTE(htmlammie @ Oct 24 2008, 11:28 PM)

but y do i need the id?

Because the 'for' attribute only works with id. That's just the way it is.

A label is supposed to be clickable. When you click the label text the corresponding form control gets focus. For that to work you need to use an id. When you use an id with the 'for' attribute you tell the browser that the label is associated with the form control with that id.

Darin McGrew

Oct 24 2008, 06:40 PM

To expand on pandy's answer, id and name serve different purposes. The id attribute identifies an individual radio button. The name attribute identifies a group of associated radio buttons.

If you're going to use <label for=...> then you need to identify an individual radio button. Therefore, you need the id attribute.

But you don't need to use the for attribute at all. You can put both the form control and the label inside the label element. For example, replace:

CODE

<input type = "radio" name = "a9" id="a9-2" value = "2"><label for="a9-2">Some are specific categories</label>

with:

CODE

<label><input type = "radio" name = "a9" value = "2">Some are specific categories</label>

pandy

Oct 24 2008, 06:46 PM

Only that doesn't work in IE Win. Didn't use to anyway. Don't know about 7 and 8.

htmlammie

Oct 24 2008, 06:56 PM

o ok. thx. i actually decided to go without any button labels/names/id but thx the info helped me and will deff help in my class in the future.

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.