1

Estava criando um botão para limpar formulário, e me deparei com a função do HTML type='reset' mas eu era acostumado a utilizar JavaScript para isto ocorrer. Portanto queria pedir auxílio para entender qual a diferença de eficiência de um para outro.

Exemplo de reset em HTML

<form method="POST" action="">
    <br>
        <div class="col-lg-12">
            <div class="col-lg-4"><!-- Inicio Input Código -->
                <label for="ex1">Codigo: </label>
                <input  type="text" class="form-control" id="codigo" codigo="codigo" size="60"><br>
            </div><!-- FimInput Código -->
        </div>

        <div class="col-lg-12">
            <div class="col-lg-4"><!-- Inicio Input Usuário -->
                <label for="ex1">Usuário: </label>
                <input  type="text"  class="form-control" id="usuario" codigo="usuario" size="40"><br>
            </div><!-- Fim Input Usuário -->

            <div class="col-lg-8"><!-- Inicio Input Senha Antiga -->
                <label for="ex1">Senha Aniga: </label>
                <input  type="text"  class="form-control" id="senha" codigo="senha_antiga" size="40"><br>
            </div><!-- Fim Input Senha Antiga -->
        </div>

    <input type="reset" value='Limpar Tela'>

</form><!-- Fim do formulario -->

Exemplo de reset em JavaScript

$(function($) {
  // Quando o formulário for enviado, essa função é chamada
  $("#new_user").submit(function() {
    // Colocamos os valores de cada campo em uma váriavel para facilitar a manipulação
      
    var name = $("#name").val();
    var mail = $("#mail").val();
    var password = $("#password").val();
    // Exibe mensagem de carregamento
    $("#status").html("<center><img src='core/img/loader.gif' alt='Enviado'/></center>");
    // Fazemos a requisão ajax com o arquivo envia.php e enviamos os valores de cada campo através do método POST
    $.post('#', {name: name, mail: mail, password: password }, function(resposta) {
        // Quando terminada a requisição
        // Exibe a div status
        $("#status").slideDown();
        // Se a resposta é um erro
        if (resposta != false) {
          // Exibe o erro na div
          $("#status").html(resposta);
        } 
        // Se resposta for false, ou seja, não ocorreu nenhum erro
        else {
          // Exibe mensagem de sucesso
          $("#status").html("<center>Cadastro realizado com sucesso!</center>");
          // Limpando todos os campos
          $("#name").val("");
          $("#mail").val("");
          $("#password").val("");
        }
    });
      
      //limpar form
      $(':input',this)
          .not(':button, :submit, :reset, :hidden')
          .val('')
          .removeAttr('checked')
          .removeAttr('selected');
      //this.reset();
  });
});
#status{
    position:absolute;
    width: 150px;
    height: 30px;
    top: 150px;
    left:10px;
    border: 1px solid black;
    color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div id='status'></div>
<form id="new_user" method="post" action="javascript:;">
    <input type='text' name='name' id='name'/>
    <br />
    <input type='text' name='mail' id='mail'/>
    <br /><input type='password' name='password' id='password'/>
    <br /><input type='submit' name='submit' id='submit' value='Limpar Tela'/>
    <br />
</form>

2 Respostas 2

1

A diferença básica, que já foi dita pelo @Evandro Mendes, é que um é nativo e outro é personalizado. Ou seja, via JavaScript você pode manipular o formulário da forma que desejar.

Por outro lado, é necessário enteder que o reset do HTML não é a mesma coisa que limpar o formulário.

O reset tem como objetivo deixa o formulário ao estado de origem dos seus valores:

Conforme você pode verificar no form abaixo, existem alguns valores pre-selecionados, como nome, email, algumas linguagens de programação e uma área livre pra texto (com texto dentro, sem placeholder).

<form method="post" action="#">
  <fieldset>
    <legend>Dados cadastrais</legend>

    <label for="name">Nome:</label>
    <input id="name" name="name" value="Gabriel Heming" />

    <label for="email">E-mail:</label>
    <input id="email" name="email" value="[email protected]" />
  </fieldset>
  
  <fieldset>
    <legend>Linguagens de programação</legend>
    <label for="php">PHP:</label>
    <input type="checkbox" id="php" name="languages[]" value="PHP" checked="checked" />
    
    <label for="JavaScript">JavaScript:</label>
    <input type="checkbox" id="JavaScript" name="languages[]" value="JavaScript" checked="checked" />
    
    <label for="C#">C#:</label>
    <input type="checkbox" id="C#" name="languages[]" value="C#" />
    
    <label for="java">Java:</label>
    <input type="checkbox" id="java" name="languages[]" value="Java" />
  </fieldset>  


  <fieldset>
    <legend>Texto livre</legend>
    <textarea id="textarea" name="textarea">Área para texto livre</textarea>
  </fieldset>
  
  <fieldset>
     <button type="reset">Reset HTML</button>
  </fieldset>
</form>

Caso você executar o reset, verificará que não ocorrerá absolutamente nada.

Entretanto, se alterar algum valor e, então, resetar o formulário voltará para os valores originais. Isso é bastante comum em formulários de atualização de cadastro, aonde um formulário já vem preenchido com valores default.

Por outro lado, se você realizar a alteração do HTML via JavaScript, removendo os atributos name, checked, selected ou o conteúdo de um textarea, o reset nativo do formulário não será mais capaz de recuperar todos os valores do HTML, pois, o que ele faz é apenas recarregar o que está salvo no HTML.

$(document).ready(function() {
      $('#reset').click(function() {
        $(':input')
            .not(':button, :submit, :reset, :hidden')
            .val('')
            .removeAttr('checked')
            .removeAttr('selected');
        
        // apenas como exemplo, o resultado de removeAttr é diferente do uso de .val();
        $('#email').removeAttr('value');
      });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" action="#">
      <fieldset>
        <legend>Dados cadastrais</legend>

        <label for="name">Nome:</label>
        <input id="name" name="name" value="Gabriel Heming" />

        <label for="email">E-mail:</label>
        <input id="email" name="email" value="[email protected]" />
      </fieldset>
      
      <fieldset> 
        <legend>Linguagens de programação</legend>
        <label for="php">PHP:</label>
        <input type="checkbox" id="php" name="languages[]" value="PHP" checked="checked" />
        
        <label for="JavaScript">JavaScript:</label>
        <input type="checkbox" id="JavaScript" name="languages[]" value="JavaScript" checked="checked" />
        
        <label for="C#">C#:</label>
        <input type="checkbox" id="C#" name="languages[]" value="C#" />
        
        <label for="java">Java:</label>
        <input type="checkbox" id="java" name="languages[]" value="Java" />
      </fieldset>  

      <fieldset>
        <legend>Texto livre</legend>
        <textarea id="textarea" name="textarea">Área para texto livre</textarea>
      </fieldset>
      
      <fieldset>
        <button type="reset">Reset HTML</button>
        <button type="button" id="reset">Reset JavaScript</button>
      </fieldset>
    </form>

Poderá observar que o uso de .val() terá um comportamento diferente do uso de .removeAttr(), o qual altera e remove o valor padrão do HTML. O .val(), por outro lado, é similar ao processo de inserção do valor pelo usuário.

2
  • obrigado pelo esclarecimento @GabrielHerning, portanto como estou criando um formulário que recebe muitas consultas, inserção de dados e etc... Creio que o mais correto a se fazer para limpar totalmente seja o do JavaScript mesmo né
    – Victor
    Commented 21/11/2017 às 14:52
  • @Victor não é correto nem errado, é apenas uma das possibilidades. O mais importante é que resolva seu problema. Commented 21/11/2017 às 15:10
1

Prezado Victor,

Neste caso a questão não é performance e sim funcionalidade e praticidade o input reset do html é mais pratico porém com Js pode personalizar em questão de desempenho realmente estar no html é melhor mais "rápido" pois não precisa chamar uma function porém em questão de UX é muito ruim por um botão assim, pensa se o usuario clica "sem querer"

1
  • Sim também estou pensando nisso
    – Victor
    Commented 21/11/2017 às 13:55

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .