Formulário que trava (sw-trava) CSS

O que é

Coloque sw-trava na tag <form> e pronto: enquanto faltar um campo obrigatório ou tiver um e-mail mal digitado, o botão de enviar fica apagado e não aceita clique. Quando tudo estiver certo, ele acende. Os campos que a pessoa já preencheu ganham borda verde (certo) ou vermelha (errado) — mas só depois que ela mexeu, para não "gritar" com ninguém antes de começar.

É só CSS. O SW Core usa as regras que o próprio HTML já tem: required (obrigatório), type="email", minlength (mínimo de letras), pattern (formato) etc. O navegador sabe se cada campo está certo, e o CSS apaga o botão de envio enquanto houver algum errado. Funciona com os campos do SW Core (sw-fld / sw-inp) ou com campos comuns.

Quando usar

• Formulário de contato ou de orçamento: evita a mensagem chegar sem e-mail ou telefone.
• Cadastro e newsletter: o botão só libera com o e-mail certo e o "aceito os termos" marcado.
• Agendamento: não deixa enviar sem data e horário.
• Precisa de mensagem de erro escrita embaixo do campo ("Digite um e-mail válido")? Some com a Validação do SW Core — as duas funcionam juntas.

Comece aqui

1. 1

   Coloque o SW Core no <head>. A trava é só CSS: não precisa do arquivo de JavaScript.

   <link rel="stylesheet" href="swcore/swcore.min.css">

2. 2

   Ponha sw-trava no <form> e required nos campos obrigatórios. Digite um e-mail aqui e veja o botão acender:

   Quero receber

   <form sw-trava action="/newsletter" method="post" class="flx f-wr alc gap-3">
     <input sw-inp type="email" name="email" required placeholder="seu@email.com" aria-label="E-mail">
     <button sw-btn="pri">Quero receber</button>
   </form>

Todas as variações

Cada quadro abaixo é o componente de verdade, rodando. O código embaixo é exatamente o que está no quadro: copie e cole.

Tabela de opções

Receitas prontas — usos reais

Situações que aparecem em quase todo site. Copie a que servir.

<form sw-trava action="/contato" method="post" class="flx f-cl gap-3">
  <div sw-fld="float">
    <input sw-inp id="nome" name="nome" required placeholder=" ">
    <label for="nome">Seu nome</label>
  </div>
  <div sw-fld="float">
    <input sw-inp id="email" name="email" type="email" required placeholder=" ">
    <label for="email">E-mail</label>
  </div>
  <div sw-fld="float">
    <textarea sw-inp id="msg" name="mensagem" required minlength="10" placeholder=" "></textarea>
    <label for="msg">Como podemos ajudar?</label>
  </div>
  <label sw-chk><input type="checkbox" name="aceite" required> Concordo em receber o retorno por e-mail</label>
  <button sw-btn="pri">Enviar mensagem</button>
</form>

<form sw-trava action="/agendar" method="post" class="flx f-cl gap-3">
  <div sw-fld>
    <label for="dia">Dia</label>
    <input sw-inp id="dia" name="dia" type="date" required>
  </div>
  <div sw-fld>
    <label for="hora">Horário</label>
    <select sw-inp id="hora" name="hora" required>
      <option value="">Escolha</option>
      <option>09:00</option>
      <option>10:30</option>
      <option>14:00</option>
    </select>
  </div>
  <div sw-fld>
    <label for="zap">WhatsApp</label>
    <input sw-inp id="zap" name="whatsapp" type="tel" required pattern="[0-9 ()-]{10,}" placeholder="(00) 00000-0000">
  </div>
  <button sw-btn="suc"><i class="swi-calendar-check"></i> Confirmar horário</button>
</form>

<form sw-trava action="/newsletter" method="post" class="flx f-wr alc gap-2">
  <input sw-inp type="email" name="email" required placeholder="Seu melhor e-mail" aria-label="E-mail">
  <button sw-btn="pri"><i class="swi-envelope"></i> Assinar</button>
</form>

Precisa de quê

• swcore.min.css — a trava.
• swcore.compl.min.css — só se usar ícone swi-* no botão.

Cuidados — erros comuns

• Sem nenhuma regra (required, type="email"…) nos campos, a trava não tem o que conferir: o botão fica sempre aceso.
• Botão de ajuda, "mostrar senha" ou "Cancelar" dentro do form precisa de type="button" — senão a trava apaga ele também (e, sem o type, ele ainda enviaria o formulário).
• Em <select required>, a primeira opção ("Escolha…") tem que ter value="", senão ela conta como escolhida.
• A trava é conforto para quem preenche. Sempre confira os dados de novo no servidor: qualquer pessoa pode enviar dados sem passar pelo formulário.
• O botão só fica apagado visualmente e sem clique; a tecla Enter dentro de um campo ainda pode tentar enviar — aí o próprio navegador barra e mostra o aviso dele.

O que ele não faz

• Não escreve mensagem de erro embaixo do campo — só pinta a borda. Para mensagens, use a Validação (sw-valid).
• Não confere regra que depende de outro campo (ex.: "repetir senha igual à senha") nem consulta o servidor (ex.: "e-mail já cadastrado").