http://jsfiddle.net/4LXkE/
The code:
<form>
<input type="text" name="name" id="name" placeholder="Name*" required="required" />
<input type="submit" />
</form>
In the above fiddle, you can see that in IE9+ (that's what my target browser is) the input box is surrounded by an ugly red highlight and a popup message to show it is a required field.
I found the following question which is close, but doesn't give a full answer to my specific question:
override css for html5 form validation/required popup
In my application I have my own stylings (twitter bootstrap defaults) but they are hidden behind these styles which show up.
While I tried to debug the app in Developer tools, i couldn't find what CSS classes were being added or how.
Any help turning these off would be much appreciated, thanks!
IE9 does not support the "required" attribute natively, and it is not part of the UA stylesheet.
Are you using Modernizr or something similar along with Bootstrap? In IE9, the "required" attribute is useless without a polyfill. (see caniuse or this article for more information) Please look at Modernizr for a solution to this problem. If you're using a polyfill already, you should be able to style the shim element to get the appearance you want.
I just started with twitter bootstrap.
I want to create a disabled form field. In the documention I found this snippet:
<input type="text" placeholder="Disabled input here..." disabled>
But in IE9 the placeholder doesn' work. When I use the value attribute to set the content it works (and overwrite the palceholder text, which worked in other browsers like chrome).
There is an alternative way without using the input element:
<span class="uneditable-input">Some value here</span>
This also works in IE9 and chrome. Which solution is better (compatible with old browsers, like IE8, 7 (and 6) ?
I found out, when I want to use the Prepended and appended inputs of twitter bootstrap
I must use the input element. It doesn't work with the span element.
Example:
<div class="input-prepend">
<span class="add-on">#</span>
<input class="span2" id="prependedInput" type="text" placeholder="Username">
</div>
<div class="input-append">
<input class="span2" id="appendedInput" type="text">
<span class="add-on">.00</span>
</div>
IE 7/8/9 doesn't support the HTML5 placeholder. The best solution must be to use a script/plugin that provide the functionality (when it does not exist)
See https://github.com/miketaylr/jQuery-html5-placeholder
I also have had great experiences with http://jquery-watermark.googlecode.com/
They both use the HTML5 if it is available, and emulate it if it's not.
They are incredible simple to use. To use watermark for instance, just include it and add a line to your document.ready()
$("#my-input").watermark('default text');
<span class="uneditable-input">Some value here</span>
is better imho..
Reason- it will act as expected in new and old browsers and it doesn't depend on any external script but only css style uneditable-input
When you can simply echo your value in a span tag than why to use a disabled form field..??
The placeholder attribute is HTML5 and does not work in many browsers, especially older ones, which is why it doesn't work in IE9. (Microsoft doesn't follow standards even in IE9.)
If your question is if a span would be more compatible than the placeholder attribute, then yes it is. A span should be supported by all browsers.
You could go with the javascript alternative...
<input type="text" placeholder="Disabled input here..." onfocus="this.blur()" />
Hi all I have been looking around as I am fed up with the lack of compatibility for styling submit buttons.
I was looking at no other than facebook themselves source.
They do something like this:
<label class="uiButton uiButtonLarge Post">
<input type="submit" value="Post" />
</label>
They set the css display for the label as an inline-block and then set padding etc..
Is this the best way to do it?
Or is there an even better way?
Thanks!
http://www.tripwiremagazine.com/2010/03/35-essential-submit-button-enhancements.html
This tutorials should be fine, sure they're not identical with FB but there are crossbrowser stylings to pure css. Hope that helps.
I'm styling a form that was already marked up (made some markup changes), and I normally work in Firefox to style so I can use firebug and the web developer toolbar.
On this project, I noticed that my styles are displaying quite differently for one particular area (several elements) in webkit based browsers Chrome and Safari, than in Firefox (we won't even get into Internet Explorer, although it is siding with the Firefox display).
I can't figure out though why the styles are displaying so differently. Normally there is some rule that I'm neglecting that Firefox just takes for granted, and the others need it specified. But here I'm not getting why it's displaying this way. In particular I'm referring to the bottom area of the form where users can enter their contact info, then submit the form. I'll attach screen shots for reference as to the discrepancy.
Here's the URL so feel free to check it out on your own. Although be advised that this is a production page (already released) so if you try out the form, you WILL BE added to CURE's contact database.
http://www.helpcurenow.org/survey2010
Here's the screen shots:
Firefox (the way I intend it to look) alt text http://static.helpcurenow.org/images/test/firefox.jpg
Chrome, and then Safari - strange change to submit button alt text http://static.helpcurenow.org/images/test/chrome.jpg
alt text http://static.helpcurenow.org/images/test/safari.jpg
As a bonus, if anybody wants to help me with figuring out why on earth IE7 wants to not show the background behind the questions only, and how to fix that I would be much obliged!
Thanks very much.
Your <ol> is not closed, which makes webkit place the submit button inside the <fieldset> in an attempt to fix up your code.
FF and Webkit browsers do have a few differences, I have encountered them as well, especially with forms!
I solved it by splitting my CSS to target the two browsers with the CSS Browser Selector script. Worked wonders, just set some things differently for Webkit and fixed the whole thing.
Do you have a live example or some source code to post up so we can help you more with your IE7 issues as well?
Hope that helps.
Edit:
<ol>
<li class="contact-info">
<label class="field-required" for="first_name">First Name</label>
<input type="text" size="35" maxlength="250" name="first_name" value="" id="first_name" />
</li>
<li class="contact-info">
<label class="field-required" for="last_name">Last Name</label>
<input type="text" size="35" maxlength="250" name="last_name" value="" id="last_name" />
</li>
<li class="contact-info">
<label class="field-required" for="email_address">Email Address</label>
<input type="text" size="35" maxlength="100" name="email_address" value="" id="email_address" />
</li>
</fieldset>
<!--TransactionFields section end-->
<script language="JavaScript" type="text/javascript">
...
</script>
<div class="button-row">
<input type="button" name="SubmitButton" id="SubmitButton" value="Submit" onclick="SubmitForm425952(form);" class='HtmlButton' />
</div>
</form>
<!--form javascript-->
<script language="JavaScript">
...
</script>
NO OL
</div></td></tr>
</table>
</div>
<!--End Featured Content-->
Your <ol>hasn't been closed after the second script tag.
You may have forgotten -moz specific css rules.
For example - to use box-sizing you may have to specify -moz-box-sizing
Have you used browser reset css. Different browsers have different default styles for various elements, the reset CSS resets all these default styles so that stuff looks similar in all browsers.
I started using a diagnostic css stylesheet, e.g.
http://snipplr.com/view/6770/css-diagnostics--highlight-deprecated-html-with-css--more/
One of the suggested rules highlights input tags with the type submit, with the recommendation to use <button> as a more semantic solution. What are the advantages or disadvantages of <button> with type submit (such as with browser compatibility) that you have run across?
Just to be clear, I understand the spec of <button>, it has a defined start and end, it can contain various elements, whereas input is a singlet and can't contain stuff. What I want to know essentially is whether it's broken or not. I'd like to know how usable button is at the current time. The first answer below does seem to imply that it is broken for uses except outside of forms, unfortunately.
Edit for 2015
The landscape has changed! I have 6 more years experience of dealing with button now, and browsers have somewhat moved on from IE6 and IE7. So I'll add an answer that details what I found out and what I suggest.
When using <button> always specify the type, since browsers default to different types.
This will work consistently across all browser:
<button type="submit">...</button>
<button type="button">...</button>
This way you gain all of <button>'s goodness, no downsides.
Answering from an ASP.NET perspective.
I was excited when I found this question and some code for a ModernButton control, which, in the end, is a <button> control.
So I started adding all sorts of these buttons, decorated with <img /> tags inside of them to make them stand out. And it all worked great... in Firefox, and Chrome.
Then I tried IE6 and got the "a potentially dangerous Request.Form value was detected", because IE6 submits the html inside of the button, which, in my case, has html tags in it. I don't want to disable the validateRequest flag, because I like this added bit of data validation.
So then I wrote some javascript to disable that button before the submit occurred. Worked great in a test page, with one button, but when I tried it out on a real page, that had other <button> tags, it blew up again. Because IE6 submits ALL of the buttons' html. So now I have all sorts of code to disable buttons before submit.
Same problems with IE7. IE8 thankfully has this fixed.
Yikes. I'd recommend not going down this road IF you are using ASP.NET.
Update:
I found a library out there that looks promising to fix this.
If you use the ie8.js script from this library: http://code.google.com/p/ie7-js/
It might work out just fine. The IE8.js brings IE5-7 up to speed with IE8 with the button tag. It makes the submitted value the real value and only one button gets submitted.
Everything you need to know: W3Schools <button> Tag
The tag is supported in all major browsers.
Important: If you use the button element in an HTML form, different browsers will submit different values. 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.
Pros:
The display label does not have to be the same as the submitted value. Great for i18n and "Delete this row"
You can include markup such as <em> and <img>
Cons:
Some versions of MSIE default to type="button" instead of type="submit" so you have to be explicit
Some versions of MSIE will treat all <button>s as successful so you can't tell which one was clicked in a multi-submit button form
Some versions of MSIE will submit the display text instead of the real value
From https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button:
IE7 has a bug where when submitting a form with Click me, the POST data sent will result in myButton=Click me instead of myButton=foo.
IE6 has an even worse bug where submitting a form through a button will submit ALL buttons of the form, with the same bug as IE7.
This bug has been fixed in IE8.
An important quirk to be aware of: In a form that contains a <button/> element, IE6 and IE7 will not submit the form when the <button/> element is clicked. Other browsers, on the other hand, will submit the form.
In contrast, no browsers will submit the form when <input type="button"/> or <button type="button"/> elements are clicked. And naturally, all browsers will submit the form when <input type="submit"/> or <button type="submit"/> elements are clicked.
As #orip's answer says, to get consistent submit behavior across browsers, always use <button type="button" /> or <button type="submit" /> inside a <form/> element. Never leave out the type attribute.
I've had some experience with the quirks of <button> now, 6 years later, so here are my suggestions:
If you're still supporting IE6 or IE7, be very careful with button, the behavior is very buggy with those browsers, in some cases submitting the innerHtml instead of value='whatever' and all button values instead of just one and wonky behavior like that. So test thoroughly or avoid for those browser's sake.
Otherwise: If you're still supporting IE8, <a href='http://example.com'><button></button></a> doesn't work well, and probably anything else where you nest a button inside a clickable element. So watch out for that.
Otherwise: If you're using a <button> mainly as an element to click for your javascript, and it's outside of a form, make it <button type='button'> and you'll probably be just fine!
Otherwise: If you're using <button> in a form, be wary that the default type of <button> is actually <button type='submit'> in (most) cases, so be explicit with your type and your value, like: <button type='submit' value='1'>Search</button>.
Note that: Using a button-mimic class, like Bootstrap's .btn allows you to just make things like <div> or <a> or even <button> look exactly the way you want it to, and in the case of <a> have a more useful fallback behavior. Not a bad option.
TLDR; Ok to use if you don't care about ancient browsers, but Bootstrap provides even more robust css visually similar alternatives worth looking into.
Is it broken or not:
As usual, the answer is "it works fine in all major browsers, but has the following quirks in IE." I don't think it will be a problem for you though.
The <button> tag is supported by all the major browsers. The only support problem lies in what Internet Explorer will submit upon pressing a button.
The major browsers will submit the content of the value attribute. Internet exploter will submit the text between the <button> and </button> tags, while also submitting the value of every other one in the form, instead just the one you clicked.
For your purposes, just cleaning up old HTML, this shouldn't be a problem.
Sources:
http://www.peterbe.com/plog/button-tag-in-IE
http://www.w3schools.com/tags/default.asp
Here's a site that explains the differences:
http://www.javascriptkit.com/howto/button.shtml
Basically, the input tag allows just text (although you can use a background image) while the button allows you to add images, tables, divs and whatever else. Also, it doesn't require it to be nested within a form tag.
You might also run into these problems:
jQuery cannot target the button (not jQuery's fault, though): <button> in IE7
Multiple request variables if there are >1 <button>s: http://www.peterbe.com/plog/button-tag-in-IE
Another thing is related to styling it using the sliding-door technique: you need to insert another tag e.g. <span> to make it work.
as far as I am concerned the difference between submit and button tags is this:
gives you the option to have different text displayed than the element's value
Let's say you have a list of products then next to each product you want a button to add it to the customer's cart:
product1 : <add to cart>
product2 : <add to cart>
product3 : <add to cart>
then you could do this:
<button name="buy" type="submit" value="product2"> add to cart </button>
Now the problem is that IE will send the form with value="add to cart" instead of value="product2"
The easiest way to workaroound this issue is by adding onclick="this.value='product2'"
So this:
<button name="buy" type="submit" value="product2" onclick="this.value='product2'"> add to cart </button>
will do the trick on all major browsers - I have actually used this on a form with multiple buttons and works with Chrome Firefox and IE
Looks like the main reason to use <button> is to allow for CSS markup of that button and the ability to style the button with images: (see here: http://www.javascriptkit.com/howto/button.shtml)
However, I think the more adopted approach I've seen in (X)HTML + CSS is to use a div and style it completely with images and :hover pseudo-classes (simulating button downpress... can't add more than one link per answer, so just google "div button" you'll see lots of examples of this), and using javascript to do form submission or AJAX call... this also makes even more sense if you don't use HTML forms, and do all submissions with AJAX.