HyperText Markup Language HTML. Formulário

Transcrição

1 HyperText Markup Language HTML Formulário Prof. Luis Nícolas de Amorim Trigo Introdução O usuário interage com os serviços hospedados nos servidores HTTP através de formulário HTML. Formulário HTML é interligado a aplicações desenvolvidas a partir de linguagens de programação para web. Formulário HTML representa somente a parte visual da interação real. 2

2 Fluxo do Formulário 1. No cliente, o usuário solicita acesso a um site. 3 Fluxo do Formulário 2. O serviço solicitado pelo cliente é localizado pelo Servidor HTTP, onde o serviço se encontra hospedado. 4

3 Fluxo do Formulário 3. O Servidor HTTP envia a resposta da solicitação feita pelo cliente, código HTML. 5 Fluxo do Formulário 4. O Cliente recebe o código HTML e o navegador interpreta este código, gerando o formulário HTML. 6

4 Fluxo do Formulário 5. O usuário preenche o formulário HTML com informações solicitadas e o submete para o servidor HTTP após pressionar o botão de envio. 7 Fluxo do Formulário 6. O servidor recebe as informações enviadas pelo cliente via formulário HTML e o direciona para as Aplicações e/ou B.D. 8

5 Estrutura do Formulário A estrutura do formulário é delimitado através da tag: <form...>...</form> Os principais atributos desta tag são: action atribui o destino que receberá os dados enviados pelo formulário. method atribui o método em que submeterá as informações do formulário para o servidor. Os valores são: GET POST Por exemplo: <form method= get action= destino.html >... </form> 9 Campos do Formulário Existem os seguintes campos: input * text campo de texto linear password campo de senha radio campo de múltipla escolha checkbox campo de confirmação file campo de arquivo hidden campo oculto submit botão de submissão reset botão de limpeza textarea caixa de texto select campo de seleção A taginput pode assumir qualquer um dos campos listados abaixo. Para a taginput, os principais atributos são : type, name e value. type define o tipo de campo que a taginput irá assumir. name define o identificador do campo value define o valor relacionado ao identificador name = value 10

6 Campo de Texto Linear <input type= text name= ident /> <input type= text name= ident value= valor valor /> size atributo que define a largura do campo (caracteres). maxlenght atributo que define a quantidade máxima de caracteres. 11 Campo de Senha <input type= password name= senha /> 12

7 Campo de Múltipla Escolha <input type= radio name= perg value= A /> A <input type= radio name= perg value= B checked /> B <input type= radio name= perg value= C /> C A B C Para este tipo de campo é necessário ter levantado todas as respostas possíveis e criar um identificador para ser comum no atributo name de todos os campos do tipo radio envolvidos. O atributo checked (de presença) define aquele campo como resposta padrão. 13 Campo de Confirmação <input type= checkbox name= agree checked /> Aceita? Aceita? Quando marca este campo e submete, o valor que recebe é o termo on. agree = on 14

8 Campo de Arquivo <input type= file name= arquivo /> 15 Campo Oculto <input type= hidden name= ident value= valor /> Este campo fica invisível na tela do navegador, mas é possível visualizar o valor, quando vê o código-fonte. 16

9 Botão de Submissão <input type= submit name= botao value= Enviar /> Este botão é o responsável de enviar todas as informações dos campos que estão dentro da tag<form...>...</form>. O valor do atributo value fica impresso no botão. 17 Botão de Limpeza <input type= reset name= botao value= Limpar /> Este botão é o responsável de trazer os valores iniciais dos campos que estão dentro da tag<form...>...</form>. O valor do atributo value fica impresso no botão. 18

10 Caixa de Texto <textarea name= ident >valor</textarea> Atributos de redimensionamento: rows recebe valor numérico que define a altura do campo. cols recebe valor numérico que define a largura do campo. 19 Campo Seleção <select name= ident > <option value= 1 >Opção 1</option> <option value= 2 selected>opção 2</option> <option value= 3 >Opção 3</option> <option value= 4 >Opção 4</option> </select> size associa o tamanho do campo, por exemplo, se definir valor 7 (sete), o campo terá altura para sete opções. multiple (de presença) associa a poder marcar mais de uma opção. Para isso, é necessário segurar o botão Ctrl (Control) e marcar as opções. 20

11 Quadro Organizador <fieldset> </fieldset> A tagfieldset define um grupo de controle de formulário, agrupando formulários relacionados. <fieldset> <form method="post" action= dest.php"> <p>login: <input type="text" name="login"></p> <p>senha: <input type="password" name="senha"></p> <p><input type="submit" name="botao" value="acessar"></p> </form> </fieldset> 21 Título do Quadro Organizador <legend> </legend> A taglegend define o título do quadro organizador formado pela tagfieldset. <fieldset> <legend>tela de Autenticação</legend> <form method="post" action="destino.php"> <p>login: <input type="text" name="login"></p> <p>senha: <input type="password" name="senha"></p> <p><input type="submit" name="botao" value="acessar"></p> </form> </fieldset> 22

12 Exercício Use as interfaces abaixo para criar o código HTML. 23 Exercício Use as interfaces abaixo para criar o código HTML. 24

13 Exercício Use as interfaces abaixo para criar o código HTML. 25 Frame O conjunto de tags Frame formam uma estrutura que tem a finalidade de definir o layout do web site utilizando vários outros documentos web, separando-os através de molduras. Este conjunto de tags que formam a Frame é composta por: <frameset...>...</frame> delimita a estrutura. <frame... /> agrega os arquivos de conteúdo. 26

14 Frame <frameset...>...</frameset> Correspondem às tags que inicia e finaliza a estrutura Frame, respectivamente. Os seus principais atributos são: rows define as dimensões das linhas da estrutura. A quantidade de valores separados por vírgulas corresponde à quantidade de linhas e estes valores podem ser em pixel (número sem unidade), porcentagem (número seguido pelo sinal %) e/ou * (asterisco), que determina flexibilidade na dimensão (completa o espaço que o resto da área disponível). cols que define as dimensões das colunas da estrutura. Valores semelhantes ao atributo ROWS. frameborder define se a estrutura terá moldura (valor: 1) ou não (valor: 0). border define a espessura (em pixel) da borda da moldura. bordercolor define a cor da borda, podendo ser o nome em inglês ou sistema RGB em hexadecimal. 27 Frame <frame... /> Corresponde a tag que abre um documento web em uma parte da estrutura Frame. Os seus principais atributos são: src define o caminho do arquivo. name define um identificador para cada parte do Frame. target define o Frame-destino dos links que serão clicados. scrolling define se tem barra de rolagem obrigatória, representado por "yes"; "no", se não tem barra de rolagem; e "auto", só terá barra de rolagem quando necessário. noresize que define as bordas da estrutura Frame como imóveis quando aplicado na tag. 28

15 Exemplo 29 Iframe A tag<iframe...></iframe> corresponde a um documento HTML dentro de outro documento HTML. Os atributos são: src caminho do documento HTML que será inserido dentro do documento ativo. width largura da área (pixel ou %). height altura da área (pixel ou %). align alinhamento da área. Este último atributo só é atendido no Internet Explorer. 30

16 Iframe <iframe src="doc.html" width= 300" height= 300"></iframe> 31 Exercício Use as interfaces abaixo para criar o código HTML: 32

17 Exercício Use as interfaces abaixo para criar o código HTML: 33 Exercício Use as interfaces abaixo para criar o código HTML: 34

18 Exercício Use as interfaces abaixo para criar o código HTML: 35 Exercício Use as interfaces abaixo para criar o código HTML: 36

19 Exercício Use as interfaces abaixo para criar o código HTML: 37