checkboxes

Discussion in 'HTML' started by 'bonehead, Apr 17, 2004.

  1. 'bonehead

    'bonehead Guest

    Okay, here's a real nummnuts question:

    Can I manipulate the placement of the checkbox's label relative to it's
    name? IOW, what if I want the box to appear to the left of the label
    instead of to the right?
     
    'bonehead, Apr 17, 2004
    #1
    1. Advertising

  2. 'bonehead <> wrote:

    > Okay, here's a real nummnuts question:


    No, it was just a pointless intro.

    > Can I manipulate the placement of the checkbox's label relative to
    > it's name?


    Yes.

    > IOW, what if I want the box to appear to the left of the
    > label instead of to the right?


    You have some odd meaning for "IOW".

    The box normally appears to the left of the label, when you write
    <input type="checkbox" ...> <label ...>...</label>

    What is the problem with that?

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
    Pages about Web authoring: http://www.cs.tut.fi/~jkorpela/www.html
     
    Jukka K. Korpela, Apr 17, 2004
    #2
    1. Advertising

  3. "'bonehead" <> wrote in message
    news:...
    > Okay, here's a real nummnuts question:
    >
    > Can I manipulate the placement of the checkbox's label relative to it's
    > name? IOW, what if I want the box to appear to the left of the label
    > instead of to the right?



    Yes, you just put the text to whatever side you want. The text that shows
    up on the webpage isn't in the actual form code. ;-)

    --Tina
    --
    http://www.AffordableHOST.com - since 1997
    Managed, Dedicated and Colo Server Pkgs.
    Cpanel hosting starting @ $5.95 a month
    April Special: 15 months for the price of 12!
     
    Tina - AffordableHOST.com, Apr 17, 2004
    #3
  4. 'bonehead wrote:

    > Can I manipulate the placement of the checkbox's label relative to it's
    > name? IOW, what if I want the box to appear to the left of the label
    > instead of to the right?


    Then you format the label in the usual way for HTML documents - you put it
    after the checkbox.

    <input type="checkbox" name="animal" value="Dog" id="chkAnimalDog">
    <label for="chkAnimalDog">Dog</label> <br>

    <input type="checkbox" name="animal" value="Cat" id="chkAnimalCat">
    <label for="chkAnimalCat">Cat</label>

    --
    David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
     
    David Dorward, Apr 17, 2004
    #4
  5. David Dorward wrote:

    > 'bonehead wrote:
    >
    >> Can I manipulate the placement of the checkbox's label relative to it's
    >> name? IOW, what if I want the box to appear to the left of the label
    >> instead of to the right?

    >
    > Then you format the label in the usual way for HTML documents - you put it
    > after the checkbox.
    >
    > <input type="checkbox" name="animal" value="Dog" id="chkAnimalDog">
    > <label for="chkAnimalDog">Dog</label> <br>
    >
    > <input type="checkbox" name="animal" value="Cat" id="chkAnimalCat">
    > <label for="chkAnimalCat">Cat</label>


    True, but this raises an interesting question. Which side is better?

    Aesthetically,

    [x] an option
    [x] another option

    looks nice. Everything lined up. But, for a one-dimensional output medium,
    such as a screen reader, it makes more sense to have the labels *before*
    the input:

    an option [x]
    another option [x]

    However, it may be possible to have your cake and eat it too. Untested:

    <div class="checkboxwrapper">
    <label for="foo">Foo</label>
    <input type="checkbox" name="foo" id="foo">
    </div>
    <div class="checkboxwrapper">
    <label for="bar">Bar</label>
    <input type="checkbox" name="bar" id="bar">
    </div>

    .checkboxwrapper {
    position: relative;
    }
    .checkboxwrapper label {
    padding-left: 24px;
    }
    .checkboxwrapper input {
    position: absolute;
    top: 0; left: 0;
    }

    As a side note, for those using labels with an implicit "for", e.g.

    <label>Foo <input name="foo"></label>

    You may quite like this CSS:

    label {
    border: 1px dotted white;
    }
    label:hover {
    color: black;
    background: #ff9;
    border: 1px dotted black;
    }

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me - http://www.goddamn.co.uk/tobyink/?page=132
     
    Toby A Inkster, Apr 18, 2004
    #5
  6. Toby A Inkster wrote:

    > True, but this raises an interesting question. Which side is better?
    >
    > Aesthetically,
    > [x] an option
    > [x] another option
    > looks nice.


    And is also consistant with the majority of GUI interfaces, which is good
    for usability.

    > Everything lined up. But, for a one-dimensional output medium,
    > such as a screen reader, it makes more sense to have the labels *before*
    > the input:
    >
    > an option [x]
    > another option [x]


    That is why we have <label> elements, to explicitly associate the controls.
    I don't know what the support is like, but the data format certainly can
    cope.

    --
    David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
     
    David Dorward, Apr 18, 2004
    #6
  7. Toby A Inkster <> wrote:

    > Aesthetically,
    >
    > [x] an option
    > [x] another option
    >
    > looks nice. Everything lined up. But, for a one-dimensional output
    > medium, such as a screen reader, it makes more sense to have the
    > labels *before* the input


    It has already become the web-wide "standard" to put the checkbox (or
    radio button) before the label. It is now irrelevant whether this was bad
    practice; even if it were, it has already become good practice by
    becoming so universal. If screen readers have problems with it, they need
    to adapt to the "standard", and as far as I know, they have done that.

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
    Pages about Web authoring: http://www.cs.tut.fi/~jkorpela/www.html
     
    Jukka K. Korpela, Apr 18, 2004
    #7
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Fresh Air Rider

    Checkboxes with Repeaters and DataGrids

    Fresh Air Rider, Mar 5, 2004, in forum: ASP .Net
    Replies:
    0
    Views:
    499
    Fresh Air Rider
    Mar 5, 2004
  2. kannadasan
    Replies:
    1
    Views:
    1,026
  3. Tracey

    ASP.NET Checkboxes

    Tracey, Jul 23, 2003, in forum: ASP .Net
    Replies:
    0
    Views:
    401
    Tracey
    Jul 23, 2003
  4. Gavin
    Replies:
    2
    Views:
    363
    Gavin
    Jul 30, 2003
  5. Mike Lerch
    Replies:
    3
    Views:
    438
    Mike Lerch
    Aug 6, 2003
Loading...

Share This Page