{controls na internet}

 
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:

&ltINPUT

 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:

&ltINPUT 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.

&ltINPUT 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:

&ltINPUT

 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:

&ltTEXTAREA

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:

&ltSELECT

 SIZE=altura da janela

 NAME="nome da variável que recebe o que está na linha selecionada">

 &ltOPTION&gtPrimeira Opção

 &ltOPTION SELECTED&gtOpção default

 &ltOPTION&gtTerceira Opção

 &ltOPTION VALUE="string que vai para a variável no lugar da linha"&gtQuarta 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:

&ltINPUT

 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:

 

Ali Baba Al Capone PC

 
 
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:

tel=295-8643

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:

&ltINPUT

 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:

 

Sharon Stone

 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.