Login

06-14-2009, 03:57 AM

[eluser]TheFuzzy0ne[/eluser]
Hi everyone. I can't get the following XHTML to work in Firefox.

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 

&lt;html &gt; 

&lt;head&gt; 

    &lt;title&gt;Delete Forum&lt;/title&gt; 

    &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; 

&lt;/head&gt; 

&lt;body id="deleteForum"&gt; 

    <h2>Delete forum</h2>

    <h3>Forum: Root Forum 3</h3> 

    &lt;form action="" method="post"&gt; 

            <div> 

                <label> 

                    &lt;input type="radio" name="action_subforums" value="delete" checked="checked" /&gt;Delete subforums<br /> 

                    &lt;input type="radio" name="action_subforums" value="move" /&gt;Move subforums to: 

                    <select name="move_subforums_to">

                        <option value="8">Forums</option>

                        <option value="9">&nbsp; &nbsp;Forum 1</option>

                        <option value="10">&nbsp; &nbsp;Forum 2</option>

                        <option value="11">&nbsp; &nbsp;&nbsp; &nbsp;SubForum 1</option>

                        <option value="12">&nbsp; &nbsp;&nbsp; &nbsp;SubForum 2</option>

                        <option value="13">&nbsp; &nbsp;Root Forum 1</option>

                        <option value="14">&nbsp; &nbsp;Root Forum 2</option>

                        <option value="15">&nbsp; &nbsp;Root Forum 3</option>

                        <option value="16">&nbsp; &nbsp;Root Forum 3</option>

                        <option value="17">&nbsp; &nbsp;Root Forum 3</option>

                        <option value="18">&nbsp; &nbsp;Root Forum 3</option>

                        <option value="19">&nbsp; &nbsp;Root Forum 3</option>

                    </select>            

                </label> 

            </div> 

            <div> 

                <label> 

                    &lt;input type="radio" name="action_topics" value="delete" checked="checked" /&gt;Delete topics<br /> 

                    &lt;input type="radio" name="action_topics" value="move" /&gt;Move topics to: 

                    <select name="move_topics_to">

                        <option value="9">Forum 1</option>

                        <option value="10">Forum 2</option>

                        <option value="11">&nbsp; &nbsp;SubForum 1</option>

                        <option value="12">&nbsp; &nbsp;SubForum 2</option>

                        <option value="13">Root Forum 1</option>

                        <option value="14">Root Forum 2</option>

                        <option value="15" disabled="disabled">Root Forum 3</option>

                        <option value="16">Root Forum 3</option>

                        <option value="17">Root Forum 3</option>

                        <option value="18">Root Forum 3</option>

                        <option value="19">Root Forum 3</option>

                    </select>

                </label> 

            </div> 

            <div> 

            &lt;input type="submit" name="submit" value="Delete Forum"/&gt; 

        </div> 

    &lt;/form&gt; 

&lt;/body&gt;

&lt;/html&gt;

The page validates, but it simply won't let me select any radio button other the the default checked one. Please could someone test the code on Firefox 3 (my version is 3.0.11), and let me know if you have the same problem?

Thanks.

06-14-2009, 04:05 AM

[eluser]wiredesignz[/eluser]
@Fuzzy, The <label> tag is breaking it.

I don't think it's valid to wrap that much HTML into label tags.

06-14-2009, 04:11 AM

[eluser]TheFuzzy0ne[/eluser]
Hmm, that's strange. Removing the labels worked nicely - it's just as well I don't actually need them. But it's a strange issue nonetheless. The page validates fine, and works in all browsers I tried apart from Firefox 3. How did you come to the conclusion that it was the labels that were the problem?

Thanks for your reply.

06-14-2009, 04:20 AM

[eluser]wiredesignz[/eluser]
Label tags only relate to a single input.

06-14-2009, 04:22 AM

[eluser]TheFuzzy0ne[/eluser]
OK, I found the problem. With the "for" attribute omitted, the label binds itself to the first forum element in the label, in this case, it's the radio button, and I think that was causing problems. I added an ID to the select box, and the "for" attribute to the label, and all is well. So here's the code now.

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 

&lt;html &gt; 

&lt;head&gt; 

    &lt;title&gt;Delete Forum&lt;/title&gt; 

    &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; 

&lt;/head&gt; 

&lt;body id="deleteForum"&gt; 

    <h2>Delete forum</h2>

    <h3>Forum: Root Forum 3</h3> 

    &lt;form action="" method="post"&gt; 

        <div> 

            <label for="move_subforums_to"> 

                &lt;input type="radio" name="action_subforums" value="delete" checked="checked" /&gt;Delete subforums<br /> 

                &lt;input type="radio" name="action_subforums" value="move" /&gt;Move subforums to: 

                <select name="move_subforums_to" id="move_subforums_to">

                    <option value="8">Forums</option>

                    <option value="9">&nbsp; &nbsp;Forum 1</option>

                    <option value="10">&nbsp; &nbsp;Forum 2</option>

                    <option value="11">&nbsp; &nbsp;&nbsp; &nbsp;SubForum 1</option>

                    <option value="12">&nbsp; &nbsp;&nbsp; &nbsp;SubForum 2</option>

                    <option value="13">&nbsp; &nbsp;Root Forum 1</option>

                    <option value="14">&nbsp; &nbsp;Root Forum 2</option>

                    <option value="15">&nbsp; &nbsp;Root Forum 3</option>

                    <option value="16">&nbsp; &nbsp;Root Forum 3</option>

                    <option value="17">&nbsp; &nbsp;Root Forum 3</option>

                    <option value="18">&nbsp; &nbsp;Root Forum 3</option>

                    <option value="19">&nbsp; &nbsp;Root Forum 3</option>

                </select>            

            </label> 

        </div> 

        <div> 

            <label for="move_topics_to"> 

                &lt;input type="radio" name="action_topics" value="delete" checked="checked" /&gt;Delete topics<br /> 

                &lt;input type="radio" name="action_topics" value="move" /&gt;Move topics to: 

                <select name="move_topics_to" id="move_topics_to">

                    <option value="9">Forum 1</option>

                    <option value="10">Forum 2</option>

                    <option value="11">&nbsp; &nbsp;SubForum 1</option>

                    <option value="12">&nbsp; &nbsp;SubForum 2</option>

                    <option value="13">Root Forum 1</option>

                    <option value="14">Root Forum 2</option>

                    <option value="15" disabled="disabled">Root Forum 3</option>

                    <option value="16">Root Forum 3</option>

                    <option value="17">Root Forum 3</option>

                    <option value="18">Root Forum 3</option>

                    <option value="19">Root Forum 3</option>

                </select>

            </label> 

        </div> 

        <div> 

            &lt;input type="submit" name="submit" value="Delete Forum"/&gt; 

        </div> 

    &lt;/form&gt; 

&lt;/body&gt;

&lt;/html&gt;

However, I should add that I don't need the label anyway, it's just habit for me to add them to form elements. However, I'm glad I found the cause of the problem.

Thanks again wiredesigns. Without your suggestion, I'd still be very confused about the issue.

06-14-2009, 04:33 AM

[eluser]Yorick Peterse[/eluser]
[quote author="wiredesignz" date="1244992805"]Label tags only relate to a single input.[/quote]

BS, the label tag works with any type of input, whether it's an checkbox, textbox or textarea.

@Fuzzy

Why do you wrap the radio buttons inside the label ? I'd say something like this is better (and more logical) :

Code:
<label for="foo">Foo</label>&lt;input type="text" id="foo" name="foo" /&gt;

06-14-2009, 04:40 AM

[eluser]wiredesignz[/eluser]
@Yorick, "relates to single input" means only one input at a time. The type of input is irelevant.

Pull your horns in please. :zip:

06-14-2009, 04:52 AM

[eluser]TheFuzzy0ne[/eluser]
[quote author="Yorick Peterse" date="1244993618"]
Why do you wrap the radio buttons inside the label ? I'd say something like this is better (and more logical) :

Code:
<label for="foo">Foo</label>&lt;input type="text" id="foo" name="foo" /&gt;

[/quote]

Indeed it is more logical, but when you have a single input within the label, when you click the label (or rather something inside the label), the form control is selected automatically, without the need to add an ID to the input or for attribute to the label.

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 

&lt;html&gt; 

&lt;head&gt; 

    &lt;title&gt;&lt;/title> 

    &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; 

&lt;/head&gt; 

&lt;body&gt; 

    &lt;form action="" method="post"&gt; 

        <div>

            <label>Click here &lt;input type="text" name="text_input" value="" /&gt; or here</label>

        </div> 

    &lt;/form&gt; 

&lt;/body&gt;

&lt;/html&gt;

Hopefully this answers your question. It's just a matter of taste, and because I find it tedious adding IDs to things just so you can use them with a label, when it's totally unnecessary.

06-14-2009, 07:00 AM

[eluser]slowgary[/eluser]
Do you intend on adding a label for each radio button? You should. It really helps usability by increasing the clickable area.

06-14-2009, 07:05 AM

[eluser]TheFuzzy0ne[/eluser]
That's a nice idea. I hadn't actually thought about it before. I might change it in the future, but right now I'm stuck trying to figure out how to validate my form, lol. Thanks for the suggestion, though. You make an excellent point.