Making form labels clickable

Discussion in 'HTML' started by Nick Howes, Apr 29, 2004.

  1. Nick Howes

    Nick Howes Guest

    This post isn't a question, but then newsgroups aren't Q&A forums (though
    you'd be forgiven for thinking it)

    If you have a form field such as a checkbox, and some text describing it
    (and you probably do, or else it's just a mystery box), you may like to know
    that there is a standard HTML tag to make it so clicking on the text checks
    the box (which is so much easier than clicking on just that tiny little box
    anyway). It's done using the <label> tag, and links to the field's id,
    thusly:

    <input type="checkbox" id="mybox" name="pool"/>
    <label for="mybox">I play pool</label>

    You can then click on the "I play pool" text to make the checkbox click. To
    make it more obvious that the text can be clicked on, you can give <label>
    tags some CSS styling so that the cursor changes to a hand, as it would over
    a link:

    <style type="text/css"><!--
    label {
    cursor: pointer;
    cursor: hand;
    }
    --></script>

    the two different cursors are needed so that it works in IE (which uses
    hand) and others (which use pointer).

    You can of course use labels for any other form field (on a text box,
    clicking the label will put the text cursor in the box ready to type) If you
    do this then all your web forms then they'll be so much more user-friendly
    and easy to use, et cetera et cetera.
     
    Nick Howes, Apr 29, 2004
    #1
    1. Advertising

  2. Nick Howes wrote:
    > You can then click on the "I play pool" text to make the checkbox click.


    This is true for some browsers, yes. But this isn't the purpose of the
    label element. Its purpose is to explicitly describe what the input
    field is and what its contents should be, if applicable. The clicking
    thing is just a side-effect.

    >? To
    > make it more obvious that the text can be clicked on, you can give <label>
    > tags some CSS styling so that the cursor changes to a hand, as it would over
    > a link:


    A bad idea, in my opinion, because this might give the impression that
    something more should happen, like go to a new page or spawn a window or
    something else associated with links.

    > <style type="text/css"><!--
    > label {
    > cursor: pointer;
    > cursor: hand;
    > }
    > --></script>


    I don't really like people changing my cursor. It changes the cursor
    from what I'd expect, and I get a little confused. Also, the comments
    are unnecessary and actually illegal.

    > If you
    > do this then all your web forms then they'll be so much more user-friendly
    > and easy to use, et cetera et cetera.


    Indeed more friendly for those without a visual browser (or those who
    just like labels, like me).
    --
    Michael Wilcox, http://mikewilcox.t35.com/
     
    Michael Wilcox, Apr 30, 2004
    #2
    1. Advertising

  3. Nick Howes

    Adrienne Guest

    Gazing into my crystal ball I observed "Nick Howes"
    <> writing in
    news:c6rn1t$558$:

    > You can of course use labels for any other form field (on a text box,
    > clicking the label will put the text cursor in the box ready to type)
    > If you do this then all your web forms then they'll be so much more
    > user-friendly and easy to use, et cetera et cetera.
    >


    Labels can also be styled so that forms look structured, as if they were
    done with tables. Labels can be styled to give a visual clue that the user
    has made an error. Here's a little something written in ASP that
    demonstrates this: http://www.intraproducts.com/beta/requiredform.asp

    --
    Adrienne Boswell
    Please respond to the group so others can share
    http://www.arbpen.com
     
    Adrienne, May 1, 2004
    #3
  4. Nick Howes

    Mark Parnell Guest

    On Fri, 30 Apr 2004 16:30:04 -0500, Michael Wilcox
    <> declared in alt.html:

    >> <style type="text/css"><!--
    >> label {
    >> cursor: pointer;
    >> cursor: hand;
    >> }
    >> --></script>

    >
    > Also, the comments are unnecessary and actually illegal.


    Not to mention the <style> element being closed with a </script> tag.
    :)

    The comments aren't illegal, since the above would presumably be in the
    head of the HTML document, not an external CSS file (otherwise it is
    even more malformed), so comments are allowed. But they _are_ totally
    unnecessary. Cargo cult rubbish.

    --
    Mark Parnell
    http://www.clarkecomputers.com.au
     
    Mark Parnell, May 3, 2004
    #4
  5. Mark Parnell <> wrote:

    > On Fri, 30 Apr 2004 16:30:04 -0500, Michael Wilcox
    > <> declared in alt.html:
    >
    >>> <style type="text/css"><!--
    >>> label {
    >>> cursor: pointer;
    >>> cursor: hand; } --></script>

    >>
    >> Also, the comments are unnecessary and actually illegal.

    >
    > Not to mention the <style> element being closed with a </script> tag.
    > :)


    Yes, it's easy to forget to use the right tags if you're counting your
    hyphens and things like that.

    > The comments aren't illegal, since the above would presumably be in the
    > head of the HTML document, not an external CSS file (otherwise it is
    > even more malformed), so comments are allowed. But they _are_ totally
    > unnecessary. Cargo cult rubbish.


    Besides, they are not comments at all. The content of a style element is
    character data, from the HTML perspective, so nothing in them can
    constitute an HTML (i.e., SGML) comment. If you used
    <style type="text/css"><!--</style>
    <title></title>
    Hello world
    then your document would be valid HTML, which wouldn't be the case if
    <!-- started a comment declaration.

    It's just a kludgery that was designed when there were browsers that did
    not recognize <style> or <script> elements.

    In XHTML, it isn't safe at all, since it may result in the entire style
    sheet being ignored:
    "Note that XML parsers are permitted to silently remove the contents of
    comments. Therefore, the historical practice of "hiding" scripts and
    style sheets within "comments" to make the documents backward compatible
    is likely to not work as expected in XML-based user agents."
    ( http://www.w3.org/TR/html/#guidelines )

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
    Pages about Web authoring: http://www.cs.tut.fi/~jkorpela/www.html
     
    Jukka K. Korpela, May 3, 2004
    #5
  6. Mark Parnell wrote:

    > The comments aren't illegal, since the above would presumably be in the
    > head of the HTML document, not an external CSS file (otherwise it is
    > even more malformed), so comments are allowed. But they _are_ totally
    > unnecessary.


    Well, as the example in the OP was XHTML, then technically the comments
    should cause the stylesheet to be completely ignored. (Comments in XHTML
    <script> and <style> elements are *real* comments.)

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me - http://www.goddamn.co.uk/tobyink/?page=132
     
    Toby A Inkster, May 3, 2004
    #6
    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. Nathan Sokalski

    Making a TableCell Appear Clickable

    Nathan Sokalski, May 16, 2005, in forum: ASP .Net
    Replies:
    1
    Views:
    505
    Eliyahu Goldin
    May 16, 2005
  2. Mike
    Replies:
    0
    Views:
    343
  3. Peter Kirk

    Clickable labels

    Peter Kirk, Nov 2, 2005, in forum: ASP .Net Web Controls
    Replies:
    3
    Views:
    157
    Demetri
    Jan 5, 2006
  4. JJ
    Replies:
    6
    Views:
    1,355
    Jukka K. Korpela
    Nov 23, 2011
  5. news user

    Making a WMP component clickable

    news user, Jul 4, 2003, in forum: Javascript
    Replies:
    0
    Views:
    117
    news user
    Jul 4, 2003
Loading...

Share This Page