HTML

HTML: Como limpar todos os campos do formulário

29 de abril de 2020

HTML: Como limpar todos os campos do formulário

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

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

Subscribe
Notify of
guest
2 Comentários
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
bruno

show!

Battisti

valeu!

2
0
Would love your thoughts, please comment.x