View
107
Download
2
Category
Preview:
Citation preview
Produção de Sites
Unidade 6 – Formulários HTMLProf.: Henrique Santos
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).
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
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.
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>
Resultado Inicial
Depois da Submissão do Form
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
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>
Resultado Inicial
Depois da Submissão do Form
Codificação de URL
Resultado Codificação
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.
Controles de Texto
Textfields <input type="text" … />
• Atributo ‘value’ define um valor inicial
Campos de Password <input type="password" … />
•SEMPRE use POST
Controles de Texto
Áreas de Texto <textarea name="…" rows="…"
cols="…"> … </textarea>• Interpretação de tags HTML fica desabilitada
entre <textarea> e </textarea>
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
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>
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
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
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/>
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>
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>
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
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>
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" />
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
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; }
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)
Exercício de Fixação
Usando o que aprendeu sobre formulários tente reproduzir a página abaixo.
Recommended