How to put picture in input type reset?

Asked

Viewed 3,595 times

1

It is possible to input an image with the

type="image"

But he stays as Ubmit and I want to leave the

input type="reset"

With image also but without staying as Submit and yes to reset the information typed by the user in the form, it is possible ?

Below is my PHP file:

<input type="image" src="imagens/imagem.png" />
<input type="reset" value="Cancelar">

My JS file is Azio.

php javascript html

  • You can hide the input and style a label that has the attribute for pointed to the input.

  • The problem is making it buddy.

4 answers

4

You can also try trading for <button>, see the example below, type anything in textarea and then push the button:

<form>
<textarea cols="40" rows="5"></textarea>
<button type="reset">
    <img src="imagens/imagem.png">
</button>
</form>

And if you don’t like the format of the button and just want to let the image 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>

4


Using Label

Almost 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. The 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.

Also, if you don’t want to put the image in CSS, you can simply put the img within the label. Usually it is more interesting to leave in CSS, for being styling, and not content.


Stylizing the input

Depending on the level of compatibility you want, simply style 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>

3

You can let the value blank not to go text on input and place a background image by css.

background-size: cover indicates that it is for the image to obtain the total space of the element.

Example:

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>

  • When I leave "value" blank it disappears everything and nothing appears nor image, when I do not let it appears only inside the button with the name below.

  • You can make a Fiddle the way you’re doing @Lonetonberry?

  • In my PHP file I gave an ID the same way you did there. In my CSS file I pulled this id by looking like this: #resetar{ background-image: url(../images/armerPreta.png); background-size: cover; }. I edited the question with my PHP file

1

The inputs are really boring to customize... I even yesterday was seeing myself to customize some inputs and select... But I did! To answer your question, I see two ways to solve your problem.

First You can put an input image and an input type reset. In input type reset puts opacity 0 and in src type img puts the image and then puts onclick and calls function js that clicks on input type reset.

Second You can also create an input type img (in src put the image) and put it in onclick to reset the values directly. 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>

  • I was trying to do this second way only that my knowledge is few and I was in doubt how to make the JS reset the information typed in the form. The function that makes the information reset is in your answer ?

  • Yes, I tried to list the most common inputs in the form and how to reset it. I’m also kind of new to js, but one tip that always worked for me is before I put in the project to make a normal html page and test. Lone, in the second form, put the name of your function in the onclick without forgetting the parentheses (ex: myFuncao() and put these functions I gave you!

  • I edited the question. But I don’t understand which of these functions I should put in the input tag. And how onClick should look in this tag?

  • Look there I edited the answer. Lone, in onclick you put the function you created accompanied by the parentheses (and if you have created parameters, inside it). In the <script> you put the three functions to delete inputs and inside the function you created and wrote in the onclick puts the functions without having to describe them, only with the name of the inputs or with the checkbox id inside the parentheses!

  • Do not use Appearance in the CSS it is deprecated!

  • 2

    Here is the support of the Appearance. http://caniuse.com/#search=Appearance - speaking like this, you’ll end up belittling him, poor kkk

  • I know of the existence

  • http://www.w3schools.com/cssref/css3_pr_appearance.asp but check this out, direct from W3 - note the title of the page! being accepted is different from the current one!

  • 2

    One more thing for you to know, w3schools has nothing to do with W3. It was even known as "w3fools". It’s nice to help, but if you put some trusted links, it values the comment a bit.

  • @Giancarlosolderagraziano is not depreciated, depreciado means something else access and one more detail appearance is not obsolete, do not know where you got such information, you must have confused with the prefixes and nor the prefixes are obsolete, they are just non-standards then read https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-appearance and please be sure of this before saying anything ;)

  • I may have expressed myself wrongGuilherme, Bacco tb But what I meant is that it is not worth using a property that is no longer used and that has to stay using webkits (in css4 probably will not). And also, even though I found the way you guys talked a little gross, I read several topics about it and decided not to use it on my last project...

  • 2

    @Giancarlosolderagraziano I agree with you about the use, if it seemed rude was not the intention, but as you commented on the subject, we come here to add and improve if possible the explanation, so everyone learns. Like I said before, I think it’s cool that you’re wasting your time coming here to help, so that counts for a lot. The tips are just to improve the efficiency of the help. If something seemed gross, it really wasn’t the goal.

  • 2

    If it was because I spoke of w3fools, it was not ironic, it really happened: http://www.w3fools.com/

  • @Giancarlosolderagraziano maybe appearance: has been removed (I didn’t find any information about it in W3.org), but still the prefixed ones are non-standards (non-standard) and can be used, since they work for specific browsers (engines actually). Besides, if you don’t have such CSS4 (if your information is correct) it’s because you won’t need it anymore and the appearance: ...; will have no effect, will only serve backward compatibility for browsers that do not yet use CSS4 (in the future)

  • @Guilhermenascimento itself MDN already warns not to use, because each browser does one way, but as you said, prefixed it is the criteria of the browser vendor. As for the recommendation not to use, I think we all agree that it is not a good idea at all.

  • @Bacco does not use when it refers to depending on that, the style there does not depend, in fact it is not necessary, but in some smartphones without it is strange (example the iOS I use included). And if they remove that there will not affect, just will not be recognized, will serve as a "retro-compatibility" (I used the right word?) so that your site works on older devices.

Show 11 more comments

Browser other questions tagged php javascript html

You are not signed in. Login or sign up in order to post.