2.1 FORM TAGS |
Quem já trabalhou com Visual Basic ou Delphi conhece bem o uso dos "controls", aquelas coisas que aparecem na interface do programa para o usuário entrar com dados,labels etc.
Na interface da Internet (que é o browser) temos as FORM TAGS no lugar dos controls. É claro que não temos um control como o Label, pois podemos colocar textos de forma mais simples com o HTML. Vamos ver os equivalentes aos outros controls.
2.2 EDIT BOX |
O EditBox serve principalmente para entrada de dados como strings, quando a quantidade entrada não é muita.
Para colocar um EditBox numa página usamos:
<INPUT
TYPE="TEXT"
NAME="nome da variável que recebe o que for entrado"
SIZE=largura da janela
MAXLENGTH=quantidade de caracteres entrados válidos
VALUE="texto default">
Os três últimos parâmetros são opcionais.
A largura dada por SIZE é numa medida maluca - o tamanho médio dos caracteres da fonte que você está usando. O que não é igual a quantidade de caracteres. Com a letra "x" dá mais ou menos certo. Repare no exemplo abaixo que foi definido assim:
<INPUT TYPE="TEXT" NAME="numtel" SIZE=10>
Tente entrar com dados nele.A quantidade de caracteres entrados válidos é infinita.Cuidado com isso. É sempre melhor definir uma MAXLENGTH mesmo que seja maior que o SIZE.
Veja outro exemplo.Nesse o tamanho é diferente e vem com um texto que pode ser substituido.
<INPUT TYPE="TEXT" NAME="ender" SIZE=30 MAXLENGTH=30 VALUE="(aqui seu endereço)">
Repare que se você for entrando com texto, no 30º caractere você é interrompido e toca o beep.Se você entrou com "x" aparecem os 30; com "m" aparecem uns 16.É aquela unidade maluca de que falamos. Mas aparecer não significa que só o que aparece é "inputado",claro? De qualquer maneira coloque os EditBox sempre com SIZE maior que MAXLENGTH para o cliente não ficar confuso.
Não existe maneira fácil de (apenas com HTML) colocar o cursor dentro dum EditBox nem de fazê-lo ir pulando de um para outro.Mas daqui a pouco inventam, espero.
Pode-se usar o VALUE para tornar o
EditBox um campo de output, por programa.
2.3 UM EDIT BOX PROTEGIDO? |
Tente digitar algo nesse EditBox aí de baixo.
Este é um Edit Box protegido que serve para entrada de password, por exemplo.Agora, ele só é protegido de alguém que esteja fungando no seu cangote (êpa!) porque pela linha até o servidor vai circular o que for digitado. De qualquer maneira pode ser usado para dar a impressão de algo muito seguro para clientes inseguros. A forma é semelhante a anterior:
<INPUT
TYPE="PASSWORD"
NAME="nome da variável que recebe o que for entrado"
SIZE=largura da janela
MAXLENGTH=quantidade de caracteres entrados válidos
VALUE="texto default">
2.4 TEXT AREA |
Para entrar ou mostrar maior quantidade de texto existe o control TextArea. A forma é assim:
<TEXTAREA
COLS=largura da janela
ROWS=altura da janela
WRAP="virtual ou phisical - veja explicação abaixo"
NAME="nome da variável que recebe o que for entrado">
linha-de-texto
linha-de-texto
</TEXTAREA>
Primeiro vai a nossa crítica relativa a inconsistência de termos. No lugar de SIZE temos COLS que faz muita gente pensar em colunas - não é nada disso.Depois o texto não entra em VALUE mas em linhas colocadas entre a abertura e fechamento da definição do control.
No entanto o que o cliente entrar vai como valor da variável definida em NAME.
Veja abaixo uma explicação sobre WRAP:
A altura dada em ROWS não equivale bem ao número de linhas (é brincadeira!, como diria o Gerson).
2.5 LIST BOX |
ListBoxes são aquelas listas nas quais você pode escolher uma opção.
É um control que também tem abertura e fechamento na definição. Assim:
<SELECT
SIZE=altura da janela
NAME="nome da variável que recebe o que está na linha selecionada">
<OPTION>Primeira Opção
<OPTION SELECTED>Opção default
<OPTION>Terceira Opção
<OPTION VALUE="string que vai para a variável no lugar da linha">Quarta Opção
</SELECT>
Só mais uma crítica:SIZE agora define é altura - e, por incrível que pareça, bate com a quantidade de linhas que aparecem (o pessoal que definiu esse negócio deve tomar todas...)
Se você definir SIZE como 1 Temos um ListBox "abrível".
Não existe o equivalente ao ComboBox (em que se pode entrar com uma nova seleção.
Veja exemplos (que não levam a nada):
Selecione o melhor time do Brasil:
Agora com SIZE=1.
Selecione o melhor estado do Brasil:
2.6 RADIO BUTTONS |
Os Botões de Rádio andam sempre juntos (como turistas japoneses).
Você só pode selecionar um do grupo. Cada um deles deve ser definido assim:
<INPUT
TYPE="RADIO"
NAME="nome da variável que recebe o VALUE selecionado"
VALUE="o que vai para a variável"
CHECKED>texto que aparece
O NAME deve ser o mesmo para todos os Botões.
O "texto que aparece" pode ser ou não igual ao VALUE.
A palavra CHECKED é opcional e só pode estar em um Botão do grupo.
Um exemplo:
Selecione o maior:
2.7 CHECK BOX |
Vamos esclarecer uma coisa importante. Cada control tem um NAME e você preenche ou assinala qualquer coisa nele.Êsse valor assinalado é enviado para o programa que está no servidor quando você aperta um Botão (que vamos ver num próximo capítulo).
Esse envio é feito sempre como uma DUPLA em que vai o NAME e o valor entrado.
Por exemplo:se um Edit Box tem o NAME "tel" e você entra com:295-8643, será enviado para o programa a DUPLA:
Voltando aos CheckBoxes, eles também andam em grupos.Mas você pode assinalar VÁRIOS deles (ao contrário dos Botões de Rádio)
Os CheckBoxes podem ou não ter o mesmo NAME. Só são enviados para o programa os ChekBoxes assinalados.Se tiverem o mesmo NAME vão várias DUPLAS com o mesmo primeiro valor e valores diferentes na segunda parte.Seu programa deve administar essa coisa meio confusa.
Cada CheckBox é definido assim:
<INPUT
TYPE="CHECKBOX"
NAME="nome da variável que recebe o VALUE, se for checado"
VALUE="o que vai para a variável"
CHECKED>texto que aparece
A palavra CHECKED é opcional e o "texto que aparece" pode ou não ser igual ao VALUE.
Mais um exemplo idiota:
Assinale as pessoas que te dão tesão:
Maguila
Ney Matogrosso
Carla Perez
Nas próximas aulas vamos ver como ligar os controls com seu programa PERL que está no servidor fazendo assim a entrada de dados via Internet.