Carregando...

Atributos form do input em HTML

Antes, required, placeholder e intervalos afinavam o campo. Os atributos form do input perguntam outra coisa: qual formulário possui o controlo e um botão pode substituir action? A estrela é form="id" fora de form. form* no submit muda o destino só nesse clique.

Por que a associação importa

A maioria dos campos fica no form. Às vezes o layout coloca um controlo noutro sítio. Sem associação falta no payload. form liga pelo id. Aninhar continua mais claro; associar é a saída para layouts difíceis.

Resposta direta

1) id no form. 2) Fora, form="mesmo-id". 3) name e label continuam necessários. 4) No botão submit, formaction, formmethod, formenctype, formnovalidate, formtarget opcionais só nesse clique. 5) Propriedade e encaminhamento — não regras de valor anteriores.

📊 Form association and submit overrides

Attribute Where Beginner tip
form input (or other control) Value must match the form’s id exactly
formaction submit button Overrides form action for that click only
formmethod submit button Overrides method (get/post) for that click
formenctype submit button Overrides enctype when uploading via that button
formtarget submit button Overrides where the response opens (_blank, etc.)

Checkout: campo fora do form

Checkout curto mantém e-mail e quantidade dentro. O promo chega depois — com label e name — e junta-se com form="checkout".

Outside input via form id

html 
<form id="checkout" action="/checkout" method="post">
<label for="email">Email</label>
<input id="email" name="email" type="email" required>

<label for="qty">Qty</label>
<input id="qty" name="qty" type="number" min="1" value="1">

<button type="submit">Pay</button>
</form>

<p>Promo field rendered later in the layout:</p>
<label for="promo">Promo code</label>
<input id="promo" name="promo" type="text" form="checkout"
placeholder="SAVE10">

Ler o demo de checkout

  • id=checkout é o gancho
  • form=checkout une o promo no envio
  • name=promo continua a chave
  • e-mail e qty internos sem form=
  • Labels em todo controlo visível
  • required/min podem existir; o foco é associação

Dois botões: substituir action

Às vezes um formulário, dois destinos — rascunho e publicar. Um form; formaction diferente por botão. Só nesse clique.

Submit overrides with formaction

html 
<form id="article" action="/articles/publish" method="post">
<label for="title">Title</label>
<input id="title" name="title" type="text" required>

<label for="body">Body</label>
<input id="body" name="body" type="text">

<button type="submit">Publish</button>
<button type="submit" formaction="/articles/draft"
formmethod="post">Save draft</button>
</form>

Ler o demo de dois botões

  • Caminho padrão = action do form
  • Rascunho envia via formaction para outro URL
  • formmethod=post mantém a intenção
  • Ambos enviam os mesmos campos com name
  • form= propriedade; formaction rota do botão
  • Seguinte: textarea multilinha

Escolher associação ou override

  • Campo fora da árvore: form="form-id"
  • Mesmos campos, outro URL: formaction
  • Outro method num clique: formmethod
  • Enctype de upload num clique: formenctype
  • Saltar validação (raro): formnovalidate
  • Abrir resposta noutro sítio: formtarget
  • Prefira aninhar se o layout permitir
  • Não confundir com required/placeholder

Prática — propriedade e overrides

  1. Checkout; remova form= do promo e restaure
  2. Typo no id — a associação parte
  3. Segundo campo fora notes com form=checkout
  4. Troque formaction do rascunho
  5. Experimente formmethod=get um momento
  6. Frase: form= escolhe o dono; formaction só esse botão
  7. Aninhe o promo e remova form=

Erros fáceis

  • Typo entre id e form=
  • form= sem name
  • Abusar de campos soltos
  • Confundir com ajudas anteriores
  • Misturar form= e formaction
  • Achar que todo controlo precisa de form=
  • formnovalidate em vez de corrigir campos

Resumo

  • form="id" associa um controlo externo
  • id correspondente; name e label importam
  • Botões substituem com formaction/formmethod/form*
  • Aninhe quando puder; associe se o layout forçar
  • Propriedade/rota ≠ regras de campo anteriores
  • Seguinte: textarea

🧠 Teste Seu Conhecimento

Pronto para Começar

Teste Seu Conhecimento

Desafie-se com este questionário interativo e veja o quão bem você entende o tópico

❓
5
Perguntas
🎯
70%
Para Passar
♾️
∞
Tempo
🔄
∞
Tentativas

📝 Instruções

  • Leia cada pergunta cuidadosamente
  • Selecione a melhor resposta para cada pergunta
  • Você pode refazer o quiz quantas vezes quiser
  • Seu progresso será mostrado no topo
Tópico 53 de 68
Html Tutorial