Formulários e Entradas Atividade Individual
• Os formulários permitem a entrada de informação (texto,
INTRODUÇÃO A PROGRAMAÇÃO WEB menus, botões, caixas de seleção)
Crie um Formulário em HTML contendo um formulário de
Formatação HTML - Inputs • Um formulário é definido pela tag <form>
inscrição para um evento de tecnologia. O formulário deve
coletar informações básicas dos participantes, utilizando
apenas HTML.
PROF. DR. RENNAN RAFFAELE
<html> Requisitos:
<head>
<title>Form!</title>
</head> Estrutura do Formulário:
<form>
<label> Nome: </label>
O formulário deve conter os seguintes campos obrigatórios:
<input type="text" name="nome">
</form> Nome Completo: (input type="text")
</html>
E-mail: (input type="email")
Telefone: (input type="tel")
Gênero: (input type="radio" com opções "Masculino",
• Área de texto
"Feminino", "Outro")
• <textarea rows="n de linhas" col="n de colunas"> Data de Nascimento: (input type="date")
Área de Atuação: (select com opções como
<html> "Desenvolvimento Web", "Design", "Gestão de Projetos",
<head> etc.)
<title>Form!</title>
</head>
<form> Workshops de Interesse: (input type="checkbox" para
<label> Nome: </label>
<input type="text" name="nome">
selecionar várias opções)
<p >Escreva o que quiser: </p> Motivo do Interesse pelo Evento: (textarea)
<textarea rows="10" cols="30"> Um botão para enviar as informações (input type="submit")
</textarea>
</form>
</html> Utilize o atributo required em todos os campos obrigatórios para
garantir que o usuário preencha essas informações antes de enviar
o formulário.
• Ação do formulário (botões de confirmar/enviar/
submeter)
• <input type="submit"> value="nome do botão">
<html>
<head>
<title>Form!</title>
</head>
<form>
<label> Nome: </label>
<input type="text" name="nome">
<p >Escreva o que quiser: </p>
<textarea rows="10" cols="30">
</textarea>
<input type="submit" value="Enviar">
</form>
</html>
• Para o botão funcionar dentro da tag <form> é necessário
inserir o metódo Get para buscar a página.
• <form name="input" action="nome_do_arquivo.html"
method="get">
<html>
<head>
<title>Form!</title>
</head>
<form name="input" action="page1.html"
method="get">
<label> Nome: </label>
<input type="text" name="nome">
<p >Escreva o que quiser: </p>
<textarea rows="10" cols="30">
</textarea>
<input type="submit" value="Enviar">
</form>
</html>
• Botões Radiais
<html>
<head>
<title>Form!</title>
</head>
<form name="input" action="page1.html"
method="get">
<label> <p>Boy or Girl?: <p> </label>
<input type="radio" name="sex" value="male"> Boy
<br>
<input type="radio" name="sex" value="female"> Girl
<br>
<input type="submit" value="Send">
</form>
</html>
• Para obter a resposta em outra página é necessário o
suporte do javascript, php ou python.
• Caixa de Seleção
<html>
<head>
<title>Form!</title>
</head>
<form name="input" action="page1.html"
method="get">
<p>Quais meios de transporte você usa?<p>
<input type="checkbox" name="Carro">
Carro
<br>
<input type="checkbox" name="Onibus">
Onibus
<br>
<input type="checkbox" name="Bicicleta">
Bicicleta
<br>
<input type="checkbox" name="Metro">
Metro
<br>
<input type="submit" value="Enviar">
</form>
</html>
• Borda no Formulário
• Adicionar <fieldset> antes da tag <form>, e </fieldset>
e depois de </fieldset>
<html>
<head>
<title>Form!</title>
</head>
<fieldset>
<form name="input" action="page1.html"
method="get">
<p>Quais meios de transporte você usa?<p>
<input type="checkbox" name="Carro">
Carro
<br>
<input type="checkbox" name="Onibus">
Onibus
<br>
<input type="checkbox" name="Bicicleta">
Bicicleta
<br>
<input type="checkbox" name="Metro">
Metro
<br>
<input type="submit" value="Enviar">
</form>
</fieldset>
</html>
