Passo 1 de 7
Reunir campos e adicionar o botão de envio
Organize campos dentro de um form, sem aninhar formulários, e declare um botão de envio explícito.
Trilha de aprendizado · Nível 6 · Tutorial 2
Ao concluir, você poderá configurar o destino e o método de envio de um formulário, identificar os dados enviados e explicar o que depende de processamento no servidor.
Reunir campos e adicionar o botão de envio
Organize campos dentro de um form, sem aninhar formulários, e declare um botão de envio explícito. 2 min
Definir o destino com action
Identifique o destino do envio e escolha uma URL adequada para testar um formulário local. 2 min
Determinar os dados enviados com name
Identifique os pares nome e valor enviados por campos de texto e reconheça quando um campo fica fora do envio. 3 min
Enviar uma consulta com GET
Configure um formulário GET e identifique os pares nome e valor na URL e na resposta de um serviço de eco. 4 min
Enviar uma submissão com POST
Configure e teste uma solicitação fictícia com POST, localizando os pares enviados e comparando esse envio com GET. 4 min
Separar envio, proteção e processamento
Distinguir o que POST, HTTPS e uma resposta de eco permitem concluir sobre proteção, recebimento e processamento dos dados. 2 min
Revisar e configurar um envio completo
Revise uma solicitação fictícia, preveja os dados enviados e justifique o método, a proteção e os limites do teste. 3 min
Passo 1 de 7
Organize campos dentro de um form, sem aninhar formulários, e declare um botão de envio explícito.
Você já sabe criar campos com rótulos. O elemento <form> reúne controles para envio. Neste exemplo, os campos de uma solicitação e seu botão ficam entre <form> e </form>.
Por enquanto, observe a estrutura; o teste de envio virá depois.
<form>
<p>
<label for="assunto">Assunto</label>
<input type="text" id="assunto">
</p>
<p>
<label for="descricao">Descrição</label>
<textarea id="descricao"></textarea>
</p>
<button type="submit">Enviar solicitação</button>
</form>O <button type="submit"> declara explicitamente um botão que aciona o envio do formulário. O texto entre as tags identifica a ação para o usuário: Enviar solicitação é mais claro do que Clique aqui.
Complete o valor de type para declarar explicitamente um botão de envio:
<button type="_____">Enviar solicitação</button>
Um <form> não pode conter outro <form>.
Quando houver envios independentes na mesma página, cada um pode ter seu próprio formulário. Mantenha-os separados: feche um antes de abrir o outro, como neste trecho.
<form>
<label for="sugestao">Sugestão</label>
<textarea id="sugestao"></textarea>
<button type="submit">Enviar sugestão</button>
</form>
<form>
<label for="duvida">Dúvida</label>
<textarea id="duvida"></textarea>
<button type="submit">Enviar dúvida</button>
</form>Uma solicitação tem os campos Assunto e Descrição. Os dois devem pertencer ao mesmo formulário, com um único botão de envio. Qual organização atende a esse objetivo?
Passo 2 de 7
Identifique o destino do envio e escolha uma URL adequada para testar um formulário local.
O atributo action, na tag de abertura de form, indica a URL do destino que receberá os dados.
Ao acionar o envio, o navegador faz uma requisição HTTP: uma comunicação enviada ao servidor. O servidor recebe essa requisição e devolve uma resposta ao navegador.
Exemplo
Imagine um site publicado que tenha um destino chamado receber, na mesma pasta da página do formulário.
A abertura <form action="receber"> aponta para esse destino usando um caminho relativo. O endereço é resolvido a partir da localização da página; o destino precisa existir no servidor.
Considere um envio sem impedimentos e um servidor disponível. Coloque os acontecimentos na ordem correta.
Para os testes com um arquivo HTML aberto diretamente no seu computador, usaremos uma URL absoluta HTTPS. Ela aponta para um servidor externo sem depender da pasta local e sem exigir que você configure um servidor.
O destino será https://httpbin.org/get, um serviço público de eco: ele devolve informações sobre a requisição que recebeu.
<form action="https://httpbin.org/get">Atenção
Os testes exigem conexão com a internet e enviam informações a um serviço externo. Use apenas dados fictícios: nunca senhas, documentos ou outras informações pessoais reais.
Você abriu um arquivo HTML local, sem servidor próprio. Qual configuração aponta diretamente para o serviço de eco deste tutorial?
Passo 3 de 7
Identifique os pares nome e valor enviados por campos de texto e reconheça quando um campo fica fora do envio.
Em um input ou textarea, name define o nome da entrada enviada ao destino. O valor dessa entrada é o conteúdo atual do campo no momento do envio.
id identifica o controle e permite associá-lo ao rótulo; não substitui name. Os dois atributos podem ter valores iguais ou diferentes.
Observe este trecho dentro de um form:
<label for="assunto">Assunto</label>
<input type="text" id="assunto" name="tema" value="Oficinas">Exemplo
Sem editar o campo: nome tema, valor Oficinas.
Se a pessoa trocar o conteúdo por Cursos antes de enviar: nome tema, valor Cursos. Vale o conteúdo atual, não necessariamente o valor inicial escrito no HTML.
Dica
Um campo textual sem name fica fora do envio, mesmo que tenha id, rótulo e conteúdo preenchido.
Os controles abaixo estão dentro do mesmo form. Imagine que a pessoa trocou o conteúdo de Busca por tabelas e manteve os outros campos como estão. Analise o que será enviado.
<label for="busca">Busca</label>
<input type="text" id="busca" name="termo" value="HTML">
<label for="detalhe">Detalhe</label>
<textarea id="detalhe" name="detalhe">Para iniciantes</textarea>
<label for="rascunho">Rascunho</label>
<input type="text" id="rascunho" value="Conferir depois">Considere o conteúdo dos campos no momento do envio.
Toque em um item e depois no par correspondente.
O valor de name deve corresponder ao nome que o destino espera receber. Não basta escolher uma palavra de significado parecido: o navegador envia o nome que você escreveu, sem adaptá-lo ao destino.
Exemplo
name="comentario" envia uma entrada chamada comentario, não mensagem.
name="mensagem" envia a entrada com o nome esperado.
mensagem não é um nome obrigatório do HTML: neste exemplo, é uma exigência do destino. O id pode continuar diferente, desde que corresponda ao for do rótulo.
<label for="tema">Tema da consulta</label>
<input type="text" id="tema" name="____" value="Oficinas">O destino espera receber o texto deste campo em uma entrada chamada assunto. Complete a lacuna com o valor de name, sem aspas e sem alterar id ou for.
Passo 4 de 7
Configure um formulário GET e identifique os pares nome e valor na URL e na resposta de um serviço de eco.
O atributo method do form escolhe o método de envio. Use method="get" para declarar GET explicitamente. Se method for omitido, GET será o padrão.
GET é adequado para consultas, como buscar itens em um catálogo, que não devem alterar dados nem o estado da aplicação. Nesse envio, o navegador coloca os pares nome e valor na parte de consulta da URL.
No seu editor, crie um arquivo chamado consulta.html com o documento completo abaixo. O destino será o serviço de eco: ele devolverá os dados recebidos, não resultados de uma busca.
<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Consulta de teste</title>
</head>
<body>
<main>
<h1>Consulta fictícia</h1>
<p>Use apenas dados fictícios neste teste.</p>
<form action="https://httpbin.org/get" method="get">
<p>
<label for="campo-termo">Termo</label>
<input type="text" id="campo-termo" name="termo">
</p>
<p>
<label for="campo-categoria">Categoria</label>
<input type="text" id="campo-categoria" name="categoria">
</p>
<button type="submit">Consultar</button>
</form>
</main>
</body>
</html>mapas e Categoria com livros.Dica
O envio exige internet. Não use senhas, documentos ou outros dados pessoais reais. Se o serviço estiver indisponível, analise o exemplo da próxima tela.
Exemplo
https://httpbin.org/get?termo=mapas&categoria=livros
https://httpbin.org/get é o destino configurado em action.? marca o início da parte de consulta.= separa o nome do valor em cada par.& separa um par do próximo.Assim, a consulta contém termo=mapas e categoria=livros.
Na página devolvida pelo serviço, procure args: essa seção mostra os pares recebidos na consulta. Ignore as demais informações por enquanto.
O trecho ilustrativo abaixo também permite fazer a análise sem acessar o serviço. Não é preciso conhecer o formato da resposta: leia "termo": "mapas" como “a entrada termo recebeu o valor mapas”.
Os mesmos pares aparecem em args, ainda que em outra ordem.
{
"args": {
"categoria": "livros",
"termo": "mapas"
}
}Use seu teste ou o exemplo ilustrativo e informe:
name e cada valor ao preenchimento do campo.?, = e & nessa URL?Indique se você analisou o teste ou o exemplo.
Escreva pelo menos 30 caracteres (0/30).
Passo 5 de 7
Configure e teste uma solicitação fictícia com POST, localizando os pares enviados e comparando esse envio com GET.
POST é uma escolha apropriada para submeter solicitações e cadastros, quando o destino oferece esse processamento.
Com method="post", os pares dos controles vão no corpo da requisição, a parte da mensagem enviada ao servidor que carrega esses dados. O navegador não os acrescenta à consulta da URL como faz no formulário GET.
Exemplo
Nos testes com o serviço de eco httpbin:
method="get" com action="https://httpbin.org/get"; pares na consulta da URL.method="post" com action="https://httpbin.org/post"; pares no corpo da requisição.O destino precisa aceitar o método escolhido. Neste serviço, trocar apenas o método para POST e manter o destino /get causa erro.
Uma página apenas consulta um catálogo, sem alterar dados. Outra envia uma solicitação para processamento. Qual plano de envio é mais adequado?
Crie o arquivo solicitacao.html no seu editor e copie o documento completo abaixo. Salve e abra no navegador.
Com conexão à internet, mantenha os valores do exemplo e clique em Enviar solicitação de teste. O destino é um serviço público externo: use somente dados fictícios, nunca senhas, documentos ou informações pessoais reais.
<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Solicitação fictícia</title>
</head>
<body>
<h1>Solicitação fictícia de material</h1>
<p>Teste de envio ao serviço de eco. Use apenas dados fictícios.</p>
<form action="https://httpbin.org/post" method="post">
<p>
<label for="assunto">Assunto</label>
<input type="text" id="assunto" name="assunto" value="Material">
</p>
<p>
<label for="mensagem">Mensagem</label>
<textarea id="mensagem" name="mensagem">Envie o guia de HTML.</textarea>
</p>
<button type="submit">Enviar solicitação de teste</button>
</form>
</body>
</html>Após o envio, confira:
https://httpbin.org/post, sem os pares acrescentados à consulta.form. Ela mostra os pares recebidos do corpo da requisição, com o nome à esquerda e o valor à direita. No teste GET, os pares apareciam em args.Não é preciso entender toda a resposta. Se o serviço estiver indisponível, analise o recorte ilustrativo abaixo como alternativa ao teste.
{
"args": {},
"form": {
"assunto": "Material",
"mensagem": "Envie o guia de HTML."
},
"url": "https://httpbin.org/post"
}Use o resultado do seu teste ou o recorte ilustrativo e indique qual deles analisou.
Escreva pelo menos 40 caracteres (0/40).
Passo 6 de 7
Distinguir o que POST, HTTPS e uma resposta de eco permitem concluir sobre proteção, recebimento e processamento dos dados.
No formulário POST, os pares vão no corpo da requisição. Isso não criptografa os dados por si só.
HTTPS protege a comunicação durante o transporte, tanto em GET quanto em POST. O destino continua recebendo e podendo ler os valores: proteger o caminho não significa esconder os dados de quem os recebe.
Atenção
Mesmo com HTTPS, URLs podem permanecer no histórico do navegador e em registros do servidor. Por isso, não coloque senhas, documentos ou outras informações sensíveis na consulta da URL.
Se um formulário GET usa um destino HTTPS, seus dados podem aparecer na URL sem risco de permanecer no histórico ou em registros.
Configurar o formulário orienta o navegador a enviar os dados. Isso não implementa tratamento, armazenamento ou confirmação de sucesso no servidor.
Para concluir um cadastro, o destino precisa oferecer esse processamento e responder informando o resultado.
Exemplo
Uma resposta de eco mostra, na seção form, o nome assunto com o valor teste.
Isso evidencia que o serviço recebeu o par assunto=teste. Não comprova que uma solicitação foi cadastrada ou armazenada para essa finalidade.
Atenção
HTTPS protege o transporte, mas não garante que o destino seja adequado para suas informações. Nos testes com o serviço público de eco, continue usando somente dados fictícios, nunca dados pessoais reais.
Uma pessoa envia dados fictícios por POST para https://httpbin.org/post e vê os pares na resposta de eco. Ela conclui: “O POST criptografou os dados e meu cadastro foi concluído. Agora posso testar com dados pessoais reais”.
Corrija essa conclusão em 3 ou 4 frases: o que protegeu o transporte, o que a resposta comprova e por que continuar com dados fictícios?
Passo 7 de 7
Revise uma solicitação fictícia, preveja os dados enviados e justifique o método, a proteção e os limites do teste.
O código abaixo veio de uma consulta e precisa ser adaptado para uma solicitação fictícia.
No seu editor, salve-o como solicitacao.html. O destino do teste será https://httpbin.org/post, e as entradas enviadas deverão se chamar assunto e mensagem.
Ajuste action, escolha o method adequado e acrescente o name que falta. Preserve os rótulos, os id, o único form e o botão de envio. Mantenha os valores preenchidos e ainda não envie.
O teste externo exige internet. Use somente dados fictícios, nunca informações pessoais reais.
<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Solicitação fictícia</title>
</head>
<body>
<h1>Solicitação fictícia</h1>
<p>Exercício de envio: use somente dados fictícios.</p>
<form action="https://httpbin.org/get" method="get">
<p>
<label for="titulo">Assunto</label>
<input type="text" id="titulo" name="assunto" value="Oficina de HTML">
</p>
<p>
<label for="detalhes">Mensagem</label>
<textarea id="detalhes">Quero participar da oficina.</textarea>
</p>
<button type="submit">Enviar solicitação fictícia</button>
</form>
</body>
</html>Antes do teste, escreva as tags de abertura de form e textarea após suas correções. Depois, liste os dois pares nome e valor que espera enviar, mantendo os textos originais.
Escreva pelo menos 40 caracteres (0/40).
Confira suas alterações com o exemplo anterior, salve o arquivo e abra-o no navegador. Clique em “Enviar solicitação fictícia”. Na resposta, procure a seção form e compare seus nomes e valores com a previsão. Observe também a URL: os pares não devem ter sido acrescentados à consulta.
Se estiver sem internet ou o serviço falhar, faça a mesma análise usando o trecho ilustrativo abaixo.
{
"form": {
"assunto": "Oficina de HTML",
"mensagem": "Quero participar da oficina."
},
"url": "https://httpbin.org/post"
}Responda em frases curtas:
Escreva pelo menos 60 caracteres (0/60).
Resumo
Parabéns! Você concluiu: Configurar o envio de dados com form
Você concluiu “Configurar o envio de dados com form”. Use o checklist para revisar seus formulários e distinguir envio, proteção e processamento.
Milhares de cursos online em vídeo, ebooks e áudiobooks.
Para testar seus conhecimentos no decorrer dos cursos online
Gerado diretamente na galeria de fotos do seu celular e enviado ao seu e-mail
Baixe nosso aplicativo pelo QR Code ou pelos links abaixo:.
Leve o conhecimento no seu bolso.
Baixe o aplicativo Cursa.
São centenas de Cursos gratuitos a disposição, com Certificado de conclusão gratuito que é salvo em sua galeria de imagens do celular.
Baixe o app para ter acesso ao Certificado de conclusão de Curso Gratuitamente.
+ de 10 milhões
de alunos
Certificado grátis e
válido em todo o Brasil
60 mil exercícios
gratuitos
4,8/5 classificação
nas lojas de apps
Cursos gratuitos em
vídeo, ebooks e audiobooks
