I didn't realize this, and just want to confirm.
If I have a html form, and an input tag of type image like:
<input type="image" name="blah" src="..." />
Clicking on the image will submit the form?
My use case is, I want to create a custom button for a submit button.
Yes, input-images will submit the form naturally. See: http://w3schools.com/tags/att_input_type.asp
image: Defines an image as a submit button
Related
I have a small welcome screen on a website which asks users to either log-in or sign-up. Pretty standard stuff.
The log-in button is within a form so it is a <input type="submit"> element.
However the Sign-up button is not within a form. Its purpose is just to send people to another page where they can register. But I want this this button to look the same as the button that says "log-in" for consistency/aesthetics.
What would be best-practice for the Sign-up link I want to achieve:
Use a <input type="button"> element within a form that takes the user to register
Use a standard hyperlink but style it in CSS so that it looks like a button
If it's semantically a link, but styled as a button, use an <a> element with CSS to make it look like a button.
I have single file upload feature on my site.
To improve CSS I have added two buttons on my html. one with input type as file and another as button. Input type file is hidden by setting opacity 0 and input type button on top. When I clicked on button I have setup onclick event which triggers the click event of browse button which popup image uploader.
When I selects image and submit the form I don't get any details of file in my $_POST.
Why I am doing this, because input type file comes with one text box and a button to its right corner. To open a popup user can single click on button or double click on text box. I want to avoid double clicking.
Any better solution will be appreciated.
Thanks!!
We can click even if an input got opacity 0 !
In your html:
<input type="file" style="visibility:hidden;" id="uploadme" />
<input type="button" id="clickme" value="Upload Stuff!" />
js:
$(function(){
$('#clickme').click(function(){
$('#uploadme').click();
});
});
Now you can stylize your button how you will!
Could I have something like <INPUT TYPE="SUBMIT" NAME=submit VALUE=Submit>, but instead of being a submit button, it could be an image? Is there something like href?
The simplest way is to use an image as a submit button employing the HTML form tag.
<input type="image" src="IMAGE.GIF" alt="Submit button">
However, you can also use Javascript for more robustness
<a href="javascript:document.your_form_name.submit()">
<img src="IMAGE.gif" alt="Submit this form" name="sub_but" />
</a>
HTML already got it:
<input type="image" src="myimage.png" />
Clicking it is exactly like clicking a submit button, instead of value you define src and the coordinates of the click are also sent to the server.
Official documentation.
Edit - while the form submission itself is the same, there is one difference between <input type="submit" /> and <input type="image" /> which is the value sent to the server for the clicked button. With ordinary submit button, the value of the button is sent alongside its name and can be then used to know if the form has been submitted, for example. In case of image input, each browser behaves differently, some send the value some send coordinates but you can't rely on this anymore. So, if you depend on the submitted button value in the server side code using image button is not good idea.
<input type="image" src="image.png" /> does exactly what you ask. You can't rely on the name attribute for it though (for example if your server-side code checks for it as a reference for the form being submitted), because the browser sends name.x and name.y for the coordinates clicked.
That aside, the image input type is essentially the same as a submit button for most purposes.
You can use image in place of showing default submit button.
form input[type=submit] {
background : url("submit.png") no-repeat center center;
width : 115px; /* As per requirement */
height :52px; /* As per requirement */
border : none;
color : transparent;
}
Please note that type="image" support is lacking in some browsers so above mentioned styling is a safe way.
You can do like this, in 'scr' you can put your image link; it would be like image button.
<input type="image" src="images/submit.jpg" value="Submit" alt="Submit">
When I have a submit button, it sends the form when I press enter.
Is the submit button necessary?
I am thinking of removing the button if it is unnecessary.
You need the submit button, otherwise the input is just an input.
Of course, you could use some javascript to force the submission, either onblur (when the input loses focus) or when the enter key is pressed.
However, I think this is a very bad idea from a user experience point of view. People expect a submit button.
Here is another SO answer with some suggestions:
Submitting a form by pressing enter without a submit button
In a <form>, one can submit by pressing the Enter key when you have a text input but hide your submit button.
<form action="wherever">
<input type="text" name="input" />
<input type="submit" value="Submit" name="submit" style="display: none;" />
</form>
This type of buttonless interface may be useful in interfaces like a command prompt, but generally, users often recognize a form with a submit button.
I have a form with some
<button>
elements and a normal
<input type="submit">
button to submit the form.
However, when I press Enter when I'm in a textfield, the form does not get submitted but much rather the first Element is "pressed".
How can I change this behavior?
I would recommend changing the <button> tag and turning it into an <input type="button" /> tag. This should force the form to submit the way you want.
You can use javascript to capture that the Enter key was pressed and submit the form.
See this example.
For a complete answer, could you please post your HTML?