use of <button> tag 1

[theEclipse]

I was just wondering where the <button> tag went? people seem to have forgotten it completly!

I see people creating complex (I use this term relativly, of course! ;-))js scripts to make a button that looks exactly like the a submit button, just to have an image in it!

check out this:

<button>
<img src=&quot;&quot; name=&quot;some_cool_image&quot; alt=&quot;that_is_on_the_button&quot;>
some text also on the button
</button>

the <button> tag is in the HTML 4.0 specs, and I believe it is supported by ALL ns and ie browsers, as well as most of the smaller browsers (opera, etc...)

Robert Carpenter
questions? comments? thanks? email me!
eclipse_web@hotmail.com
Icq: 124408594

AIM & MSN: robacarp

 

[Boomerang]

Hi Robert,

without image like:
<BUTTON TYPE=&quot;submit&quot; name=&quot;buttontag&quot;>my buttontext</BUTTON>
It don't work in NN4.73

with image like:
<BUTTON TYPE=&quot;submit&quot; name=&quot;buttontag&quot;>
<img width=&quot;200&quot; height=&quot;70&quot; src=&quot;AnyImage.jpg&quot; name=&quot;some_cool_image&quot; alt=&quot;that_is_on_the_button&quot;></BUTTON>
I get a border around the image in IE4.0 and in NN4.73 it shows OK but the submit function don't work.

I think these problems are the reason peolple won't use it.
Any suggestions from others?

Erik

 

[ToddWW]

Hi Robert,

I think that's a wonderful idea. I think the reason no one uses it is because nobody every talks about it and therefore, most don't know it exists. I know that I didn't.

I tested it out thoroughly and was able to come up with the following.

<button name=&quot;myButton&quot; onClick=&quot;this.form.submit();&quot;><img src=&quot;myimage.gif&quot; border=&quot;0&quot;></button>

Although I didn't get that annoying border on my image, I was just wondering if border=&quot;0&quot; parm in the image tag would resolve that.

I was able to turn it into a submit button by adding a simple onClick() event handler. A few notes to programmers thinking about replacing there current submit button with something like this.

#1: This won't fire any onSubmit() event handlers you may have in your opening <form> tag. However, you can create your own onSubmit() event handler by just writing and / or calling a function with this button's onClick() event handler. Then use the form.submit() method to do the submit.

#2: The value returned by this button in you're CGI will be everything between the <button></button> tags. Which can seem sort of strange, but in ASP, where I'm just checked to see if the darn think was pushed, my convention still works because I'm looking for any string to be assigned to that button's name.

Great thinking Robert. I agree, I've seen image swaps and the whole nine yards with developers trying to get an image to have the push down effect like a button.

From my short experience with this button, I don't see anything that you cannot do with this button that you can with any other standard button or submit button. I do see one very cool thing you can do though.... Put a neat little image in there..

Thanks

ToddWW