PÓS-GRADUAÇÃO EM MATEMÁTICA COMPUTACIONAL INFORMÁTICA INSTRUMENTAL Formulários HTML Aula 07: Formulários e Frames HTML Os formulários HTML são utilizados, geralmente, como entradas de dados prépreenchimento, o formatadas, a serem preenchidas pelos usuários. Após seu formulário HTML conterá informações que devem ser manipuladas através da utilização de outras linguagens, como, por exemplo, o PHP ou o ASP. O exemplo mais comum, de utilização de formulários HTML, é o formulário de cadastro de usuários, normalmente utilizados em páginas comerciais, quando queremos efetuar compras vias internet, neles são solicitadas informações como: nome, endereço, e-mail, CPF, etc. Aba Forms (Formulários): composta pelos componentes: Formulário: permite adicionar um novo formulário a página HMTL; Botão de Entrada: permite adicionar um botão ao formulário, onde o usuário pode efetuar a submissão do que está sendo preenchido; Caixa de Texto: permite adicionar um campo de texto ao formulário, para que o usuário digite alguma informação, como por exemplo, seu nome e e-mail; Entrada Oculta: permite adicionar um valor oculto ao formulário, que não é visível ao usuário, e sim utilizado para efetuar algum tipo de controle; Área de Texto: permite adicionar uma área de texto ao formulário, onde o usuário pode digitar um texto com várias linhas, como por exemplo, um campo de comentário ou sugestão; Botão de Opção: permite adicionar opções de entrada ao formulário, onde o usuário só pode selecionar uma dessas opções, como por exemplo, campo de sexo: masculino / feminino; Caixa de Verificação: permite acionar itens de checagem ao formulário, onde o usuário pode selecionar mais de um item, como por exemplo, hobbies: ouvir música / assistir filmes / nadar / etc. Selecionar: permite adicionar ionar caixas de seleção ao formulário, onde o usuário pode selecionar um ou mais itens entre um conjunto pré- definido, como por exemplo, meses do ano. Opção: permite adicionar as opções que serão apresentadas ao componente Selecionar, como por exemplo, Janeiro / Fevereiro / etc. Grupo de Opção: permite definir grupos de opções de acordo com informações específicas a que pertencem, dentro do componente Selecionar ; Figura 01: Aba Forms. 1
1) Adicionando um Formulário a uma página HTML Figura 02: Inserindo formulário em página HTML. Parâmetro action: permite especificar qual página (normalmente uma página ASP ou PHP) será invocada para tratar os dados dor formulário quando o mesmo é submetido; Parâmetro method: permite especificar como os dados do formulário devem ser enviados para o servidor. Ele pode assumir os valores: 1) get: os dados são enviados como string anexada a URL da página, e ficam visíveis; 2) post: os dados são encapsulados juntamente ao corpo da requisição HTTP e não podem ser vistos. 2) Adicionando uma Entrada Oculta a um formulário HTML Figura 03: Inserindo uma entrada oculta num formulário HTML. Parâmetro type: permite especificar qual o tipo de componente de entrada desejamos utilizar, nesse caso hidden (oculto); 2
Parâmetro name: permite especificar qual é o nome do componente que está sendo adicionado ao formulário, possibilita identificá-lo no momento em que o formulário for submetido e processado pelo servidor; Parâmetro value: permite especificar o valor que deve ser armazenado no componente (entrada ocultado) no momento em que o formulário for submetido. 3) Adicionando uma Caixa de Texto ao formulário HMTL Figura 04: Inserindo uma entrada de texto num formulário HTML. Parâmetro type: permite especificar qual o tipo de componente de entrada desejamos utilizar, nesse caso text (entrada de texto); Parâmetro name: : permite especificar qual é o nome do componente que está sendo adicionado ao formulário, possibilita identificá-lem que o formulário for submetido e processado pelo servidor; no momento Parâmetro maxlength: : permite especificar (limitar) o tamanho máximo, em caracteres, que pode ser digitado dentro da caixa de entrada pelo usuário; 4) Adicionando uma Área de Texto ao formulário HTML 3
Figura 05: Inserindo uma área de texto num formulário HTML. Parâmetro rows: permite especificar qual o número total de linhas de texto devem ser apresentadas pelo textarea; Parâmetro cols: permite especificar qual o número total de colunas de texto devem ser apresentadas pelo textarea; 5) Adicionando Botão de Opção ao formulário HTML 4
Figura 06: Inserindo botão de opção num formulário HTML. Parâmetro type: permite especificar qual o tipo de componente de entrada desejamos utilizar, nesse caso option (botão de opção); Parâmetro name: : permite especificar qual é o nome do componente que está sendo adicionado ao formulário, possibilita identificá-lo no momento em que o formulário for submetido e processado pelo servidor. No caso do componente botão de opção, quando eles pertencem a um mesmo grupo, nesse caso escolaridade, eles devem conter o mesmo nome; Parâmetro value: permite especificar o valor que deve ser armazenado no componente (botão de opção) no momento em que o formulário for submetido; 5
6) Adicionando Caixa de Verificação ao formulário HTML Figura 07: Inserindo caixa de verificação num formulário HTML. Parâmetro type: permite especificar qual o tipo de componente de entrada desejamos utilizar, nesse caso checkbox (caixa de verificação); Parâmetro name: permite especificar qual é o nome do componente que está sendo adicionado ao formulário, possibilita identificá-lo no momento em que o formulário for submetido e processado pelo servidor; Parâmetro value: : permite especificar o valor que deve ser armazenado no componente (caixa de verificação) no momento em que o formulário for submetido. 7) Adicionando Selecionar ao formulário HMTL Figura 08: Inserindo selecionar num formulário HTML. 6
Parâmetro name: : permite especificar qual é o nome do componente que está sendo adicionado ao formulário, possibilita identificá-lo no momento em que o formulário for submetido e processado pelo servidor; Parâmetro value: : permite especificar o valor que deve ser armazenado no componente (caixa de verificação) no momento em que o formulário for submetido; 8) Adicionando Botão ao formulário HMTL Figura 09: Inserindo botão num formulário HTML. Frames HTML A utilização de frames possibilita agregar a uma mesma página diversos arquivos HTML, permitindo dividir o espaço da página de acordo com linhas e colunas, e assim controlar seu tamanho, através da quantidade de subdivisões utilizadas e de sua distribuição na página. Dentro desse contexto, temos que, cada uma das "partes de uma determinada página, é ocupada por arquivos HTML distintos e independentes. Sendo assim, o uso de frames permite apresentar várias páginas dentro de uma. Atributos da tag <FRAMESET>: Atributos mais importantes: COLS: determina a divisão da tela em coluna; ROWS: determina a divisão da tela em linhas; Obs.: tanto depois de COLS, quanto de ROWS aparecem, separados por vírgulas, o tamanho de cada coluna ou linha da página. Valores que os atributos ROWS/COLS podem receber: Numérico (pixels): por exemplo, ROWS= 30, 50, indicando quantos pixels cada frame (ou janela) deve ocupar. Relativo (*): por exemplo, ROWS= 2*,*", tem-se um valor relativo, onde o primeiro frame ocupará dois terços da tela e o segundo um terço. Percentual (%): por exemplo, ROWS= 25%, 25%, 50%", importante observar que o total deve somar 100%, ou ainda, ROWS= 25%, 25%, *", pois onde está o asterisco * o navegador substituirá pelo valor que falta para a soma dos valores atinja 100%. Atributos utilizados com frequência: 7
FRAMESPACING: determina o espaçamento entre os frames (em pixels). FRAMEBORDER: define se haverá ou não bordas entre os frames (valor: 1 com bordas, ou valor 0 sem bordas); BORDERCOLOR: especifica a cor da borda entre os frames; As tags <FRAME>: devem estar cercadas por tags <FRAMESET> e </FRAMESET>, e serem inseridas de acordo com o número de colunas ou linhas definido nos atributos COLS e ROWS. Elas são utilizadas para definir qual página HTML será carregada dentro de cada uma das divisões do frameset. Atributos da tag <frame>: SRC: especifica o arquivo HTML que deve ser carregado pelo frame; MARGINHEIGHT e/ou TOPMARGIN: especificam a altura das margens superior e inferior do frame em pixels; MARGINWIDTH e/ou LEFTMARGIN: especificam a altura das margens direita e esquerda do frame em pixels; NAME: especifica o nome do frame; NORESIZE: utilizado para impossibilitar que o frame seja redimensionado pelo usuário; SCROLLING: define se o frame apresentará ou não barra de rolagem (valor: YES para o frame utilizar barras de rolagem, e valor: NO para o frame não utilizar barras de rolagem); Aba Frames : composta pelos componentes: Assistente de Frames: permite criarmos uma página HTML formatada por frames, configurando várias opções da tag <frameset>; Frameset: permite criarmos uma página HTML formatada por frames, configurando apenas as opções mais básicas (linhas e colunas) da tag <frameset>; Frame: permite inserir os frames que devem ser apresentados pelo <frameset> configurado anteriormente; Alvo: permite especificarmos uma URL (caminho) como base para um conjunto de imagens e documentos que pretendemos abrir ou visualizar dentro da página HMTL posteriormente; Figura 10: Aba Frames. 1) Criando um Frameset Antes da criação do Frameset serão criadas três páginas HTML, topo.html, centro.html e rodapé.html, utilizadas para compor o Frameset que está sendo criado. Essas páginas serão simples, conterão apenas cores de fundo distintas em suas tags <body>, como mostra a imagem a seguir: 8
Figura 11: Código-fonte exemplo para as três páginas que compõem o frameset criado. Após a criação das três páginas, cada qual com uma cor de fundo, é criado o arquivo HTML que contém o frameset que possui todas as páginas HTML criadas anteriormente. Figura 12: Frameset contendo as três páginas HMTL criadas anteriormente. 9
Prática: Formulários e Frames HTML Editor Bluefish (Windows ou Linux) http://www.gileduardo.com.br/ifpr/ii/downloads/ii_pratica07.pdf.pdf 10