In a typical round of doing Internet Explorer clean up at the end of a project, I had to figure out why my <button>Submit</button> wasn't submitting a form in IE.
I did a search on "html button" and went to the w3c HTML 4.01 specifications:
type = submit|button|reset [CI]
This attribute declares the type of the button. Possible values:
submit: Creates a submit button. This is the default value.
reset: Creates a reset button.
button: Creates a push button.
So the default is submit. But Internet Explorer has obviously forgotten this in IE6 and IE7. I found it worked without type="submit" in Firefox, Safari, Chrome and Opera. I haven't tested in IE8 because I don't have it installed. Maybe someone wants to check it out? Here is a demo page.
So I guess we should get in the habit of using:
<button type="submit">Submit</button>
Yep, same thing. I guess I'll add it to my list of "why form is not submitting" list (in russian though)
http://kurapov.name/technology/ui/js/submitting_form/
The default appears to be working in IE8 -- both forms in your demo page post just fine!
"<button type="submit">Submit</button>",IE8 works!
"<button>Submit</button>" not!
Why would you use <button> instead of <input>?
Are you guys new to web development? I thought you were supposed to be experts?
Use:
<input type="submit" value="Text to appear on button" />
And then you won't have to post to your blog and expose how inexperienced you are when you can't make a submit button work.
Ugh.
@jack I never used to use buttons either, I only started using buttons recently, hence the learning bump.
I like buttons. I think they're swell. What's wrong with buttons?
Buttons blow.
@jack
Not knowing when to use <button> instead of <input> makes YOU look really inexperienced.
I'm using it right now because I need to style the submit button with a sliding doors technique that works in FF3 and IE6+7.
<button><span><span>Jack is rude and ignorant</span></span></button>
Umm, yeah, no.
Nesting spans because you have no skills _proves_ you are inexperienced, weak, and you have a gay porn mustache. Beat it.
hey guys, this is suppose to be a learning blog, heheeh, please stop that...
well i'm using <input type="submit" /> in my works since JSF's <h:commandButton /> generates that..
if you put <button /> tags inside a form, the values submitted will vary from browser to browwer. Internet Explorer will submit the text between the <button> and </button> tags, while other browsers will submit the content of the value attribute. Use the input element to create buttons in an HTML form.
I can't make the input type="submit" work if I use it the correct way or with buttons. It just is not working in IE 8. Works in everything but. I can use the a href link and it works fine. I can make it pop up using onclick but I can not make a regular input take me to another page of my site. IF YOU know how to do this, tell me what I am missing.
@TWStyles:
So what do you want to do? you wanna navigate to another page using a simple input button? If that is the case, in your server side code, you will check the submitted data then you can issue a redirect command to another page. If in case it is just a simple navigation w/o the need of data submitted, you can use a javascript to change the location.href property.
Are you for serious that submit buttons don't work in IE 6 and 7 unless you have type="submit"? Shooot. Now I hafta set up some test environment or other. IE 6,7 dont run on Windows 7. I bet I've been losing mad stupid conversions.
Hey Jack, get off your high horse and stop being an ass. If you can't contribute to help people, keep quiet.
@TWStyles: maybe you have a <form> within a <form>? IE tends not to like that... In any case you shouldn't be using a submit input to navigate to another page on the site unless you are submitting search parameters in a GET request, that is what the A tag is for.
@Jack: You might be nesting a span because you want your button to be variable width but use a single background image. Your presumptuousness about people's skill level is appalling.
epic troll
management
IE8 gets this right most of the time... but if your site is in the Local Intranet zone the default for a button is still type="button" in IE8!
In IE8 it works, but IE 7 fails submitting if type is not set.
Thanks for this post, it saved my day!
Where is Jack? lol
Five top reasons to use <button> tags:
1) they may contain (more or less) arbitrary HTML, making them cool
2) they are more easily styled than <input> tags
3) If you use Dean Edwards excellent script, IE7.js, then they will behave properly in all versions of IE (assuming js is enabled)...making them identical to their <input> counterparts, but more flexible
4) They are semantically 'cleaner'
5) They are getting a huge facelift in HTML5
Nuf said.
PS. I've been building websites since before Jack was in diapers.
Great! Finally I fix the problem!