<button> tag

[Tree*Rat]

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.

 

[Andy Dingley]

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;
}

 

[Tree*Rat]

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.


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.


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).


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]

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?

 

[Jukka K. Korpela]

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.

 

[Andy Dingley]

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.

 

[Mitja]

I need to make it

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.

 

[Andy Dingley]

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.

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.

 

[Toby Inkster]

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.

 

[Csaba Gabor]

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

 

[Jukka K. Korpela]

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.

 

[Toby Inkster]

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

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>