You can put an image in the input with
type="image"
But it stays as submit and I want to leave the
input type="reset"
With image also but without being like submit and yes to reset the information entered by the user in the form, is it possible?
Below is my PHP file:
<input type="image" src="imagens/imagem.png" />
<input type="reset" value="Cancelar">
My JS file is done.
Label
Nearly all form controls can have a "shortcut" with a label:
#r {display:none}
#l {
display:block;
width:32px;
height:32px;
background:url(https://i.stack.imgur.com/OV6nj.jpg?s=32)
}<form>
<textarea cols="40" rows="5"></textarea>
<input id="r" type="reset">
<label id="l" for="r"></label>
</form> This works to stylize checkbox , radiobutton , and many other controls. label is a great ally of CSS.
Remember that styling is an example, if you want to keep the flow equal to the original button, you can use inline-block instead of block .
In addition, if you do not want to image by CSS, you can simply by img within label . Usually it is more interesting to leave in CSS, because it is stylization, not content.
input
Depending on the level of compatibility you want, just stylize with CSS:
#r {
display:block;
border:none;
width:32px;
height:32px;
background:url(https://i.stack.imgur.com/OV6nj.jpg?s=32)
}<form>
<textarea cols="40" rows="5"></textarea>
<input id="r" type="reset" value="">
</form> You can also try switching to <button> , see the example below, type anything in textarea and then press the button:
<form>
<textarea cols="40" rows="5"></textarea>
<button type="reset">
<img src="imagens/imagem.png">
</button>
</form>And if you do not like the button format and just want to leave the image you can use css:
.custom-btn {
border:none; /*remove as bordas*/
padding: 0; /*remove os espaços*/
background-color: transparent; /*remove o fundo cinza*/
/*remove a aparência customizada/nativa do navegador*/
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}<form>
<textarea cols="40" rows="5"></textarea>
<button class="custom-btn" type="reset">
<img src="imagens/imagem.png">
</button>
</form> You can leave value blank to not go text in input and put a background image for css .
background-size: cover indicates that it is for the image to get the total space of the element.
input[type=reset] {
background: url('http://www.intranet.jmrc.co.in/Jaipur-Metro/images/Refresh.png');
background-size: cover;
}<form>
<input type="text" />
<input id="resetar" type="reset" value=""></input>
</form>The inputs are really annoying to customize ... I myself yesterday was seeing me to customize some inputs and select ... But I did! Answering your question, I see two ways to solve your problem.
First You can put an input image and an input type reset. In the input type reset puts opacity 0 and in the src of type img places the image and then put the onclick and calls the function js that clicks on the input type reset.
Second You can also create an input type img (in the src put the image) and put in the onclick for it to reset the values direct. I have a code here that I've used for some and it might be interesting for you.
/* Ao clicar no input type image, clique no reset */
<input type="reset" id="reset" style="opacity: 0;">
<input type="image" src="resetbtn.png" onclick="resetClick()">
<script>
function resetClick(){
document.getElementById("reset").click();
}</script>
/* Ao clicar no input image reseta os valores dos inputs do formulário */
<html><head><script>
function resetClick(){
clearRadioGroup('radioinput');
clearInputUrlNumberText('textinput');
clearInputUrlNumberText('numberinput');
clearInputUrlNumberText('urlinput');
confereChecado('checkbox');
}
/* Confere checkbox */
function confereChecado(id){
var checked = document.getElementById(id).checked;
if(checked == true){
document.getElementById(id).click();
}
if(checked == false){}}
/* Função da Ação de Resetar Text, Numbers, Url Inputs */
function clearInputUrlNumberText(name){
var entradas = document.querySelectorAll("input[name='"+name+"']");
[].map.call(entradas, entrada => entrada.value = '');
}
/* Função da Ação de Resetar Radio Input */
function clearRadioGroup(GroupName){
var ele = document.getElementsByName(GroupName);
for(var i=0;i<ele.length;i++)
ele[i].checked = false;
}
</script>
<style></style>
<body>
<form method="post" action="">
<input id="radiouno" type="radio" name="radioinput" value="opt1">opt1
<input id="radioduo" type="radio" name="radioinput" value="opt2">opt2
<input id="text" type="text" name="textinput">text
<input id="number" type="number" name="numberinput">number
<input id="url" type="url" name="urlinput">url
<input id="checkbox" type="checkbox" name="checkboxinput">checkbox
<input id="reset" type="image" src="img/reset.png" onclick="resetClick()">
</form>
</body>
</html>