Neste artigo veremos como limpar todos os campos do formulário, sem JavaScript, apenas utilizando um tipo de input dos formulários de HTML5
Fala programador, beleza? Bora aprender coisa nova!
Limpar os campos do formulário pode ser executado facilmente com JavaScript
Porém quando uma funcionalidade nativa é adicionada a linguagem, como no caso foi no HTML
Nós devemos optar por elas, pois poluiremos menos o código e provavelmente ela será executada de forma mais rápida
Então vamos aprender como limpar campos, apenas com HTML, veja o código:
<!DOCTYPE html>
<html>
<head>
<title>Como limpar todos os campos do formulário</title>
</head>
<body>
<p>Preencha seu e-mail:</p>
<form>
<div>
<input type="email" name="email" required>
</div>
<div>
<input type="password" name="password" required>
</div>
<div>
<input type="submit" value="Enviar">
<input type="reset" value="Limpar">
</div>
</form>
</body>
</html>Perceba que neste form utilizamos um input com type de reset
Quer se especializar em Desenvolvimento Web? Veja o nosso catálogo de cursos.
O reset tem essa função de limpar todos os campos ou retornar eles ao valor default
O valor default seria o que estiver no atributo value do campo
Por exemplo, se fosse um form de edição de usuário, voltaria os dados para o que foi pego do back-end
Como nossos inputs estão vazios no atributo value, simulando um formulário de login, os campos ficam vazios
Então nos basta apenas clicar neste input, para ação ser executada
Conclusão
No artigo vimos que podemos resetar o valor dos campos, com um input com o type setado para reset
Este input será um botão, como o submit, mas transformará os valores para default
Default é o que está no atributo value, ou seja, se estiver vazio os inputs são zerados
Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube
show!
valeu!