Forms
Um form é uma área que contém elementos de formulário em um documento HTML.
Esses elementos são responsáveis por permitir que o usuário entre com informações (como campos de texto, áreas de texto, menus, etc.) em um formulário. São definidos pela tag "<form>".
Os formulários são constantes nas páginas encontradas na internet e basicamente todo cliente de webmail tem elementos de formulário, mais precisamente campo de texto e campo de senha para poder fazer a entrada de seu login e senha. Mesmo que você não se lembre deles agora, provavelmente verá que eles são familiares depois de alguns exemplos.
Faremos nosso primeiro exercício exatamente em cima destes dois exemplos.
Os formulários são constantes nas páginas encontradas na internet e basicamente todo cliente de webmail tem elementos de formulário, mais precisamente campo de texto e campo de senha para poder fazer a entrada de seu login e senha. Mesmo que você não se lembre deles agora, provavelmente verá que eles são familiares depois de alguns exemplos.
Faremos nosso primeiro exercício exatamente em cima destes dois exemplos:
<html>
<head>
<title>Estamos quase acabando, paciência com os forms</title>
</head>
<head>
<title>Estamos quase acabando, paciência com os forms</title>
</head>
<body>
<p>Veja se isto te lembra algo em clientes de e-mail</p>
<form>
Login:<input type="text" name="login" /><br />
Senha:<input type="password" name="password" />
</form>
</body>
</html>
<p>Veja se isto te lembra algo em clientes de e-mail</p>
<form>
Login:<input type="text" name="login" /><br />
Senha:<input type="password" name="password" />
</form>
</body>
</html>
Logo acima podemos ver algumas coisas a respeito dos forms. Uma delas é que eles não têm muita serventia se não tivermos outros elementos dentro deles, os "<input>" (Lembre-se de fechar a tag com um "/" no final dela. Como já disse, todas as tags devem ser fechadas!).
São eles os responsáveis por mostrar no navegador os campos que serão responsáveis por possibilitar a entrada de algum tipo de informação por parte do usuário. O atributo "type" determina o tipo do elemento, veja abaixo alguns deles:
text: Usado quando você quer inserir caracteres, números e afins no formulário.
password: Bem parecido com o "text" mas sua entrada de dados não aparecerá explicitamente para o usuário. Usada principalmente, como o próprio nome sugere, para a entrada de senhas.
radio: São os radio buttons, ou botões de opção. Elas permitem que o usuário seja capaz de escolher um elemento entre um número limitados deles.
checkbox: As check boxes, ou caixas de seleção, têm uma finalidade parecida com a dos botões, com a diferença de permitir que sejam selecionados mais de um elementos.
submit: O botão submit serve para enviar os dados.
reset: O botão reset serve para apagar todas as entradas do formulário.
password: Bem parecido com o "text" mas sua entrada de dados não aparecerá explicitamente para o usuário. Usada principalmente, como o próprio nome sugere, para a entrada de senhas.
radio: São os radio buttons, ou botões de opção. Elas permitem que o usuário seja capaz de escolher um elemento entre um número limitados deles.
checkbox: As check boxes, ou caixas de seleção, têm uma finalidade parecida com a dos botões, com a diferença de permitir que sejam selecionados mais de um elementos.
submit: O botão submit serve para enviar os dados.
reset: O botão reset serve para apagar todas as entradas do formulário.
Uma outra tag que é bem comum nas páginas é a "<select>" que geralmente também estão dentro de formulários. Elá terá sub-elementos que serão as tags "<option>" que serão valores que popularão o menu drop-down. O exemplo abaixo clarifica o seu uso:
<select name="servico">
<option value="email">E-mail</option>
<option value="agenda">Agenda</option>
<option value="noticias">Notícias</option>
<option value="jogos">Jogos</option>
</select>
<option value="email">E-mail</option>
<option value="agenda">Agenda</option>
<option value="noticias">Notícias</option>
<option value="jogos">Jogos</option>
</select>
Podemos usar os botões de opção para fazer algo semelhante ao select:
<input type="radio" name="servico_botao" value="email" /> E-mail<br />
<input type="radio" name="servico_botao" value="agenda" /> Agenda<br />
<input type="radio" name="servico_botao" value="noticias" />
Notícias<br />
<input type="radio" name="servico_botao" value="jogos" /> Jogos<br />
<input type="radio" name="servico_botao" value="agenda" /> Agenda<br />
<input type="radio" name="servico_botao" value="noticias" />
Notícias<br />
<input type="radio" name="servico_botao" value="jogos" /> Jogos<br />
Os botões de opção precisam basicamente de dois atributos para funcionar corretamente. Um deles é o "name", que diz o grupo ao qual ele pertence. Os botões devem estar agrupados para quando os dados forem recuperados na página que receber o formulários, as ações corretas sejam tomadas. O atributo "value" é o valor do botão em si, dentro do grupo e sabendo qual o nome da opção, é possível tratar de maneira precisa o que deverá ocorrer com os dados do formulário.
O mesmo conceito de grupos e valores individuais também se aplica às caixas de seleção. Da mesma maneira elas devem ser agrupadas e depois receber um valor específico para cada uma delas. O exemplo abaixo mostra isso.
E-mail: <input type="checkbox" name="servico_cb" value="email" /><br />
Agenda: <input type="checkbox" name="servico_cb" value="agenda" /><br />
Notícias: <input type="checkbox" name="servico_cb" value="noticias"
/><br />
Jogos: <input type="checkbox" name="servico_cb" value="jogos" /><br />
Agenda: <input type="checkbox" name="servico_cb" value="agenda" /><br />
Notícias: <input type="checkbox" name="servico_cb" value="noticias"
/><br />
Jogos: <input type="checkbox" name="servico_cb" value="jogos" /><br />
Como você pode perceber, elas possuem igualmente os campos "name" e "value" que funcionam da mesma maneira.
É possível colocar alguns botões também, eles podem ter várias utilidades, mas usando apenas HTML é pouco provável que você encontre alguma utilidade prática para eles. De qualquer maneira, veja abaixo como utilizá-los:
<input type="button" value="Oi, eu sou um botão">
Não há muito mistério quanto à sua sintaxe, o tipo deve ser "button" e o atributo "value" dirá o que aparecerá no texto do botão.
Vamos agora tratar o caso de dois botões bem comuns em formulários, "submit" e "reset". Cada um deles é um tipo especial de elemento usados, respectivamente, para enviar o formulário e apagar tudo que foi entrado no mesmo. Para usá-los, o tipo (type) da tag "<input>" deve ser "submit" ou "reset". Além disso, você pode dar um outro nome para o botão, alterando o valor do atributo "value".
<input type="submit" value="Enviar" />
<input type="reset" value="Apagar" />
<input type="reset" value="Apagar" />
As linhas acima mostram o exemplo de um botão "submit" e um "reset", os dois estão com seus "value"s alterados para poder exibir nomes em português. Coloque-os em um documento de exemplo, junto com mais campos de formulário e clique em ambos para entender o funcionamento deles. O botão reset tem uma característica mais explícita, você verá os campos que já estavam preenchidos serem todos esvaziados, e é exatamente isso que ele deve fazer. No caso do "submit" os dados também serão apagados, mas algo mais acontece. Veja na barra de endereços do navegador que o URL será alterado de acordo com os dados que você tiver inserido. É exatamente dessa maneira que as páginas se comunicam.
É verdade que não faz muito sentido esse exercício, já que os dados inseridos não são utilizados para nada. O tratamento dessas informações é feita, de maneira mais básica, pelo CGI mas podem também ser usadas diversas linguagens de programação para os mais variados fins. Isso, porém, foge do escopo do presente material e portanto não será explicado.
Entretanto, fica aqui mais um instrução referente à formulários, eles podem ser usados para redirecionar à alguma outra página com as informações que foram fornecidas. Isso é feito através do atributo "action" da tag "<form>".
<form name="entrada" action="pagina_redirecionada.html">
Esse atributo está intimamente ligado ao botão "submit", uma vez que esse endereço será acessado ao clicar nele. Resumindo, você coloca em um formulário a ação que deverá ser desempenhada ao se clicar no botão "submit". O documento receberá as informações que estavam contidas no formulário e poderão, conseqüentemente, ser tratadas para algum fim específico. Faça o teste preenchendo um formulário e em seguida clicando no botão "submit" que redirecione para uma página local válida, você poderá ver que no final do URL haverão os dados que estavam no formulário da página anterior.
