PROGRAMAÇÃO WEB DO LADO DO CLIENTE FORMULÁRIO Na linguagem HTML é permitido que o usuário interaja com o servidor através de formulários ligados a scripts desenvolvidos em linguagens como PHP, Servlets, JSP, ASP, etc. Deixando claro que os formulários apenas fazem parte visual da interação real. <FORM></FORM> Determina o início e o fim de um formulário. O FORM possui dois atributos que são: ACTION, destino após a submissão do formulário; e METHOD, método como os dados serão enviados para o destino, sendo os valores deste atributo, os métodos GET e POST. <INPUT> Esta tag especifica vários campos dentro de um formulário. Ele pode receber diversos atributos que definem o tipo de campo (botão, caixa de texto, etc). O atributo mais importante do input é o NAME, ele associa ao identificador do valor da entrada no elemento. O atributo VALUE associa o valor do usuário (digitado ou marcado). Quando receber os dados processados irá aparecer NAME = VALUE. Tem também os atributos SIZE, que associa ao tamanho do campo; e MAXLENGHT, que associa a quantidade de caracteres no campo. Outro atributo importante é o TYPE que identifica o tipo de campo. Os valores deste veremos abaixo: Caixa de Texto Caixa de texto simples. <INPUT TYPE="TEXT" NAME="NOME"> <INPUT TYPE="TEXT" NAME="NOME" VALUE="Texto"> Texto Password Esconde a informação digitada. <INPUT TYPE="PASSWORD" NAME="PASSWORD"> *******
Radio O usuário deve escolher uma resposta em uma única alternativa. O atributo CHECKED é um atributo de presença, ele indica que a opção é a opção default. Sim <INPUT TYPE="RADIO" NAME="RESPOSTA" VALUE="SIM" CHECKED><BR> Não <INPUT TYPE="RADIO" NAME="RESPOSTA" VALUE="NÃO"> Sim Não File Quando for usar o campo de arquivo (por exemplo, para upload de arquivos) deverá acrescentar na tag <FORM> o seguinte atributo e seu valor enctype="multipart/form-data". <INPUT TYPE= FILE NAME= FOTO > Checkbox O usuário pode concordar ou não. Deseja receber informações? <INPUT TYPE="CHECKBOX" NAME="CONCORDA"> Deseja receber informações? Obs.: O atributo CHECKED é usado para deixar marcado como default.
Textarea Caixa de texto em tamanho maior. O atributo ROWS define a quantidade de linhas, COLS a largura e entre as tags <TEXTAREA></TEXTAREA> ficará o texto. <TEXTAREA NAME= CAIXA ROWS= 5 COLS= 30 >Texto</TEXTAREA> Texto Select Menu com várias opções para o usuário escolher. O SELECT tem outros atributos específicos. Tem o atributo SELECTED associa a opção indicada como default, o atributo SIZE associa o tamanho do campo, por exemplo, se definir valor 7 (sete), o campo terá altura para sete opções; e o atributo MULTIPLE (de presença) associa a poder marcar mais de uma opção. Este último atributo, no website, para marcar mais de uma opção, deverá segurar o botão Ctrl (Control) e marcar as opções. <SELECT NAME= OPCOES > <OPTION value= 1 SELECTED>menu</OPTION> <OPTION value= 2 >opcao</option> <OPTION value= 3 >opcao2</option> </SELECT> menu Submit Botão que envia os dados do formulário. <INPUT TYPE= SUBMIT NAME= botaoenviar VALUE= Enviar > Enviar Reset Botão que limpa os dados do formulário. <INPUT TYPE= RESET NAME= botaolimpar VALUE= Limpar > Limpar Hidden Corresponde a uma caixa de texto invisível. Armazena informações que poderão ser utilizadas por formulários. A informação não fica visível no navegador, mas se visualizar o código-fonte, consegue ver o valor do campo. <INPUT TYPE= HIDDEN NAME= NOME VALUE= Texto >
<FIELDSET> </FIELDSET> A tag FIELDSET define um grupo de controle de formulário, agrupando formulários relacionados. <FIELDSET> <FORM METHOD="POST" ACTION="AUTENTICA.PHP"> <P>Login: <INPUT TYPE="TEXT" NAME="LOGIN"></P> <P>Senha: <INPUT TYPE="PASSWORD" NAME="SENHA"></P> <P><INPUT TYPE="SUBMIT" NAME="BOTAOACESSAR" VALUE="Acessar"></P> </FORM> </FIELDSET> <LEGEND> </LEGEND> A tag LEGEND define o título do quadro formado pela tag FIELDSET. <FIELDSET> <LEGEND>Tela de Autenticação</LEGEND> <FORM METHOD="POST" ACTION="AUTENTICA.PHP"> <P>Login: <INPUT TYPE="TEXT" NAME="LOGIN"></P> <P>Senha: <INPUT TYPE="PASSWORD" NAME="SENHA"></P> <P><INPUT TYPE="SUBMIT" NAME="BOTAOACESSAR" VALUE="Acessar"></P> </FORM> </FIELDSET>
FRAME Frame corresponde a 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. <FRAMESET...>...</FRAMESET> Correspondem às tags que inicia e finaliza a estrutura Frame, respectivamente. Os seus principais atributos são: ROWS, que 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, que define se a estrutura terá moldura ou não. Se o valor for igual a 1 (um), terá moldura, senão for igual a 0 (zero), não terá moldura. BORDER, que define a espessura da borda da moldura. BORDERCOLOR, que define a cor da borda, podendo ser o nome em inglês ou sistema RGB em hexadecimal. <FRAME> Corresponde a tag que abre um documento web em uma parte da estrutura Frame. Os seus principais atributos são: SRC, que define o caminho do arquivo. NAME, que define um identificador para cada parte do Frame. TARGET, que define o Frame-destino dos links que serão clicados. SCROLLING, que 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.
IFRAME A tag <IFRAME> corresponde a um documento HTML dentro de outro documento HTML. Os atributos são: SRC, que corresponde ao caminho até o documento HTML que será inserido dentro do documento ativo; WIDTH, que é a largura da área, podendo ser em porcentagem ou pixels; HEIGHT, que é a altura da área, podendo ser em porcentagem ou pixels; e ALIGN, que consiste no alinhamento da área. Este último atributo só é atendido no Internet Explorer <IFRAME SRC="documento.html" WIDTH="450" HEIGHT="200" ALIGN="center"></IFRAME>
AÚDIO E VÍDEO <EMBED...> Esta tag tem a função de publicar no navegador, um programa (plugin) do computador cliente que executa áudio e vídeo. Os principais atributos são: SRC, caminho do arquivo que será executado pelo plugin. WIDTH, largura da área visível. HEIGHT, altura da área visível. ALIGN, alinhamento. Os principais valores são: LEFT e RIGHT. HIDDEN, Se o valor for TRUE, torna o plugin visível; se for FALSE, torna o plugin invisível. AUTOSTART, Se o valor for TRUE, indica que será executado após carregar o site; se for FALSE, indica que será necessário apertar o botão Play para executar. LOOP, Se o valor for TRUE, a quantidade de repetições será infinita; se for FALSE, repetirá somente uma vez. Os principais formatos de áudio utilizados são: MP3, WAV e MID. Já os de vídeo são: SWF, MOV, MPEG, AVI, WMV.