Carregar apresentação
A apresentação está carregando. Por favor, espere
1
Unidade 6 – Formulários HTML Prof.: Henrique Santos
Produção de Sites Unidade 6 – Formulários HTML Prof.: Henrique Santos
2
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).
3
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
4
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.
5
Exemplo Form GET <html>
<body style="background-color:#000000;color:#ffffff"> <h1 style="text-align:center"> Exemplo usando Formulário GET </h1> <form action=" <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>
6
Resultado Inicial
7
Depois da Submissão do Form
8
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
9
Exemplo Form POST <html>
<body style="background-color:#000000;color:#ffffff"> <h1 style="text-align:center"> Exemplo usando Formulário POST </h1> <form action=" 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>
10
Resultado Inicial
11
Depois da Submissão do Form
12
Codificação de URL
13
Resultado Codificação
14
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.
15
Controles de Texto Textfields Campos de Password
<input type="text" … /> Atributo ‘value’ define um valor inicial Campos de Password <input type="password" … /> SEMPRE use POST
16
Controles de Texto Áreas de Texto
<textarea name="…" rows="…" cols="…"> … </textarea> Interpretação de tags HTML fica desabilitada entre <textarea> e </textarea>
17
Botões Botão de Envio/Submissão Botão de Limpar Botão JavaScript
<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
18
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>
19
Check Box Formato Código Exemplo: Resultado
<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_ " checked /> Marque aqui se você <i>não</i> quiser receber nossos s.</p> Resultado
20
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
21
Radio Button Exemplo: Formas de Pagamento: <br/>
<input type="radio" name="pagamento" value="credito"/> Cartão de Crédito <br/> value="boleto" /> Boleto Bancário <br/> value="transferencia"/> Transferência Eletrônica <br/>
22
Combo Box Formato Exemplo Linguagem Favorita:
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’ Exemplo Linguagem 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>
23
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>
24
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
25
Controle de Upload de Arquivos
Exemplo: <form action=" enctype="multipart/formdata" method="post"> Selecione uma foto: <input type="file" name="arquivo_foto" /> </form>
26
Campos Escondidos Formato: Exemplo:
<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" />
27
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
28
Formulários e CSS Como elementos de formulários são tags HTML, eles podem ter sua aparência alterada pelo CSS. Exemplo input { color:#FFFFFF; background-color:#000000; }
29
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)
30
Exercício de Fixação Usando o que aprendeu sobre formulários tente reproduzir a página abaixo.
Apresentações semelhantes
