Introdução HyperText Markup Language HTML Formulário Prof. Luis Nícolas de Amorim Trigo nicolas.trigo@ifsertao-pe.edu.br http://professor.ifsertao-pe.edu.br/nicolas.trigo/ 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 1. No cliente, o usuário solicita acesso a um site. 2. O serviço solicitado pelo cliente é localizado pelo Servidor HTTP, onde o serviço se encontra hospedado. 3 4 3. O Servidor HTTP envia a resposta da solicitação feita pelo cliente, código HTML. 4. O Cliente recebe o código HTML e o navegador interpreta este código, gerando o formulário HTML. 5 6
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. 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. 7 8 Estrutura do Formulário Campos 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 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 Campo de Texto Linear Campo de Senha <input type= text name= ident /> <input type= password name= senha /> <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 12
Campo de Múltipla Escolha Campo de Confirmação <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 <input type= checkbox name= agree checked /> Aceita? Aceita? 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. Quando marca este campo e submete, o valor que recebe é o termo on. agree = on 13 14 Campo de Arquivo Campo Oculto <input type= file name= arquivo /> <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. 15 16 Botão de Submissão Botão de Limpeza <input type= submit name= botao value= Enviar /> <input type= reset name= botao value= Limpar /> 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. 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. 17 18
Caixa de Texto <textarea name= ident >valor</textarea> 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> 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 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 Quadro Organizador Título do 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 <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 Use as interfaces abaixo para criar o código HTML. Use as interfaces abaixo para criar o código HTML. 23 24
Use as interfaces abaixo para criar o código HTML. 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. 25 26 Frame Frame <frameset...>...</frameset> Correspondem às tags que inicia e finaliza a estrutura Frame, respectivamente. Os seus principais atributos são: <frame... /> Corresponde a tag que abre um documento web em uma parte da estrutura Frame. 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 src define o caminho do arquivo. (número sem unidade), porcentagem (número seguido pelo name define um identificador para cada parte do Frame. sinal %) e/ou * (asterisco), que determina flexibilidade na dimensão (completa o espaço que o resto da área target define o Frame-destino dos links que serão clicados. disponível). scrolling define se tem barra de rolagem obrigatória, cols que define as dimensões das colunas da estrutura. representado por "yes"; "no", se não tem barra de rolagem; e Valores semelhantes ao atributo ROWS. "auto", só terá barra de rolagem quando necessário. frameborder define se a estrutura terá moldura (valor: 1) ou não (valor: 0). noresize que define as bordas da estrutura Frame como border define a espessura (em pixel) da borda da imóveis quando aplicado na tag. moldura. bordercolor define a cor da borda, podendo ser o nome em inglês ou sistema RGB em hexadecimal. 27 28 Exemplo 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. 29 30
Iframe <iframe src="doc.html" width= 300" height= 300"></iframe> 31 32 33 34 35