<button> tag

Discussion in 'HTML' started by Tree*Rat, Apr 7, 2005.

  1. Tree*Rat

    Tree*Rat Guest

    Two things.

    First is it ok to use the <button> tag? i understand that IE4+ and
    netscape5+ support this. WHat about other browsers?


    Question two.
    -------------

    I currently use CSS ( as i recon most done now ) but i am unsure on
    how to set atributes in the CSS file for the BUTTON tag. I need to make it
    transparent. Any ideas?
    Tree*Rat, Apr 7, 2005
    #1
    1. Advertising

  2. Tree*Rat

    Andy Dingley Guest

    On Thu, 07 Apr 2005 17:33:12 GMT, "Tree*Rat" <>
    wrote:

    >First is it ok to use the <button> tag?


    It it kosher HTML ?
    http://www.w3.org/TR/html4/interact/forms.html#edef-BUTTON

    So that looks like a yes. The spec is there and free for you to use -
    use it.

    >i understand that IE4+ and
    >netscape5+ support this. WHat about other browsers?


    Somewhere there'll be _something_ that can't work with it.

    As a general rule for the paranoid though, duplicate the id attribute
    of form controls into their name attribute. An old browser (in living
    memory) may work with button and name, but not with id.

    >I currently use CSS ( as i recon most done now ) but i am unsure on
    >how to set atributes in the CSS file for the BUTTON tag.


    Same way you do with anything.

    For <button>, I'd suggest adding a class to the button and using that
    as a selector, rather than making some global CSS rule apply to all
    buttons (for some settings this may be OK, but it's common to want
    different stylings on them).

    >I need to make it
    >transparent. Any ideas?


    Don't ? The notion of a transparent buttons sounds horrible - are you
    going to be relying on it getting accurately placed to hint where to
    click ?

    If you simply want to remove the borders and "button like" appearance,
    then try this (assumes CSS rendering of buttons, not some
    platform-local rendering):

    button.btnFoo {
    border: none;
    background-color: transparent;
    }
    Andy Dingley, Apr 7, 2005
    #2
    1. Advertising

  3. Tree*Rat

    Tree*Rat Guest

    Andy Dingley <> wrote in
    news::

    > On Thu, 07 Apr 2005 17:33:12 GMT, "Tree*Rat" <>
    > wrote:
    >
    >>First is it ok to use the <button> tag?

    >
    > It it kosher HTML ?
    > http://www.w3.org/TR/html4/interact/forms.html#edef-BUTTON
    >
    > So that looks like a yes. The spec is there and free for you to use -
    > use it.
    >
    >>i understand that IE4+ and
    >>netscape5+ support this. WHat about other browsers?

    >
    > Somewhere there'll be _something_ that can't work with it.
    >
    > As a general rule for the paranoid though, duplicate the id attribute
    > of form controls into their name attribute. An old browser (in living
    > memory) may work with button and name, but not with id.
    >
    >>I currently use CSS ( as i recon most done now ) but i am unsure on
    >>how to set atributes in the CSS file for the BUTTON tag.

    >
    > Same way you do with anything.
    >
    > For <button>, I'd suggest adding a class to the button and using that
    > as a selector, rather than making some global CSS rule apply to all
    > buttons (for some settings this may be OK, but it's common to want
    > different stylings on them).
    >
    >>I need to make it
    >>transparent. Any ideas?

    >
    > Don't ? The notion of a transparent buttons sounds horrible - are you
    > going to be relying on it getting accurately placed to hint where to
    > click ?
    >
    > If you simply want to remove the borders and "button like" appearance,
    > then try this (assumes CSS rendering of buttons, not some
    > platform-local rendering):
    >
    > button.btnFoo {
    > border: none;
    > background-color: transparent;
    > }
    >
    >


    Thanks for that. Just to update you a bit The reason i need the button
    transparent is its being replaced by an image. The reason for this is i
    need to use form elemnts to pass hidden variable and not send them via a
    url. As the site is theme based ( via different css files ) the button
    does need to be the same as the background colour ( or transparent ) to
    hid the fact its a button, sounds daft but looks better.

    thanks for your help
    Tree*Rat, Apr 7, 2005
    #3
  4. Tree*Rat

    Tree*Rat Guest

    "Tree*Rat" <> wrote in news:zSf5e.14967$vv2.13710
    @newsfe2-gui.ntli.net:

    > Andy Dingley <> wrote in
    > news::
    >
    >> On Thu, 07 Apr 2005 17:33:12 GMT, "Tree*Rat" <>
    >> wrote:
    >>
    >>>First is it ok to use the <button> tag?

    >>
    >> It it kosher HTML ?
    >> http://www.w3.org/TR/html4/interact/forms.html#edef-BUTTON
    >>
    >> So that looks like a yes. The spec is there and free for you to use -
    >> use it.
    >>
    >>>i understand that IE4+ and
    >>>netscape5+ support this. WHat about other browsers?

    >>
    >> Somewhere there'll be _something_ that can't work with it.
    >>
    >> As a general rule for the paranoid though, duplicate the id attribute
    >> of form controls into their name attribute. An old browser (in living
    >> memory) may work with button and name, but not with id.
    >>
    >>>I currently use CSS ( as i recon most done now ) but i am unsure on
    >>>how to set atributes in the CSS file for the BUTTON tag.

    >>
    >> Same way you do with anything.
    >>
    >> For <button>, I'd suggest adding a class to the button and using that
    >> as a selector, rather than making some global CSS rule apply to all
    >> buttons (for some settings this may be OK, but it's common to want
    >> different stylings on them).
    >>
    >>>I need to make it
    >>>transparent. Any ideas?

    >>
    >> Don't ? The notion of a transparent buttons sounds horrible - are you
    >> going to be relying on it getting accurately placed to hint where to
    >> click ?
    >>
    >> If you simply want to remove the borders and "button like" appearance,
    >> then try this (assumes CSS rendering of buttons, not some
    >> platform-local rendering):
    >>
    >> button.btnFoo {
    >> border: none;
    >> background-color: transparent;
    >> }
    >>
    >>

    >
    > Thanks for that. Just to update you a bit The reason i need the button
    > transparent is its being replaced by an image. The reason for this is i
    > need to use form elemnts to pass hidden variable and not send them via

    a
    > url. As the site is theme based ( via different css files ) the button
    > does need to be the same as the background colour ( or transparent ) to
    > hid the fact its a button, sounds daft but looks better.
    >
    > thanks for your help
    >


    ok hit a problem

    button.main {
    background-color: #770000;
    border : none;
    }

    the border has gone but the background color is not red? it hasnt change
    at all. Why is this?
    Tree*Rat, Apr 7, 2005
    #4
  5. "Tree*Rat" <> wrote:

    > Thanks for that.


    You fullquoted a message. This usually means you didn't really read it.

    > Just to update you a bit The reason i need the
    > button transparent is its being replaced by an image. The reason
    > for this is i need to use form elemnts to pass hidden variable and
    > not send them via a url. As the site is theme based ( via different
    > css files ) the button does need to be the same as the background
    > colour ( or transparent ) to hid the fact its a button, sounds daft
    > but looks better.


    That makes little sense without a URL. It sounds like you are trying to
    create an unreliable imitation of hidden fields.

    It's unknown what you want to do. So guessing on answers is rather
    pointless. But if you wish hide a button from looking like a button,
    then you seem to want to create problems, not solve them.

    The only sure thing is that <button> is a problem, not a solution.

    Please do not fix your forged From field unless you get a clue.
    Thank you in advance.

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
    Pages about Web authoring: http://www.cs.tut.fi/~jkorpela/www.html
    Jukka K. Korpela, Apr 7, 2005
    #5
  6. Tree*Rat

    Andy Dingley Guest

    On Thu, 07 Apr 2005 19:51:28 GMT, "Tree*Rat" <>
    wrote:

    >the border has gone but the background color is not red?


    Mine is red - I even tested it !

    <button name="Woof" id="Woof" class="main" value="Bark"
    >Donkey</button>



    >Why is this?


    No idea. We can't debug fragments if we can't see the HTML too.
    Andy Dingley, Apr 7, 2005
    #6
  7. Tree*Rat

    Mitja Guest

    >>>> I need to make it
    >>>> transparent. Any ideas?
    >>> background-color: transparent;

    >> Thanks for that. Just to update you a bit The reason i need the button
    >> transparent is its being replaced by an image.


    Are you sure it's not <input type="image" src="..."> you want?

    > ok hit a problem
    > background-color: #770000;
    > the border has gone but the background color is not red? it hasnt change
    > at all. Why is this?

    Quite a few browsers don't support styling of form elements or provide
    limited support. Intentionally, of course - to make it evident where and
    what the form elements are at all.
    Mitja, Apr 7, 2005
    #7
  8. Tree*Rat

    Andy Dingley Guest

    On Thu, 07 Apr 2005 19:29:35 GMT, "Tree*Rat" <>
    wrote:

    >Thanks for that. Just to update you a bit The reason i need the button
    >transparent is its being replaced by an image.


    Then use CSS to set background-image

    >The reason for this is i
    >need to use form elemnts to pass hidden variable and not send them via a
    >url.


    Then use <input type="hidden" > rather than <button>

    >As the site is theme based ( via different css files ) the button
    >does need to be the same as the background colour


    If it's "theme based", then let the CSS theme set it.
    Andy Dingley, Apr 8, 2005
    #8
  9. Tree*Rat

    Toby Inkster Guest

    Tree*Rat wrote:

    > First is it ok to use the <button> tag? i understand that IE4+ and
    > netscape5+ support this. WHat about other browsers?


    Internet Explorer's support of BUTTON is *very* buggy. Better to stick to
    INPUT.

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me ~ http://tobyinkster.co.uk/contact
    Toby Inkster, Apr 9, 2005
    #9
  10. Tree*Rat

    Csaba Gabor Guest

    Toby Inkster wrote:
    > Internet Explorer's support of BUTTON is *very* buggy. Better to stick to
    > INPUT.


    That's interesting. I'd never noticed that IE's BUTTON support is buggy.
    In what way? The reason I like BUTTON is that I can underline the
    relevant character if it has accessKey set.

    Csaba Gabor from Vienna
    Csaba Gabor, Apr 9, 2005
    #10
  11. Csaba Gabor <> wrote:

    > I'd never noticed that IE's BUTTON support is buggy.
    > In what way?


    To begin with, it results in wrong data being included into the form
    data set. IE puts the content of the element there.

    > The reason I like BUTTON is that I can underline the
    > relevant character if it has accessKey set.


    Accesskey assignments in HTML are mostly hostile to accessibility,
    since they override browser-specific key assignments that users
    (especially those who need to use the keyboard only) are used to.

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
    Pages about Web authoring: http://www.cs.tut.fi/~jkorpela/www.html
    Jukka K. Korpela, Apr 9, 2005
    #11
  12. Tree*Rat

    Toby Inkster Guest

    Ooops. Wrote this reply an hour or so ago, but have just realised I forgot
    to hit "Send Now"...

    Csaba Gabor wrote:

    > That's interesting. I'd never noticed that IE's BUTTON support is buggy.


    <form action="test.php" method="GET">
    <div>
    <button>
    This button should submit the form but it does not.
    </button>
    </div>
    </form>

    <form action="test.php" method="GET">
    <div>
    When you submit this form, test.php will be sent the data
    "foo=Baz". It should get "foo=bar".
    <button name="foo" value="bar">baz</button>
    </div>
    </form>

    <form action="test.php" method="GET">
    <div>
    When you submit this form, test.php will be sent the data
    "foo=bar&amp;foo=baz", no matter which button you press.
    It should get either "foo=bar" or "foo=baz" depending on
    which button is pressed.
    <button name="foo">bar</button>
    <button name="foo">baz</button>
    </div>
    </form>

    <script type="text/javascript">
    function myalert() {
    var x = document.getElementById('foo').getAttribute('value');
    // should be "bar", but is actually "baz".
    window.alert(x);
    }
    </script>
    <button onclick="myalert();" id="foo" value="bar">baz</button>

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me ~ http://tobyinkster.co.uk/contact
    Toby Inkster, Apr 9, 2005
    #12
    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. jstack
    Replies:
    1
    Views:
    603
    Tor Iver Wilhelmsen
    Jul 4, 2003
  2. kishan bisht

    struts tag inside a tag

    kishan bisht, Jul 8, 2003, in forum: Java
    Replies:
    1
    Views:
    1,484
    Wendy S
    Jul 9, 2003
  3. shahbaz
    Replies:
    0
    Views:
    899
    shahbaz
    Oct 27, 2003
  4. shruds
    Replies:
    1
    Views:
    783
    John C. Bollinger
    Jan 27, 2006
  5. visu
    Replies:
    4
    Views:
    291
Loading...

Share This Page