I noticed the following bug when using $(selector).children().attr("disabled", "disabled") where the children happened to contain a <div>.
Fiddle
<div disabled="disabled">
<input type="text" value="RAGE" />
</div>
Basic testing says FF4/Chrome enable the field. IE9 disables the field.
What is the expected behaviour?
Same for any other non form element (<input>, <select>, etc)
<div> elements do not have a disabled attribute according to the HTML specification. The expected behavior is to prevent your markup from validating correctly.
However, the new HTML5 specification allows for <fieldset> to have a disabled attribute, which disables any nested input fields. It's not widely supported yet though, so you won't be able to rely on this feature for a while.
There is no disabled attribute for the div element. So it should have no effect.
Related
This question already has answers here:
Difference between <input type='button' /> and <input type='submit' />
(4 answers)
Closed 1 year ago.
input type="submit" and button tag are they interchangeable? or if there is any difference then When to use input type="submit" and when button ?
And if there is no difference then why we have 2 tags for same purpose?
http://www.w3.org/TR/html4/interact/forms.html#h-17.5
Buttons created with the BUTTON element function just like buttons created with the INPUT element, but they offer richer rendering possibilities: the BUTTON element may have content. For example, a BUTTON element that contains an image functions like and may resemble an INPUT element whose type is set to "image", but the BUTTON element type allows content.
So for functionality only they're interchangeable!
(Don't forget, type="submit" is the default with button, so leave it off!)
The <input type="button" /> is just a button and won't do anything by itself.
The <input type="submit" />, when inside a form element, will submit the form when clicked.
Another useful 'special' button is the <input type="reset" /> that will clear the form.
Although both elements deliver functionally the same result *, I strongly recommend you use <button>:
Far more explicit and readable. input suggests that the control is editable, or can be edited by the user; button is far more explicit in terms of the purpose it serves
Easier to style in CSS; as mentioned above, FIrefox and IE have quirks in which input[type="submit"] do not display correctly in some cases
Predictable requests: IE has verying behaviours when values are submitted in the POST/GET request to the server
Markup-friendly; you can nest items, for example, icons, inside the button.
HTML5, forward-thinking; as developers, it is our responsibility to adopt to the new spec once it is officialized. HTML5, as of right now, has been official for over one year now, and has been shown in many cases to boost SEO.
* With the exception of <button type="button"> which by default has no specified behaviour.
In summary, I highly discourage use of <input type="submit"/>.
Use <button> tag instead of <input type="button"..>. It is the advised practice in bootstrap 3.
http://getbootstrap.com/css/#buttons-tags
"Cross-browser rendering
As a best practice, we highly recommend using the <button> element
whenever possible to ensure matching cross-browser rendering.
Among other things, there's a Firefox bug that prevents us from
setting the line-height of <input>-based buttons, causing them to not
exactly match the height of other buttons on Firefox."
<input type='submit' /> doesn't support HTML inside of it, since it's a single self-closing tag. <button>, on the other hand, supports HTML, images, etc. inside because it's a tag pair: <button><img src='myimage.gif' /></button>. <button> is also more flexible when it comes to CSS styling.
The disadvantage of <button> is that it's not fully supported by older browsers. IE6/7, for example, don't display it correctly.
Unless you have some specific reason, it's probably best to stick to <input type='submit' />.
I realize this is an old question but I found this on mozilla.org and think it applies.
A button can be of three types: submit, reset, or button. A click on a
submit button sends the form's data to the web page defined by the
action attribute of the element. A click on a reset button
resets all the form widgets to their default value immediately. From a
UX point of view, this is considered bad practice. A click on a button
button does... nothing! That sounds silly, but it's amazingly useful
to build custom buttons with JavaScript.
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/My_first_HTML_form#And_a_<button>_to_finish
<button> is newer than <input type="submit">, is more semantic, easy to stylize and support HTML inside of it.
While the other answers are great and answer the question there is one thing to consider when using input type="submit" and button. With an input type="submit" you cannot use a CSS pseudo element on the input but you can for a button!
This is one reason to use a button element over an input when it comes to styling.
I don't know if this is a bug or a feature, but there is very important (for some cases at least) difference I found: <input type="submit"> creates key value pair in your request and <button type="submit"> doesn't. Tested in Chrome and Safari.
So when you have multiple submit buttons in your form and want to know which one was clicked - do not use button, use input type="submit" instead.
If you are talking about <input type=button>, it won't automatically submit the form
if you are talking about the <button> tag, that's newer and doesn't automatically submit in all browsers.
Bottom line, if you want the form to submit on click in all browsers, use <input type="submit">
This question already has answers here:
Difference between <input type='button' /> and <input type='submit' />
(4 answers)
Closed 1 year ago.
input type="submit" and button tag are they interchangeable? or if there is any difference then When to use input type="submit" and when button ?
And if there is no difference then why we have 2 tags for same purpose?
http://www.w3.org/TR/html4/interact/forms.html#h-17.5
Buttons created with the BUTTON element function just like buttons created with the INPUT element, but they offer richer rendering possibilities: the BUTTON element may have content. For example, a BUTTON element that contains an image functions like and may resemble an INPUT element whose type is set to "image", but the BUTTON element type allows content.
So for functionality only they're interchangeable!
(Don't forget, type="submit" is the default with button, so leave it off!)
The <input type="button" /> is just a button and won't do anything by itself.
The <input type="submit" />, when inside a form element, will submit the form when clicked.
Another useful 'special' button is the <input type="reset" /> that will clear the form.
Although both elements deliver functionally the same result *, I strongly recommend you use <button>:
Far more explicit and readable. input suggests that the control is editable, or can be edited by the user; button is far more explicit in terms of the purpose it serves
Easier to style in CSS; as mentioned above, FIrefox and IE have quirks in which input[type="submit"] do not display correctly in some cases
Predictable requests: IE has verying behaviours when values are submitted in the POST/GET request to the server
Markup-friendly; you can nest items, for example, icons, inside the button.
HTML5, forward-thinking; as developers, it is our responsibility to adopt to the new spec once it is officialized. HTML5, as of right now, has been official for over one year now, and has been shown in many cases to boost SEO.
* With the exception of <button type="button"> which by default has no specified behaviour.
In summary, I highly discourage use of <input type="submit"/>.
Use <button> tag instead of <input type="button"..>. It is the advised practice in bootstrap 3.
http://getbootstrap.com/css/#buttons-tags
"Cross-browser rendering
As a best practice, we highly recommend using the <button> element
whenever possible to ensure matching cross-browser rendering.
Among other things, there's a Firefox bug that prevents us from
setting the line-height of <input>-based buttons, causing them to not
exactly match the height of other buttons on Firefox."
<input type='submit' /> doesn't support HTML inside of it, since it's a single self-closing tag. <button>, on the other hand, supports HTML, images, etc. inside because it's a tag pair: <button><img src='myimage.gif' /></button>. <button> is also more flexible when it comes to CSS styling.
The disadvantage of <button> is that it's not fully supported by older browsers. IE6/7, for example, don't display it correctly.
Unless you have some specific reason, it's probably best to stick to <input type='submit' />.
I realize this is an old question but I found this on mozilla.org and think it applies.
A button can be of three types: submit, reset, or button. A click on a
submit button sends the form's data to the web page defined by the
action attribute of the element. A click on a reset button
resets all the form widgets to their default value immediately. From a
UX point of view, this is considered bad practice. A click on a button
button does... nothing! That sounds silly, but it's amazingly useful
to build custom buttons with JavaScript.
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/My_first_HTML_form#And_a_<button>_to_finish
<button> is newer than <input type="submit">, is more semantic, easy to stylize and support HTML inside of it.
While the other answers are great and answer the question there is one thing to consider when using input type="submit" and button. With an input type="submit" you cannot use a CSS pseudo element on the input but you can for a button!
This is one reason to use a button element over an input when it comes to styling.
I don't know if this is a bug or a feature, but there is very important (for some cases at least) difference I found: <input type="submit"> creates key value pair in your request and <button type="submit"> doesn't. Tested in Chrome and Safari.
So when you have multiple submit buttons in your form and want to know which one was clicked - do not use button, use input type="submit" instead.
If you are talking about <input type=button>, it won't automatically submit the form
if you are talking about the <button> tag, that's newer and doesn't automatically submit in all browsers.
Bottom line, if you want the form to submit on click in all browsers, use <input type="submit">
How to include the autofocus HTML property into an input using ReactJS component?
I tried it with a React element that contains an input with autofocus
<input className='EI-input' autoFocus='true' tabIndex='0'
name='username' type='text'
ref='inputUser' autoComplete='on'
placeholder='email' />
But when rendering to Static Markup I don't see the autofocus property rendered in the browser (inspecting with devTools in Chrome and FireFox)
const jsx = React.renderToStaticMarkup(<InputWithAutoFocus />);
console.log(jsx); // I don't see the autofocus attribute in the input
I also tried with just autoFocus and autoFocus='on' and autofocus. None of these seem to work.
autoFocus should work, according the ReactJS docs.
This is not supported due to the interpretations of different browsers:
"We" decided not to use it because every browser has their unique interpretation of how it should work, literally all browsers do it differently. Overloading it and rendering it to the markup at the same time seems like a bad idea.
see the full thread here
What's the purpose of the label attribute in the <option> tag in HTML5?
All the spec has to say is:
Specifies a label for the option.
MDN provides an explanation I cannot understand:
This attribute is text for the label indicating the meaning of the
option. If the label attribute isn't defined, its value is that of the
element text content.
Usage note: the label attribute is designed to contain a short label
typically used in a hierarchical menu. The value attribute describes a
longer label designed to be used near a radio button, for example.
I wrote a simple case I thought that could shed some light:
<select name="country">
<option value="ES" label="Spain's label">Spain</option>
<option value="FR" label="France's label">France</option>
</select>
... and only found that browsers seem to:
Ignore it (Firefox 26)
Completely replace tag content with it (Explorer 11, Chrome 32, Opera 12)
What is the attribute meant for?
Note: original question assumed the attribute was new. That's incorrect. It's only been enhanced due to newer tags introduced in HTML5.
In practice, it is meant for use inside a datalist element. The idea is that when browsers that do not support this element encounter it, they render its content, by normal principles, and if you want that fallback content to be empty, you need to use elements with empty content there. The label attribute lets you specify a human-readable string for an option, and modern browsers still implement the datalist with option elements properly.
Consider the following example in HTML5 CR:
<label>
Sex:
<input name=sex list=sexes>
<datalist id=sexes>
<option value="Female">
<option value="Male">
</datalist>
</label>
It is implemented so that there is just the text box, but if you type “f” there, the modern browsers suggest “Female”. (There is differences in details here, but that’s not relevant to the question.) Here you don’t need the label attribute.
But if you wanted to have values like 2 and 1 (the ISO/IEC 5218 standard codes for sexes) in the submitted form data, instead of strings “Female” and “Male”, what would you do? Inside a select element you could use <option value=2>Female</option>, but inside a datalist, that would result in the string “Female” being displayed by old browsers, and that would look odd.
Using the label attribute, you can write the datalist element as follows:
<datalist id=sexes>
<option value="2" label="Female">
<option value="1" label="Male">
</datalist>
This is meant to use human-readable words in the user interface and to submit the coded value 2 or 1 as part of form data. In practice, it does not work quite that well. The browser also has to show the coded value, since that’s what will appear in the textbox when the user selects a suggestion made by a browser. Different browsers have solved this in different ways, all with some drawbacks. E.g., on IE, focusing on the text box opens a menu with the alternatives “Female” and “Male”, which is fine, but then, if you click on “Female”, the menu closes and the character “2” appears in the box. It is difficult to say how browsers should deal with this. Anyway, this is where the label attribute is meant to be used.
Looking at this: http://blog.paciellogroup.com/2012/08/notes-on-html5-accessibility-support-in-ie-10/
It's looks like it's more used when you define a separate <datalist> for use as a list for an input.
My other thoughts are around usage for screen readers, however, I can't find any evidence of that.
Remember that <option> isn't limited to use in a <select> element, therefore some properties are more useful when included as part of <optgroup> et al.
Hope this helps.
I have a hidden input field in my form. I noticed that if that field's value is changed by javascript, and then the user refreshes the page, that same value will be set when the page reloads. From what I've seen, this only happens in Firefox.
I've solved this unwanted behaviour by adding autocomplete="off" to that hidden input, but W3C doesn't like this solution, and if i validate the page I get the error:
Attribute autocomplete not allowed on element input at this point.
Apparently, the autocomplete attribute works only on specific inputs - see here.
So is there any solution that will satisfy both W3C and Firefox?
To validate (which I wouldn't put as much effort into as you are) I think you could use autocomplete="off" on the entire form, then turn it back on selectively, like this:
<!DOCTYPE html>
<html>
<head>
<title>TEST</title>
</head>
<body>
<form autocomplete="off">
<input type="hidden" name="test">
<input type="text" name="otherfield" autocomplete="on">
</form>
</body>
</html>
I initially thought this was a Firefox bug but after discussion with robertc in the comments, I think expected behavior depends on specific use cases. The spec doesn't allow autocompletion on hidden fields so my first reaction still feels right, but Firefox's implementation might have some good arguments to support it. Please comment.
Alternatively, you could use <input type="text" style="display: none;" autocomplete="off" /> instead. It's a bit of a hack, but it should work!
The caching in Firefox is actually quite a good feature a lot of the time, but it does cause some problems when you build more dynamic forms.