HTML: Como limpar todos os campos do formulário

Publicado em 29/04/2020

Neste artigo veremos como limpar todos os campos do formulário, sem JavaScript, apenas utilizando um tipo de input dos formulários de HTML5

limpar campos formulário capa

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

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

114 aulas
4 projetos
9h 15min

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

Escrito por | Matheus Battisti

Fundador da Hora de Codar

Programador apaixonado pelo mundo das tecnologias, sempre buscando em aprender e se aprofundar em linguagens, frameworks e o que mais for necessário para executar um bom trabalho. Agora tem uma nova missão que é de passar seu conhecimento adiante para formar novos programadores e especializar mais os que já são.

Canal no YouTube LinkedIn