This question already has an answer here:
What's the proper way to add selected and related attributes to inputs?
(1 answer)
Closed last month.
Is there a standard way of adding attributes like disabled, checked etc. to different input elements in HTML forms?
The MDN documentation (https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled) simply seems to be using the shorthand version in its examples.
<option disabled>Option 2.2</option>
However, MDN didn't seem to mention anywhere is using disabled="disabled" or simply disabled is the correct way to do it. Does it not matter at all now?
The HTML spec (https://www.w3.org/TR/html51/sec-forms.html#enabling-and-disabling-form-controls-the-disabled-attribute) doesn't provide any examples.
There is an old related question What's the proper way to add selected and related attributes to inputs? but I am wondering if the spec or recommendations have changed since then.
The attributes you are talking about are boolean attributes and they do exactly what they mean e.g: disabled for disabling an input/button. A standard way of applying it is <input type="text" disabled> using <input type="text" disabled="disabled"> is not necessary cos it does not do any difference
see the code snippet bellow so a standard way off using those attributes is just using them as they are
.btn{
border-radius: 0px;
position: relative;
padding: 10px 10px 10px 10px;
}
<button class="btn" disabled="no" >Click me (no)</button>
<button class="btn" disabled="yes" >Click me (yes) </button>
<button class="btn" disabled="disabled" >Click me (disabled)</button>
refer to w3schools for clarity
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">
This question already has answers here:
<button> vs. <input type="button" />. Which to use?
(16 answers)
Closed 8 years ago.
In order to use an image as a form's submit button, I have come across two ways and would like to know which one is correct/best-practice.
Version 1:
<button type="submit">
<img src="mybutton.jpg" alt="Submit" />
</button>
Version 2:
<input type="image" src="mybutton.jpg" border="0" alt="Submit" />
I personally feel that the first version is better because it makes semantic sense and has a type of "submit". In the second version its saying the input is of type "image" which doesn't mean much to me as a human.
Which one should I go with?
Personally I would set it as a background rather than an image inside the button. So you would get the following.
<button type="submit" class="styledButton></button>
<style>
.styledButton {
background: url('mybutton.jpg') no-repeat;
}
</style>
That is just a matter of style, there is not really a "better" way, use the way you feel your code to be more clean with.
My personal opinion is that all form elements should be "<input>" because that feels more natural for me. I don't like it when things doing the same stuff (being form-elements in this case) looks different of having a different syntax, so I declared this to my personal standard.
However the most annoying thing is that an image, or <input type="image"> will not transfer name="" and value="" when submitting a form, that's why it is bad to use incase you have multiple "buttons" decorated as images in a form and you want to know which one was pressed.
In that case the best opinion is to make an <input type="submit"> and let it look like an image using CSS.
However, my statement for this question is: do it the way you feel best but keep it that way and don't switch around. Decide for one "standard" and use it always. Will make your code more strict and easier to read.
I personally use CSS to apply an image to submit button
Reason behind this is : you don't need to write the same code everywhere, just calling the css class will be sufficient
Instead of above 2 versions mentioned by you.
Try This:
<div id="submitForm">
<input type="submit" value="Submit" name="submit">
</div>
CSS
div#submitForm input {
background: url("mybutton.jpg") no-repeat scroll 0 0 transparent;
color: #000000;
cursor: pointer;
font-weight: bold;
height: 20px;
padding-bottom: 2px;
width: 75px;
}
Given the following two buttons:
<button type="submit" name="MyButton" value="Foo">Do Foo</button>
<button type="submit" name="MyButton" value="Bar">Do Bar</button>
When clicking these buttons, all browsers except IE7 and below will post the button's value ("Foo" or "Bar"), whereas IE7 and below instead post the text ("Do Foo" or "Do Bar").
(This is an MVC project, but the issue is not specific to MVC.)
This thread has a lot of answers, but none of them will work when:
The value and text are different, and
JavaScript is disabled
We want to support flexible button text so that business can change these through our CMS without a code change. So we can't assume that our text and values will be the same. But we also don't want to depend on JavaScript to solve this.
However, I can't think of any way to solve this without either requiring JavaScript, or keeping the value and text the same.
The usual hack is to key off the name instead of the value.
<button type="submit" name="MyButton_foo" value="Foo">Do Foo</button>
<button type="submit" name="MyButton_bar" value="Bar">Do Bar</button>
Then search the submitted form values for ones that match the pattern /^MyButton_(.*)$/. There are some examples for a variety of languages (although not C#) in an article I wrote some years ago.
I've writen some code here: http://jsfiddle.net/anhtran/kXsj9/8/
Users have to select at least 1 option on the group. But it makes me must click all of them to submit the form. How to do this issue without javascript?
Thanks for any help :)
I think this html5 attribute is only supposed to define which fields are required.
You cant put logic in to say "at least one is required".
You will need to add custom javascript for this to work (and/or have validation on the server side).
hope this helps...
The ideal answer would be to use HTML5 and the required attribute as part of a select element, like so:
<form method="post" action="processForm.php">
<label for="myLanguages">What languages can you program in?</label>
<br>
<select id="myLanguages" multiple required>
<option value="C#">C#
<option value="Java">Java
<option value="PHP">PHP
<option value="Perl">Perl
<option value="Haskell">Haskell
</select>
<br>
<input type="submit" value="Submit">
</form>
Yes, I know they are not checkboxes, but the end functionality is exactly what you want. Sadly, neither IE 9 nor Safari 5 currently have support for the required attribute. Chrome 13 and FF 5, however, do. (Tested on Win 7)
I thought it'd be possible, to do in part, what you were after using CSS. Not using the required attribute but to instead hide the submit button if nothing was selected.
You'd get rid of the required attributes and use CSS similar to this:
input[type=submit] {
display:none;
}
input[type=checkbox]:checked ~ input[type=submit] {
display:block;
}
However, that particular CSS is not working on my version of Google Chrome. I've made a question regarding it here. It seems to be working fine on my FF 3.6 though.
You can't do this without javascript.
What you can do is select a default option and set it as selected.
But it can't assure you that a checkbox is selected when the form is submitted.