I am doing the following:
<a href="www.stackoverflow.com">
<button disabled="disabled" >ABC</button>
</a>
This works good but I get a HTML5 validation error that says "Element 'button' must not be nested within element 'a button'.
Can anyone give me advice on what I should do?
No, it isn't valid HTML5 according to the HTML5 Spec Document from W3C:
Content model: Transparent, but there must be no interactive content descendant.
The a element may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links).
In other words, you can nest any elements inside an <a> except the following:
<a>
<audio> (if the controls attribute is present)
<button>
<details>
<embed>
<iframe>
<img> (if the usemap attribute is present)
<input> (if the type attribute is not in the hidden state)
<keygen>
<label>
<menu> (if the type attribute is in the toolbar state)
<object> (if the usemap attribute is present)
<select>
<textarea>
<video> (if the controls attribute is present)
If you are trying to have a button that links to somewhere, wrap that button inside a <form> tag as such:
<form style="display: inline" action="http://example.com/" method="get">
<button>Visit Website</button>
</form>
However, if your <button> tag is styled using CSS and doesn't look like the system's widget... Do yourself a favor, create a new class for your <a> tag and style it the same way.
If you're using Bootstrap 3, this works quite well
Primary link
Link
I've just jumped into the same issue and I solved it substituting 'button' tag to 'span' tag. In my case I'm using bootstrap. This is how it looks like:
<a href="#register">
<span class="btn btn-default btn-lg">
Subscribe
</span>
</a>
No.
The following solution relies on JavaScript.
<button type="button" onclick="location.href='http://www.stackoverflow.com'">ABC</button>
If the button is to be placed inside an existing <form> with method="post", then ensure the button has the attribute type="button" otherwise the button will submit the POST operation. In this way you can have a <form> that contains a mixture of GET and POST operation buttons.
It would be really weird if that was valid, and I would expect it to be invalid. What should it mean to have one clickable element inside of another clickable element? Which is it -- a button, or a link?
These days even if the spec doesn't allow it, it "seems" to still work to embed the button within a <a href...><button ...></a> tag, FWIW...
Another option is to use the onclick attribute of the button:
<button disabled="disabled" onClick="location.href='www.stackoverflow.com'" >ABC</button>
This works, however, the user won't see the link displayed on hover as they would if it were inside the element.
You can add a class to the button and put some script redirecting it.
I do it this way:
<button class='buttonClass'>button name</button>
<script>
$(".buttonClass').click(function(){
window.location.href = "http://stackoverflow.com";
});
</script>
why not..you can also embeded picture on button as well
<FORM method = "POST" action = "https://stackoverflow.com">
<button type="submit" name="Submit">
<img src="img/Att_hack.png" alt="Text">
</button>
</FORM>
Explanation and working solution here:
Howto: div with onclick inside another div with onclick javascript
by executing this script in your inner click handler:
if (!e) var e = window.event;
e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation();
It is illegal in HTML5 to embed a button element inside a link.
Better to use CSS on the default and :active (pressed) states:
body{background-color:#F0F0F0} /* JUST TO MAKE THE BORDER STAND OUT */
a.Button{padding:.1em .4em;color:#0000D0;background-color:#E0E0E0;font:normal 80% sans-serif;font-weight:700;border:2px #606060 solid;text-decoration:none}
a.Button:not(:active){border-left-color:#FFFFFF;border-top-color:#FFFFFF}
a.Button:active{border-right-color:#FFFFFF;border-bottom-color:#FFFFFF}
<p><a class="Button" href="www.stackoverflow.com">Click me<a>
Use formaction attribute inside the button
PS! It only works if your button type="submit"
<button type="submit" formaction="www.youraddress.com">Submit</button>
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">
I am not sure if this is a very silly question but lately I have been having this in my mind. I want to know if there is a difference between
<button value = "SomeValue"></button>
and
<button>SomeValue</button>
Is there something that I really need to understand with the way these tags work?
Have you acually tried it?
The first one:
<button value="SomeValue"></button>
Does not show a label on the button
The second one:
<button>SomeValue</button>
does
<button>SomeValue</button> is the correct syntax for a clickable button. Alternatively, <button value="SomeValue"></button> does not, with the button not displaying the label. the value attribute was originally made for the input tag back in HTML4
HTML4:
<input type="submit" value="Some Value"/>
HTML5:
<button>Some Value</button>
Both of these are equivalent and backwards compatible
<button value="SomeValue"></button>
This is an html attribute. Defines a default value which will be displayed in the element on page load.
valid elements to have value attribute.
<button>, <option>, <input>, <li>, <meter>, <progress>, <param>
In your second example:
<button>SomeValue</button>
This one is the content of the element(in this case is plain text). Other than these you can notice those differences for example if you handle this elements in javasacript. For example:
var btn1 = document.getElementsByTagName("button")[0];
var btn2 = document.getElementsByTagName("button")[1];
console.log(btn1.value); //prins someValue
console.log(btn2.innerHTML); //prins SomeValue
<button value="someValue"></button>
<button>SomeValue</button>
In empty elements like inputs the attribute value is also and the display value:
<input type="text" value="someValue" />
References
Element.innerHTML
the following code works in FF, but it does not work in IE8.
<a class="sub">
<input type="submit" a="" none;<="" display:="">
</a>
The button is displayed, but the button is not clickable in IE8. What is going on?
Here is a correctly formed input submit button:
<input type="submit" value="Submit">
I noticed the words display and none usually you'd find it in the following form:
<input type="submit" value="Submit" style="display:none;"> // this however will hide the button
The attribute of type= with the value of "submit" makes our input tag into a submit button.
The attribute of value= with the value of "Submit" displays "Submit" text on our input button.
The attribute of style= allows us to do some inline css like "display:none;" which hides a html element its declared on.
I recommend checking out W3Schools for more on html input tags.
Additionally you are trying to make the button into a link using the <a> tag, this is invalid, please take a look at this Html forms and input page to see how to use the submit input type.
If you just want a link then I'd recommend looking at an <img> for a button and an <a> tag around that.
I do not have comment privileges on this SE yet but I would say that IE is incapable if interpreting: <input type="submit" a="" none;<="" display:="">
When you open "input" you do not close it until after display. the addition of the "none;<" is probably interpreted as another attempt at a tag and breaking html. I'm not sure what you are trying to accomplish but get rid of this:
none;<=""
The code is a mess, but it actually works in IE8, so any problem you are seeing is caused by something outside the code you posted.
Browsers will ignore the crap inside the input tag and recognize it simply as <input type="submit">. Some browsers might conceivably choke on the “<” character there, but IE8 doesn’t.
The a element wrapper outside it has no effect as such.
i am using this plain html code inside an aspx page. it renders well, but when clicked it submits / reloads the page. i dont want anything to be done on click of this button. whats d issue
<button>
btn1</button>
<button>
btn2</button>
It'll default to type=submit if no type is explicitly given.
You want to put
<button type="button">btn1</button>
Not sure if by pure html you can do so however this way you can black the default submit behaviour:
<button id="a" onclick="return false;">button</button>
Don't use <button>. Use <input> instead:
<input type="button" id="btn1" />
Also, worth noting (from http://www.w3schools.com/tags/tag_button.asp):
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.
I have ASP.Net code generating my button's HTML for me using divs to get it to look and behave how I want. This question is regarding the HTML produced by the ASP.Net code.
A standard button is easy, just set the onClick event of the div to change the page location:
<div name="mybutton" id="mybutton" class="customButton" onClick="javascript:document.location.href='wherever.html';">
Button Text
</div>
This works great, however, if I want a button like this to submit the form in which it resides, I would have imagined something like below:
<form action="whatever.html" method="post">
<div name="mysubmitbutton" id="mysubmitbutton" class="customButton" onClick="javascript:this.form.submit();">
Button Text
</div>
</form>
However, that does not work :( Does anyone have any sparkling ideas?
onClick="javascript:this.form.submit();">
this in div onclick don't have attribute form, you may try this.parentNode.submit() or document.forms[0].submit() will do
Also, onClick, should be onclick, some browsers don't work with onClick
Are you aware of <button> elements? <button> elements can be styled just like <div> elements and can have type="submit" so they submit the form without javascript:
<form action="whatever.html" method="post">
<button name="mysubmitbutton" id="mysubmitbutton" type="submit" class="customButton">
Button Text
</button>
</form>
Using a <button> is also more semantic, whereas <div> is very generic. You get the following benefits for free:
JavaScript is not necessary to submit the form
Accessibility tools, e.g. screen readers, will (correctly) treat it as a button and not part of the normal text flow
<button type="submit"> becomes a "default" button, which means the return key will automatically submit the form. You can't do this with a <div>, you'd have to add a separate keydown handler to the <form> element.
There's one (non-) caveat: a <button> can only have phrasing content, though it's unlikely anyone would need any other type of content when using the element to submit a form.
To keep the scripting in one place rather than using onClick in the HTML tag, add the following code to your script block:
$('#id-of-the-button').click(function() {document.forms[0].submit()});
Which assumes you just have the one form on the page.
Why does everyone have to complicate things. Just use jQuery!
<script type="text/javascript">
$(document).ready(function() {
$('#divID').click(function(){
$('#formID').submit();
)};
$('#submitID').hide();
)};
</script>
<form name="whatever" method="post" action="somefile.php" id="formID">
<input type="hidden" name="test" value="somevalue" />
<input type="submit" name="submit" value="Submit" id="submitID" />
</form>
<div id="divID">Click Me to Submit</div>
The div doesn't even have to be in the form to submit it. The only thing that is missing here is the include of jquery.js.
Also, there is a Submit button that is hidden by jQuery, so if a non compatible browser is used, the submit button will show and allow the user to submit the form.
A couple of things to note:
Non-JavaScript enabled clients won't be able to submit your form
The w3c specification does not allow nested forms in HTML - you'll potentially find that the action and method tags are ignored for this form in modern browsers, and that other ASP.NET controls no longer post-back correctly (as their form has been closed).
If you want it to be treated as a proper ASP.NET postback, you can call the methods supplied by the framework, namely __doPostBack(eventTarget, eventArgument):
<div name="mysubmitbutton" id="mysubmitbutton" class="customButton"
onclick="javascript:__doPostBack('<%=mysubmitbutton.ClientID %>', 'MyCustomArgument');">
Button Text
</div>
You have the button tag
http://www.w3schools.com/tags/tag_button.asp
<button>What ever you want</button>