I came upon a revelation the other day. When attempting to create a submit button by using an image, I ran into a problem where the image was not displayed but the value text was. At the time, this is not what I wanted, but now, as I look back, I see some potential use for this.
If you need to send data to another page, but none of it requires user input, you can either send it in the link (or form) via GET or through a form via POST. The problem is that the former creates ugly URLs and the latter requires a submit button that looks out of place. Of course, I could come up with an image, but what if I just wanted selectable text.
So, I started playing around a bit and Firefox appears to render the following how I desire, as a clickable link that submits a form. All you have to do is remove the src attribute from the input type='image' tag:
<form action='some_page' method='post'>
<input type='hidden' name='email_address' value='test#test.com' />
<input type='image' value='E-mail User' />
</form>
Does this solution work on other browsers? What are the downsides to doing this (aside from the obvious fact that your link CSS isn't applied properly)?
There's no need to use an image input, why not just use a regular submit button and apply some heavy-handed styling to make it look like regular text?
<input type="submit" value="E-mail User" class="link">
<style>
input.link {
border: none;
background: none;
cursor: pointer;
/* etc */
}
</style>
I like a solution that uses an actual link (hidden) that gets exposed via javascript in conjunction with a button inside a noscript tag.
<form action="some_page" method="post">
<input type="hidden" name="email_address" value="test#test.com" />
E-mail User
<noscript>
<input type="submit" value="E-mail User" />
</noscript>
</form>
$('submit-link').click( function() {
$(this).closest('form').submit();
return false;
})
.show();
Using HTML 4.01 Strict it worked on FF3.5, but not on IE8 or Chrome. The link works, but there is no text just a blank spot for a missing image.
So, this would appear to be a bad idea, since it may only work on one browser. To me that is a pretty big downside, unless your only market is for Firefox browsers, then, go ahead, great idea. :)
As James Skidmore suggested, it is easy to do an onclick with javascript to submit it as a post.
I would suggest unobtrusive JS, so, if someone doesn't have JS on then it will work as a link, doing a GET submission, but if they have JS then it would change the behavior to be POST with no ugly url change.
Or, as was mentioned the background of the image can blend in with the form background.
You could instead submit the form dynamically via JS, or use a regular submit button with a transparent or white background.
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 have a form with <input type="submit">. In Chrome submit doesn't do anything. On a Network tab in developer tools I see nothing. No errors in developer tools either. Meanwhile, if I do save a page and open a saved page, then after I press submit button, I see something appears in Network tab. This happens in Chrome and Firefox. This works as expected in IE.
Does anybody have a hindsight, what should I look at?
I don't need a direct answer, I only need to know, where should I look at. If someone posts a direction and that'll help me to solve my problem, I'll accept it as a correct answer.
Structure of a page looks like this:
html
head
body
div
div
form
form
form
form
form
input
input
table
table
tbody
tr..td..input type=submit
If you are not using any JavaScript for form validation then a simple layout for your form would look like this:
<form action="formHandler.php" method="post">
<input name="fname" id="fname" type="text" value="example" />
<input type="submit" value="submit" />
</form>
You need to ensure you have the submit button within the form element and an appropriate action attribute on the form element is present.
For a more direct answer, provide the code you are working with.
You may find the following of use: http://www.w3.org/TR/html401/interact/forms.html
Are you using HTML5? If so, check whether you have any <input type="hidden"> in your form with the property required. Remove that required property. Internet Explorer won't take this property, so it works but Chrome will.
I faced this problem today, and the issue was I was preventing event default action in document onclick:
document.onclick = function(e) {
e.preventDefault();
}
Document onclick usually is used for event delegation but it's wrong to prevent default for every event, you must do it only for required elements:
document.onclick = function(e) {
if (e.target instanceof HTMLAnchorElement) e.preventDefault();
}
Hello from the future.
For clarity, I just wanted to add (as this was pretty high up in google) - we can now use
<button type="submit">Upload Stuff</button>
And to reset a form
<button type="reset" value="Reset">Reset</button>
Check out button types
We can also attach buttons to submit forms like this:
<button type="submit" form="myform" value="Submit">Submit</button>
Check if you are using any sort of jquery/javascript validation on the page and try disabling it and see what happens. You can use your browser's developer tools to see if any javascript file with validate or validation is being loaded. You can also look for hidden form elements (ie. style set to display:none; or something like that) and make sure there isn't a hidden validation error on those that's not being rendered.
I ran into this on a friend's HTML code and in his case, he was missing quotes.
For example:
<form action="formHandler.php" name="yourForm" id="theForm" method="post">
<input type="text" name="fname" id="fname" style="width:90;font-size:10>
<input type="submit" value="submit"/>
</form>
In this example, a missing quote on the input text fname will simply render the submit button un-usable and the form will not submit.
Of course, this is a bad example because I should be using CSS in the first place ;) but anyways, check all your single and double quotes to see that they are closing properly.
Also, if you have any tags like center, move them out of the form.
<form action="formHandler.php" name="yourForm" id="theForm" method="post">
<center> <-- bad
As strange it may seems, it can have an impact.
You can't have a form element as a child (directly or indirectly) of another form element.
If the following does not return null then you need to remove the excess form elements:
document.querySelectorAll('form form');//Must return null to be valid.
check your form is outside the table
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.
Got an odd situation - when I change the "type" of my button from "button" to "image", it stops working. I have done this change 100 times on my site, and I've never come across this issue before.
The relevant code looks like this:
//working
<input type="button" value="Back" onClick="window.location='some/page.php'" />
//not working
<input type="image" src="/link/to/image.png" onClick="window.location='some/page.php'" />
I've tested it by using the first code and checking it transfers me to the desired page. Then I've simply changed the type over and replaced the "value" with the relevant "src". The button displays fine but when clicked, I simply land back on the page I was originally on.
What's really bugging me is that the second snippet of code is working absolutely fine across the rest of my site. It's just this page that it's not working on.
Really confused - anyone encountered this before or got any suggestions?
You need to return false from the event handler to prevent the default action as input type=image acts as a submit button.
You can use also use simple <img /> tag instead of <input />
You have probably put the image map in a form. When you click it you are submitting the form.
You should use a regular link instead. There is no need to use an image map or JavaScript here.
<a href="some/page.php">
<img src="/link/to/image.png" alt="appropriate alternative text goes here">
</a>
as far as I know there are three methods to submit an HTML form without JS or keyboard:
1. input type=submit
2. button tag
3. input type=image
Is there another way to create an element submitting the form on being pressed?
Is it correct to handle button tag (type=submit) same as input type=submit (I mean, if we discard the fact button can contain inner html, we can simply replace button with input type="submit" and the form will be sent correctly)?
Is adding name.x and name.y the only difference when using input type=image?
Not that I know of, those should be the only pure html ways to submit the form other than directly invoking the submit method which is internal Javascript, but that is what the submit button does anyway.
The button element has issues in Internet Explorer regarding which
value it passes, I do not recommend
the use of it.
Yes, they're pretty much the same
As far as I know input type=image is exactly the same except that it
sends those extra coordinate
parameters which you can ignore on the
server-side.
With JavaScript, you can call the form's submit method. However, this should be avoided as it will not work if the user has JavaScript disabled.
No, because a button tag can be given a value separate from the text displayed on the button, not to mention the <button> tag's ability to inline HTML. (For example <button type="submit"><img src="submit.png" alt="Submit"></button>).
Yes, the main feature of <input type="image"> is the addition of the x and y coordinates.
You can use JavaScript to simulate it. I'd take an <input type="submit"> and replace it with the element that you'd like to submit a form with, so it's still accessible for users without JavaScript.
<input type="submit" id="submit-button" value="submit" />
Then in JavaScript (using jQuery in this example):
$('#submit-button').remove().after('Submit form');
$('#submit-link').click( function(event){
event.preventDefault();
$('#submit-link').closest('form').submit();
});