produção de sites unidade 6 – formulários html prof.: henrique santos
TRANSCRIPT
![Page 1: Produção de Sites Unidade 6 – Formulários HTML Prof.: Henrique Santos](https://reader035.vdocuments.site/reader035/viewer/2022062418/552fc171497959413d8ee260/html5/thumbnails/1.jpg)
Produção de Sites
Unidade 6 – Formulários HTMLProf.: Henrique Santos
![Page 2: Produção de Sites Unidade 6 – Formulários HTML Prof.: Henrique Santos](https://reader035.vdocuments.site/reader035/viewer/2022062418/552fc171497959413d8ee260/html5/thumbnails/2.jpg)
Introdução
Um Formulário HTML é uma seção de um documento contendo elementos especiais chamados controles (campos de texto, botões, etc).
Usuários normalmente preenchem um formulário modificando os controles (inserindo texto nos campos, clicando em um botão).
O Formulário é então enviado para um agente para ser processado (um Servlet, Servidor Web, etc).
![Page 3: Produção de Sites Unidade 6 – Formulários HTML Prof.: Henrique Santos](https://reader035.vdocuments.site/reader035/viewer/2022062418/552fc171497959413d8ee260/html5/thumbnails/3.jpg)
Introdução
Formulários são feitos usando as tags <form></form>
Todos controles DEVEM estar contidos dentro das tags de formulário
Quase todos controles são feitos usando o elemento <input>, variando somente o atributo type
![Page 4: Produção de Sites Unidade 6 – Formulários HTML Prof.: Henrique Santos](https://reader035.vdocuments.site/reader035/viewer/2022062418/552fc171497959413d8ee260/html5/thumbnails/4.jpg)
Exemplos de Formulário
Para testar os exemplos dos próximos slides, execute o programa de servidor
• O programa foi disponibilizado juntamente com a transparência
É preciso ter o Java instalado (e configurado) para executar o programa.
![Page 5: Produção de Sites Unidade 6 – Formulários HTML Prof.: Henrique Santos](https://reader035.vdocuments.site/reader035/viewer/2022062418/552fc171497959413d8ee260/html5/thumbnails/5.jpg)
Exemplo Form GET
<html><body style="background-
color:#000000;color:#ffffff"> <h1 style="text-align:center"> Exemplo usando
Formulário GET </h1> <form action="http://localhost:4444"> <p style="text-align:center"> Nome: <input type="text" name="nome"
value="Joao" /><br /> Sobrenome: <input type="text"
name="sobrenome" value="Batista" /> <br /> <input type="submit" /> </p> </form>
</body></html>
![Page 6: Produção de Sites Unidade 6 – Formulários HTML Prof.: Henrique Santos](https://reader035.vdocuments.site/reader035/viewer/2022062418/552fc171497959413d8ee260/html5/thumbnails/6.jpg)
Resultado Inicial
![Page 7: Produção de Sites Unidade 6 – Formulários HTML Prof.: Henrique Santos](https://reader035.vdocuments.site/reader035/viewer/2022062418/552fc171497959413d8ee260/html5/thumbnails/7.jpg)
Depois da Submissão do Form
![Page 8: Produção de Sites Unidade 6 – Formulários HTML Prof.: Henrique Santos](https://reader035.vdocuments.site/reader035/viewer/2022062418/552fc171497959413d8ee260/html5/thumbnails/8.jpg)
Método de Envio
O padrão de envio de um formulário é via GET
GET é mais rápido e fácil de enviar mas bastante inseguro
Outra forma de envio mais seguro é via POST
Usando POST as informações não aparecem na barra de endereços do navegador
![Page 9: Produção de Sites Unidade 6 – Formulários HTML Prof.: Henrique Santos](https://reader035.vdocuments.site/reader035/viewer/2022062418/552fc171497959413d8ee260/html5/thumbnails/9.jpg)
Exemplo Form POST
<html><body style="background-
color:#000000;color:#ffffff"> <h1 style="text-align:center"> Exemplo usando
Formulário POST </h1> <form action="http://localhost:4444"
method="post"> <p style="text-align:center"> Nome: <input type="text" name="nome"
value="Joao" /><br /> Sobrenome: <input type="text"
name="sobrenome" value="Batista" /> <br /> <input type="submit" /> </p> </form>
</body></html>
![Page 10: Produção de Sites Unidade 6 – Formulários HTML Prof.: Henrique Santos](https://reader035.vdocuments.site/reader035/viewer/2022062418/552fc171497959413d8ee260/html5/thumbnails/10.jpg)
Resultado Inicial
![Page 11: Produção de Sites Unidade 6 – Formulários HTML Prof.: Henrique Santos](https://reader035.vdocuments.site/reader035/viewer/2022062418/552fc171497959413d8ee260/html5/thumbnails/11.jpg)
Depois da Submissão do Form
![Page 12: Produção de Sites Unidade 6 – Formulários HTML Prof.: Henrique Santos](https://reader035.vdocuments.site/reader035/viewer/2022062418/552fc171497959413d8ee260/html5/thumbnails/12.jpg)
Codificação de URL
![Page 13: Produção de Sites Unidade 6 – Formulários HTML Prof.: Henrique Santos](https://reader035.vdocuments.site/reader035/viewer/2022062418/552fc171497959413d8ee260/html5/thumbnails/13.jpg)
Resultado Codificação
![Page 14: Produção de Sites Unidade 6 – Formulários HTML Prof.: Henrique Santos](https://reader035.vdocuments.site/reader035/viewer/2022062418/552fc171497959413d8ee260/html5/thumbnails/14.jpg)
Controles de Texto
Como mencionado anteriormente, a grande maioria usa a tag <input>.
A tag <input> é uma tag vazia, lembre-se sempre de fechá-la logo depois de usá-la.
Os outros controles de texto que não usam a tag <input>, NÃO são tags vazias.
Atributo ‘name’ é obrigatória para todos controles, nunca se esqueça.
![Page 15: Produção de Sites Unidade 6 – Formulários HTML Prof.: Henrique Santos](https://reader035.vdocuments.site/reader035/viewer/2022062418/552fc171497959413d8ee260/html5/thumbnails/15.jpg)
Controles de Texto
Textfields <input type="text" … />
• Atributo ‘value’ define um valor inicial
Campos de Password <input type="password" … />
•SEMPRE use POST
![Page 16: Produção de Sites Unidade 6 – Formulários HTML Prof.: Henrique Santos](https://reader035.vdocuments.site/reader035/viewer/2022062418/552fc171497959413d8ee260/html5/thumbnails/16.jpg)
Controles de Texto
Áreas de Texto <textarea name="…" rows="…"
cols="…"> … </textarea>• Interpretação de tags HTML fica desabilitada
entre <textarea> e </textarea>
![Page 17: Produção de Sites Unidade 6 – Formulários HTML Prof.: Henrique Santos](https://reader035.vdocuments.site/reader035/viewer/2022062418/552fc171497959413d8ee260/html5/thumbnails/17.jpg)
Botões
Botão de Envio/Submissão <input type="submit" … />
• Use atributo ‘name’ se tiver vários botões• Use atributo ‘value’ para mudar o texto do botão
Botão de Limpar <input type="reset" … />
• Use ‘value’ para mudar o texto do botão
Botão JavaScript <input type="button"
onClick="algumaFuncaoJavaScript()" … /> Botões Fancy
<button type="submit">HTML</button>• Depende do navegador
![Page 18: Produção de Sites Unidade 6 – Formulários HTML Prof.: Henrique Santos](https://reader035.vdocuments.site/reader035/viewer/2022062418/552fc171497959413d8ee260/html5/thumbnails/18.jpg)
Usando Vários Botões Submit
<p style="text-align:center">Item: <input type="text" name="item" value="Pen Drive 16GB" /> <br />
<input type="submit" name="adicionar" value="Adicionar as Compras" />
<input type="submit" name="deletar" value="Remover das Compras" /> </p>
![Page 19: Produção de Sites Unidade 6 – Formulários HTML Prof.: Henrique Santos](https://reader035.vdocuments.site/reader035/viewer/2022062418/552fc171497959413d8ee260/html5/thumbnails/19.jpg)
Check Box
Formato <input type="checkbox" … />
• O atributo ‘checked’ o torna selecionado inicialmente• O par Nome/Valor é enviado somente se o checkbox
estiver selecionado ao se enviar o formulário
Código Exemplo:<p><input type="checkbox" name="sem_email" checked /> Marque aqui se você <i>não</i> quiser receber nossos emails.</p>
Resultado
![Page 20: Produção de Sites Unidade 6 – Formulários HTML Prof.: Henrique Santos](https://reader035.vdocuments.site/reader035/viewer/2022062418/552fc171497959413d8ee260/html5/thumbnails/20.jpg)
Radio Button
Formato<input type ="radio" … />
•Todos radio buttons em um grupo devem possuir o mesmo valor para o atributo ‘name’, mas sempre possuem valores diferentes para o atributo ‘value’.
•Apenas um botão por grupo pode ser clicado; clicando um botão diferente desabilita o clicado anteriormente
![Page 21: Produção de Sites Unidade 6 – Formulários HTML Prof.: Henrique Santos](https://reader035.vdocuments.site/reader035/viewer/2022062418/552fc171497959413d8ee260/html5/thumbnails/21.jpg)
Radio Button
Exemplo:Formas de Pagamento: <br/><input type="radio" name="pagamento"value="credito"/> Cartão de Crédito <br/><input type="radio" name="pagamento"value="boleto" /> Boleto Bancário <br/><input type="radio" name="pagamento"value="transferencia"/> Transferência Eletrônica <br/>
![Page 22: Produção de Sites Unidade 6 – Formulários HTML Prof.: Henrique Santos](https://reader035.vdocuments.site/reader035/viewer/2022062418/552fc171497959413d8ee260/html5/thumbnails/22.jpg)
Combo Box
Formato A tag <select> possui o atributo ‘name’ A tag <select> não é vazia, nela estão contidas as tags
<option> <option> possui o atributo ‘value’
ExemploLinguagem Favorita:<select name="language"><option value="c#">C#</option><option value="c++">C++</option><option value="java" selected>Java</option><option value="php">PHP</option><option value="delphi">Delphi</option></select>
![Page 23: Produção de Sites Unidade 6 – Formulários HTML Prof.: Henrique Santos](https://reader035.vdocuments.site/reader035/viewer/2022062418/552fc171497959413d8ee260/html5/thumbnails/23.jpg)
List Box
Formato• Idêntico à combo boxes, mas utiliza o atributo
‘multiple’ Exemplo:Linguagens que você conhece:<br/><select name="language" multiple><option value="c#">C#</option><option value="c++">C++</option><option value="java"
selected>Java</option><option value="php">PHP</option><option
value="delphi">Delphi</option></select>
![Page 24: Produção de Sites Unidade 6 – Formulários HTML Prof.: Henrique Santos](https://reader035.vdocuments.site/reader035/viewer/2022062418/552fc171497959413d8ee260/html5/thumbnails/24.jpg)
Controle de Upload de Arquivos
Formato: • <input type="file" ... />
Este componente resulta em uma caixa de texto ao lado de um botão de pesquisa
• Usuários podem selecionar um arquivo no seu sistema de arquivos através de um diálogo de seleção
• A declaração FORM deve incluir o atributo ENCTYPE com o valor multipart/formdata
• Também devemos utilizar POST para o método de envio
![Page 25: Produção de Sites Unidade 6 – Formulários HTML Prof.: Henrique Santos](https://reader035.vdocuments.site/reader035/viewer/2022062418/552fc171497959413d8ee260/html5/thumbnails/25.jpg)
Controle de Upload de Arquivos
Exemplo:<form action="http://localhost:4444" enctype="multipart/formdata" method="post">
Selecione uma foto: <input type="file" name="arquivo_foto" />
</form>
![Page 26: Produção de Sites Unidade 6 – Formulários HTML Prof.: Henrique Santos](https://reader035.vdocuments.site/reader035/viewer/2022062418/552fc171497959413d8ee260/html5/thumbnails/26.jpg)
Campos Escondidos
Formato: <input type="hidden" ... />
•Este elemento armazena um nome e um valor, mas nenhum elemento gráfico é adicionado à página.
•O par nome/valor é adicionado aos dados do formulário quando o mesmo for enviado para o servidor.
Exemplo:<input type="hidden" name="cod_item" value="101" />
![Page 27: Produção de Sites Unidade 6 – Formulários HTML Prof.: Henrique Santos](https://reader035.vdocuments.site/reader035/viewer/2022062418/552fc171497959413d8ee260/html5/thumbnails/27.jpg)
Campos Escondidos
Campos escondidos armazenam nomes e valores fixos que são enviados sem alteração para um servidor, independente da entrada do usuário
São tipicamente utilizados com três objetivos
• Rastrear o usuário• Fornecer entrada prédefinida para um programa do
lado servidor• Armazenar informação de contexto em páginas que
são geradas dinâmicamente. Não coloque informação confidencial
em campos escondidos já que os mesmos podem ser vistos no código da página
![Page 28: Produção de Sites Unidade 6 – Formulários HTML Prof.: Henrique Santos](https://reader035.vdocuments.site/reader035/viewer/2022062418/552fc171497959413d8ee260/html5/thumbnails/28.jpg)
Formulários e CSS
Como elementos de formulários são tags HTML, eles podem ter sua aparência alterada pelo CSS.
Exemploinput { color:#FFFFFF;
background-color:#000000; }
![Page 29: Produção de Sites Unidade 6 – Formulários HTML Prof.: Henrique Santos](https://reader035.vdocuments.site/reader035/viewer/2022062418/552fc171497959413d8ee260/html5/thumbnails/29.jpg)
Resumo
A tag <form> utiliza o atributo ‘action’ para especificar a URL base
TODO elemento de entrada de dados possui um atributo ‘name’
Usuário digita ou seleciona valores Quando os dados são enviados, a URL se
torna URLbase?nome1=valor1&nome2=valor2&…
Para requisições POST, o par nome/valor é enviado em uma linha separada (não visível como parte da URL)
![Page 30: Produção de Sites Unidade 6 – Formulários HTML Prof.: Henrique Santos](https://reader035.vdocuments.site/reader035/viewer/2022062418/552fc171497959413d8ee260/html5/thumbnails/30.jpg)
Exercício de Fixação
Usando o que aprendeu sobre formulários tente reproduzir a página abaixo.