Limpar formulários HTML ao atualizar a página

Olá André, tudo bem?

Geralmente quando atualizamos a pagina o formulário recarrega sem informações nos values dos inputs, a não ser que esteja configurado para manter esses valores.

Você poderia nos mostrar o código que simula essa situação?

Um abraço!

<div class="container">
               <form class="formulario-contato">

                   <fieldset>
                     <label for="nome">Nome:</label>
                     <input id="nome" type="text" name="nome" placeholder="Seu nome aqui" type="nome" required autofocus pattern="[A-Za-z- ']{4,}" title="O nome precisa ter pelo menos 4 caracteres!">
                     <label for="email">Email:</label>
                     <input id="email" name="e-mail" placeholder="seu@email.com" type="email" required>

              <select name="assunto"> 

                <option value="consultoria"> Consultoria</option>
                <option value="blog" selected="">Blog</option>
                <option value="outros">Outros</option>

              </select>

            </fieldset>

                   <label for="msg">Mensagem:</label>
                   <textarea id="msg" name="mensagem" cols="30" rows="6"></textarea>
                   <button type="submit">Enviar <strong>para mim</strong></button> 
               </form>
       </div>

Olá André, como o Bruno falou o comportamento esperado, é que ao atualizar a página e ou submeter o formulário todos os campos sejam limpos. No entanto se você quiser forçar isso, pode utilizar o atributo "autocomplete" com o valor "off" nos seus inputs.

Algo como:

<input type="text" name="pin" autocomplete="off" />

Eai Carlos, esse forma ficou muito boa, usando o autocomplete deu certo! mas eu notei, oque foi passado no formulários tudo foi perdido, imagine comigo: eu tenho um formulário que expira por tempo de inatividade quando eu tinha quase completado todos os campos daí eu preciso recarrego a página e tudo vem embranco novamente mas quando eu clico duas vezes no campo aparece os dados que eu já tinha informado! no autocomplete isso não acontece pelo que eu percebi ele limpa tudo quando eu retiro ele os dados voltam inseridos anteriormente volta a aparecer! aproveitando e a questão dos acentos nos formulários pattern="[A-Za-z- ']{4,}" para eu conseguir inserir no campo acentuações como: ~´ `ç, como eu faria????

Olá, André.

Quando você coloca o atributo autocomplete="off" o navegador, ao interpretar o seu HTML, vai entender que naquele input não está liberado a gravação de dados que já tenham sido informados por alguém. Dessa forma, quando você der um refresh na página, e "clicar duas vezes" nos campos ele não vai te mostrar nada, porque o autocomplete daquele campo está "desligado".

Agora eu entendi o que você quis dizer. Na verdade isso é uma configuração do navegador, que pode ser ajustada pelo usuário para que os dados do formulário não fiquem gravados.

Para o pattern do formulário você pode tentar algo como:

[A-Za-zÀ-ú~´`-]{4,}

O "À-ú" vai permitir que você coloque os caracteres especiais. Os outros caracteres basta adicionar à lista, lembrando que o " - " deve sempre ser o último caractere, pois ele é um caractere especial dentro da lista, assim como o " . "

Espero ter ajudado

Massa Bruno, mas como eu faria o refresh limpando os formulários e mantendo os inputs como eu descrevi? Usando autocomplete usando aqui não dá, e as configurações do navegar em outros formulários por exemplo do site da alura funciona exatamente do jeito que eu queria.

Qual formulário da Alura, por exemplo?

Posso dar uma olhada para entender o que é feito.

Quando você diz "ao clicar duas vezes aparece no formulário" apareceria uma lista (que no caso refere-se ao autocomplete) ou a informação seria carregada no input, como se fosse seu valor mesmo?

por exemplo formulário de login!! quando eu entro com meu login e dou um refresh ele limpa o campo mas ao clicar duas vezes o login que eu passei está lá, pronto para ser selecionado novamente, quando eu uso o autocomplete ele bloqueia essa opção de guardar os valores ele limpa mas também não guarda os dados que eu passei no formulário, quando eu tiro o autocomplete do código ai o refresh não funciona ou seja tudo que digito no formulário ao dar um refresh continua ja carregado dentro do formulário como se ficasse ja pré definido em compensação quando eu clico duas vezes no formulário oque eu passei anteriormente fica salvo!

André,

Ao meu ver não existe uma solução somente em HTML para esse caso. Como eu disse anteriormente, esse formulário "pré-preenchido" é uma configuração de auto fill do seu navegador. De qualquer forma existem alguns hacks que você pode tentar fazer para driblar isso. Veja o formulário de login do Alura, por exemplo:

<form class="signin-form" action="/signin" method="post">

    <label>E-mail</label>
    <input class="fill-with-cached-email" type="email" required="" name="email" id="login-email" value="" autofocus="">

    <label>Senha</label>
    <input type="password" required="" name="password">
    ...    
    <button class="btn-login" type="submit">Entrar</button>

</form>

Repare que existe uma classe chamada "fill-with-cached-email". Provavelmente há uma rotina Javascript que faz esse trabalho e exibe o e-mail, caso ele esteja no cache, por exemplo. De qualquer forma, no meu navegador, por exemplo, não é exibida a lista e muito menos o preenchimento automático, porque a configuração está feita de outra forma.

pow acabei de ferificar aqui no chrome está dando certo o input value="" funciona mas no mozzila nada!

Hahahahaha... bem vindo ao nosso mundo... o mundo do cross-browser...