Sem dúvida esta é um assunto de vital importância para todos aqueles que pretendem desenvolver uma aplicação com Delphi for PHP. Isto porque as páginas geradas com o Delphi for PHP tem como base um formulário HTML e é este formulário que submete as requisições para os scripts PHP. Por isso entender as tag utilizadas nos Forms HTML é essencial para um bom aproveitamento do Delphi for PHP. Então vamos ao que interessa.
Tag <Form>
Um formulário tem como finalidade de interação entre o usuário e o servidor ao
qual são transmitidas informações para o proprietário da página. É possível
criar áreas para entrada de texto, fazer pesquisas, páginas cujo formato depende
de uma opção escolhida pelo usuário.
A tag correspondente para se construir um formulário em HTML é <form> e </form>.
Elas determinam o início e o fim de um formulário. Dentro desta tag utilizamos
outras tag’s para inserir os controles que compõe o formulário tais como Edit’s,
Combos e Check Boxes. Essas e outras tag’s serão vistas com detalhes mais
adiante.
Existem dois métodos: “GET” e “POST” para enviar a informação do
formulário para o servidor.
METHOD= “GET” – Este método envia toda sua informação ao final da URL
ativada, pois a maioria dos documentos HTML são recuperados a partir da
requisição de uma única URL ao servidor.
Exemplo: http://www.meudominio.com.br/inserir.php?edtnome=rodrigo&edtemail=rodrigo@dominio.com
Temos aqui a passagem dos valores do formulário pela URL. Vemos que as
informações estão sendo passadas para um script PHP chamado inserir.php e temos
neste formulário 2 controles chamados edtnome e edtemail com os valores rodrigo
e rodrigo@dominio.com
respectivamente. Claro que é só um exemplo fictício, pois se estivéssemos
enviado um formulário real apareceria ai também um parâmetro representando o
botão.
METHOD= “POST” – Este método
transmite toda a informação fornecida, via formulário, imediatamente após a URL
ativada, ou seja, quando o servidor recebe uma ativação de um formulário
utilizando POST, ele sabe que precisa continuar “ouvindo” para obter a
informação. Este é o melhor método.
Agora, como o servidor que recebe a requisição sabe para onde enviar as
informações do formulário? Simples, através do atributo ACTION. Utilizando a
marcação ACTION, você estará indicando para onde o formulário deve enviar
as informações. No inicio era comum enviar as requisições para aplicações CGI.
Hoje se utiliza recursos mais avançados como aplicações .NET, Java e Scripts
PHP.
Neste exemplo abaixo as informações estão sendo enviadas para um script local
chamado gravar.php.
Exemplo:
<form METHOD=”Post” ACTION=”graver.php”> </form>
É óbvio que este script gravar.php devera estar preparado para tratar esta
requisição.Neste outro exemplo abaixo as informações estão sendo enviadas para o
endereço de correio eletrônico.
<form METHOD=”Post” ACTION=mailto:nomedoemail@provedor.com.br”>
</form>
Tag <input>
A principal tag utilizada na construção de formulários é a tag <input>. Com ela
conseguimos adicionar ao formulário os principais controles para interagir com o
usuário. Este tag suporta alguns atributos, os mais comuns são:
|
Nome |
Função |
|
Type |
Determina o tipo de controle que
será criado |
|
Name |
Nome dado ao controle que o
identificará no recebimento da requisição |
|
Value |
Valor passado a requisição pelo
controle |
|
Size |
Define o tamanho do campo |
|
Maxlength |
Define o máximo de caracteres |
|
Tabindex |
Controla a ordem de tabulação dos
controles |
Destes o atributo mais importante é o
atributo Type. É ele quem determina o tipo de controle que será criado. Os
valores mais comuns são:
|
Valor |
Controle |
|
Text |
Caixa de texto simples |
|
Password |
Caixa de texto para dados
confidências |
|
Checkbox |
Controle de seleção múltipla |
|
Radio |
Controle de seleção exclusiva |
|
Submit |
Processa os dados do formulário
enviando-os ao servidor |
|
Reset |
Limpa os dados do formulário |
|
File |
Permite realizar upload de
arquivos para o servidor |
Para ver como tudo isso funciona vamos montar uma página de contato utilizando
os controles discutidos acima. Primeiro montaremos uma estrutura básica como a
abaixo:
<Html>
<Head>
<title>Pagina de Contato</title>
</head>
<body bgcolor="#FEF4E2" text="#000000">
<form method=”post” action=””>
<table align="center" border="1" width="800">
<tr align="center">
<td width="25%"><img src="email.gif"></td>
<td width="50%" colspan="2"><font size="7" face="Verdana">Fale
Conosco</font></td>
<td width="25%"><img src="email.gif"></td>
</tr>
<tr>
<td colspan="4"><hr noshade size="2" width="737" color="#0053A6"></td>
</tr>
</table>
</form>
</body>
</html>
Observe que temos em nossa página um formulário utilizando o método de envio
Post e sem um script para tratá-lo por enquanto. A tabela criada dentro do form
e apenas para facilitar na criação do layout. Por enquanto manteremos a tabela
com 1 pixel de borda para que podemos ver como a tabela esta sendo construída.
Ao final retiraremos a borda para que possamos atingir o efeito desejado.
Figura 1 - HTML básico
Vamos montar um formulário para que o usuário possa entrar em contato para isso
e necessário que o mesmo se identifique, assim antes da tag </table> adicione os
comandos abaixo:
<tr>
<td align="right">Nome:</td>
<td colspan="3"> <input type="text" name="Nome" size="50"></td>
</tr>
<tr>
<td align="right">Email:</td>
<td colspan="3"><input type="text" name="Email" size="45"></td>
</tr>
<tr>
<td align="right">Endereço:</td>
<td colspan="3"><input type="text" name="Endereco" size="65"></td>
</tr>
<tr>
<td align="right">Cidade:</td>
<td align="left" ><input type="text" name="Cidade" size="30"></td>
<td align="right">UF:</td>
<td align="left"><input type="text" name="UF" size="1" maxlength="2"></td>
</tr>
Com isso temos os campos básicos para identificar o usuário. Observe como devera
estar seu formulário.
Figura 2 - Dados
básicos do usuário
Você há de concordar comigo que o campo UF poderia ser um ComboBox onde teríamos
as principais UF do Pais senão todas, mas para isso precisamos aprender mais uma
tag.
Tag <select>
As tag’s <select></select> definem uma lista de opções. Cada opção desta lista é
marcada pelas tag’s <option> </option>. Para que uma das opções já venha marcada
por default basta incluir na respectiva tag <option> o atributo selected.
Para alterar o campo UF por um ComboBox substitua a linha:
<td align="left"><input type="text" name="UF" size="1"
maxlength="2"></td>
Por:
<td align="left"><select name="UF">
<option value="SP">SP</option>
<option value="MG">MG</option>
<option value="ES">ES</option>
<option value="RJ" selected>RJ</option>
<option value="BA">BA</option>
<option value="DF">DF</option>
</select></td>
Observe o resultado:
Figura 3 - Inserindo
ComboBox
Vamos adicionar mais alguns inputs em nosso formulário. Antes da tag </table>
adicione o código abaixo:
<tr>
<td align="right">Conteúdo Preferido:</td>
<td colspan="3"><input type="checkbox" name="ConteudoPref" Value="Artigo">Artigo
<input type="checkbox" name="ConteudoPref" Value="Dicas">Dicas
<input type="checkbox" name="ConteudoPref" Value="Video-Aula">Video-Aula
<input type="checkbox" name="ConteudoPref" Value="Exemplos">Exemplos</td>
</tr>
<tr>
<td align="right">Assinar News ?</td>
<td colspan="3"><input type="radio" name="News" Value="SIM" checked="checked">Sim
<input type="radio" name="News" Value="NAO" >Não</td>
</tr>
Figura 4 – CheckBox,
RadioButton e File
Vamos dar opção de o usuário enviar junto uma pequena observação ou sugestão.
Para isso faremos isso de uma nova tag.
Tag <textarea>
Para situações onde e necessário enviar um pequeno texto para o servidor
utilizamos a tag’s <textarea></textarea>. Alem dos atributos citados acima esta
tag ainda pode receber os atributos “rows” e “cols”.
Antes da tag </table> adicione o código abaixo:
<tr>
<td align="right">Comentario:</td>
<td colspan="3"><textarea name="coments" cols="50" rows="10"></textarea></td>
</tr>
Para concluir iremos
adicionar os botões Enviar e Limpar. Para Tanto antes da tag </table> adicione o
código abaixo:
<tr>
<td align="right" colspan="2"><input type="submit" value="enviar"></td>
<td align="left" colspan="2"><input type="reset" value="Limpar"></td>
</tr>
Observe o resultado:
Enfim está pronto nosso
formulario de contato. Agora para deixa-lo correto vamos alterar a propriedade
Border para 0. Observe:
Conslusão
Com este quarto e ultimo artigo encerramos assim esta serie sobre HTML. É claro
que hoje em dia ninguém utiliza estes métodos para construção de paginas HTML.
Há no mercados ótimos editores e geradores de HTML free e alguns pagos de baixo
custo que facilitam bastante a criação destas paginas.
Mas o intuito desta serie e justamente mostrar os bastidores pois principalmente
as tag vistas neste artigo são largamente utilizadas pelos componentes do Delphi
for PHP porem de forma implícita para o programador basta arrastar um Edit para
o formulário (RAD).
Na próxima serie aprenderemos em 4 partes também como trabalhar com javascript,
entender a sintaxe, eventos no HTML e muito mais. Um abraço a todos e ate a
próxima.
Eu sou Rodrigo Carreiro e pela sua atenção muito obrigado.
Rodrigo Carreiro Mourão
Consultor da TDS Tecnologia – RJ atuando na área de desenvolvimento de
projetos Orientados a Objetos, Design Patterns, MVC. BDS2006 Win32 Product
Certified. Borland Instructor Certified. Instrutor de treinamento oficiais
CodeGaer DelphiWin32, Delphi for PHP, Delphi .Net. Palestrante da Borland
Conference 2007.
Contato:
rodrigocarreiro@tdstecnologia.com.br
|
Home
Enviar para um amigo
Versão para impressão
Comentários
