Archive for agosto 2009

 
 

Entendo a função mysql_fetch_array();

Para manipular os dados que estão no banco com auxilio do php, além do conhecimento sobre a linguagem necessitaremos seguir alguns passos, antes de executar nossos comandos. Como o SGBD (Sistema Gerenciador de Banco de Dados) utilizado será o MySql, utilizaremos funções especificas para este SGBD, caso esteja utilizando outro recomendo que consulte o manual e verifique quais as funções desenvolvidas para seu SGBD que possuem resultado semelhantes aquelas empregadas aqui.

Para manipulação de dados que estiverem no banco com php: primeiro nos conectamos com o nosso servidor MySql através da função mysql_connect(), passando como parâmetro o nome do host, usuário do banco e senha. Depois disso selecionamos o banco de dados que desejamos atingir passando seu nome como parâmetro para a função mysql_select_db(). Com a conexão aberta e o banco selecionado todas as queries executadas dentro da função mysql_query(), que estejam em nosso script se utilizarão desta conexão para chegar ao banco.

Quando queremos inserir, editar e excluir linhas; basta apenas que coloquemos o comando SQL como parâmetro de nossa função mysql_query() ele será executado e retornará o valor TRUE em caso de sucesso e FALSE em caso de erro, Pronto! Porém quando queremos recuperar dados do banco e mostrá-los em nosso site, necessitaremos utilizar o comando SELECT junto com a função mysql_query(). Nesse caso tal função não retornará apenas TRUE ou FALSE por isso precisaremos fazer um tratamento mais elaborado utilizando a função mysql_fetch_array() para mostrar nossos dados. Então, vamos entender como recuperar nossos dados com o auxílio da função mysql_fetch_array(), nossos exemplos terão como base a tabela abaixo:

Selecionando toda a tabela

Tabela base

Quando executamos a query “SELECT * FROM empregado WHERE setor=’administrativo’” em um banco que possua nossa tabela base teremos como resultado a mini-tabela abaixo:

SELECT nome,setor,salario FROM empregado WHERE (setor=’administrativo’ OR setor=’financeiro’) AND salario>1000 AND nome like ‘M%’;

Empregados do setor administrativo

Se depois de conectados com o banco,  executarmos a query a partir de nosso servidor com o auxílio da função mysql_query(), teremos selecionado a mini-tabela acima e a copiado para a memória retornando apenas seu endereço. Por isso ao tentarmos escrever o retorno de tal função não veremos os dados selecionados, mas apenas o identificador da posição de memória que eles ocupam. Devido a isto necessitaremos de uma função auxiliar que vá até a memória e consiga trazer as linhas de nossa mini-tabela, esta função será a mysql_fetch_array().

Quando executarmos pela primeira vez a função mysql_fetch_array() passando como parâmetro o endereço de nossa mini-tabela, como a função ainda não tem nenhum endereço associado, ela irá fazer uma cópia para si do endereço da primeira linha de nossa mini-tabela em uma variável de endereço e então começará a transformar essa linha em um array, após a transformação ela incrementará a variável de endereço em uma unidade fazendo com que ela passe a armazenar o endereço da segunda linha, depois disso a função retorna a nossa linha na forma de um array, fazendo com os dados possam ser acessados colocando o nome de cada coluna como índice do array ou a posição que a coluna ocupa.

Na segunda execução como a função já tem sua variável de endereço preenchida ela não precisa mais copiá-la, apenas segue para transformar a linha associada ao endereço em um array, após a transformação incrementará a variável de endereço em uma unidade fazendo com que ela passe a armazenar o endereço da próxima linha, e retorna o array gerado com os dados da segunda linha. Tal processo se repetirá até que na recuperação da última linha de nossa mini-tabela o incremento da variável de endereço fará com que ela armazene um endereço que não corresponda a uma linha da nossa mini-tabela, e então quando a função for chamada novamente não conseguirá fazer a conversão da linha em um array e retornará FALSO.

Entendo o funcionamento da função poderemos exibir no nome dos empregados do setor financeiro da seguinte forma:

//conexão com o banco
$conecta = mysql_connect("localhost","root","");
$db = mysql_select_db("geracaobeta");//nome do banco geracaobeta

$sql = mysql_query("select * from empregado where setor='administrativo'");

//transforma a 1° linha em um array incrementa o endereço
$linha1 = mysql_fetch_array($sql);
echo $linha1['nome']."<br/>";//mostrará Maria dos Santos e quebrará a linha

//pega o endereço, transforma a 2° linha em um array e incrementa o endereço
$linha2 = mysql_fetch_array($sql);
echo $linha2['nome']."<br/>";//mostrará Maria Alice e quebrará a linha

//pega o endereço, transforma a 3° linha em um array e incrementa o endereço
$linha3 = mysql_fetch_array($sql);
echo $linha3['nome']."<br/>";//mostrará Mario Ferreira e quebrará a linha

Mas isto só funcionará porque sabemos que nossa consulta resultará em três linhas, mas caso não soubéssemos, como poderíamos fazer? Existe uma função que conta quantas linhas nosso resultado possui a mysql_num_rows(), de posse do número de linhas poderemos otimizar nosso código fazendo uso de um loop

//conexão com o banco
$conecta = mysql_connect("localhost","root","");
$db = mysql_select_db("geracaobeta");//nome do banco geracaobeta

$sql = mysql_query("select * from empregado where setor='administrativo'");

//contagem de linhas $num = 3;
$num = mysql_num_rows($sql);
//exibição das linhas
for($i=0; $i<$num; $i++){
    $linha = mysql_fetch_array($sql);
    echo $linha['nome']."<br/>";
}

Com este código teremos a execução da função mysql_fetch_array() três vezes, quando $i for 0,1 e 2; passando assim pelas três linhas de nossa tabela e retornado um array com o conteúdo da linha em questão. Já tivemos um ganho com relação a forma anterior, mas ainda podemos melhorar nosso algoritmo explorando o retorno da função mysql_fetch_array(), pois quando ela não conseguir recuperar a linha ela retornará FALSE. Então vamos ao código e depois a explicação:

//conexão com o banco
$conecta = mysql_connect("localhost","root","");
$db = mysql_select_db("geracaobeta");//nome do banco geracaobeta

$sql = mysql_query("select * from empregado where setor='administrativo'");

//exibição das linhas
while($linha = mysql_fetch_array($sql)){
 echo $linha['nome']."<br/>";
}

A cada execução o array retornado será armazenado na variável $linha que por conter um valor diferente de 0 e de FALSE será avaliada como TRUE, o que fará com que o loop continue até que não hajam mais linhas a serem recuperadas e a função retorne FALSE, interrompendo o ciclo de repetições.

Comandos SQL III – Update e Delete

Os comandos de editar e excluir possuem sintaxe simples e poucas variações, por isso colocarei os dois em um único post. Uma observação muito válida que pode lhe poupar de ter que reconstruir seus registros é lembrar sempre que um comando que não possuir restrições para atingir linhas especificas, irá atingir todas as linhas do banco. Por isso utilize sempre os comandos DELETE e UPDATE aliados com a cláusula WHERE e as palavras chaves descritas no post anterior.

Vamos aos exemplos,como já era de se esperar utilizarei a nossa tabela base incrementada no post anterior:

Tabela Base com 7 linhas

Tabela Base com 7 linhas

Comando UPDATE

Sintaxe básica:
UPDATE tabela SET coluna1=valor1, coluna2=valor2,… WHERE condição;

Exemplo 1:
UPDATE empregado SET nome=’José Silva’ WHERE nome=’José da Silva’;

Utualização de José da Silva para José Silva

Utualização de José da Silva para José Silva

Exemplo 2:
UPDATE empregado SET setor=’admin’ WHERE setor=’administrativo’;

Atualizando setor de administrativo para admin

Atingindo mais de uma linha

Modificamos todas as linhas que tinham setor como administrativo para setor igual admin

Exemplo 3:
UPDATE empregado SET salario=’465’;

Deixando todas linhas com salario=465

Deixando todas linhas com salario=465

Deixamos todos os empregados ganhando um salário mínimo (culpa do estagiário…)!

Comando DELETE

Sintaxe básica:
DELETE FROM tabela WHERE condição;

Exemplo 1:
DELETE FROM empregado WHERE id=7;

Deletando linha que tenha id=7

Deletando linha que tenha id=7

Exemplo 2:
DELETE FROM ‘empregado’ WHERE nome=’MaRiA AlIcE’;

Deletando empregado de nome Maria Alice

Deletando empregado de nome Maria Alice

Como definimos na criação do banco que ele seria case insensitive, ele não fará distinção entre letras maiúscula ou minúscula.Lembrando que acentos não tem o mesmo tratamento!
Exemplo 3:
DELETE FROM empregado WHERE setor=’financeiro’ OR setor=’suporte’;

Utilizando opcional na exclusão

Utilizando opcional na exclusão

Deletamos todos linhas/empregados que tinham setor igual a financeiro ou setor igual a suporte

Exemplo 4:
DELETE FROM empregado;

Tabela sem registros

Tabela sem registros

Como não especificamos nenhuma registrição deletamos todos os registros de nossa tabela, e agora por não termos mais onde testar os comandos encerro por aqui nossa ergométrica jornada (inicial…) a respeito dos comandos SQL.

Comandos SQL II – INSERT

Para inserirmos dados em nosso banco utilizamos o comando INSERT. Tal comando possui uma sintaxe muito simples e fácil de ser assimilada, no entanto existem alguns pontos que devem ser ressaltados para que na hora de utilizá-lo sejam evitadas certas dores de cabeça e você possa tirar melhor proveito do comando.

Forma Geral:

INSERT [INTO] tabela [(coluna1, coluna2, coluna3,...)] VALUES (valor1, valor2, valor3,…);

Para fazer a inserção de dados basta substituir tabela,colunas e valores; pelos respectivos dados que se adéqüem ao seu caso e o comando funcionará perfeitamente. Lembrando que os valores a serem inseridos devem vir na mesma posição que seu respectivo atributo; as strings (cadeia de caracteres) devem sempre estar entre aspas e os números e datas não precisam de aspas, mas se as colocar não haverá problema.

Utilizaremos aqui a mesma tabela do post anterior.

Selecionando toda a tabela

Tabela base

Para inserir um novo empregado na tabela acima necessitaremos do seguinte código:

INSERT INTO empregado(nome, salario, setor) VALUES(’Lineu Silva’,'1300′,’financeiro’);

Tabela depois que o comando acima for executado:

A linha inserida encontra-se destacada

A linha inserida encontra-se destacada

Simples assim? Isto mesmo. Porém como não existe nada fácil que não possamos complicar, apresento abaixo novas óticas para o comando de inserção. O comando acima funciona perfeitamente e corresponde a sintaxe mais estruturada, no entanto caso você encontre algumas das formas abaixo saiba que elas têm o mesmo resultado. Por que…

O Paranóico diz: Como o atributo id é a chave primária de nossa tabela e o mesmo tem a propriedade de auto-incremento não se faz necessário na hora da inserção passar algum valor para ele, o próprio banco se encarregará da gerência do mesmo. Mas prefiro setar o campo id como NULL para incluí-lo na minha query me trazendo mais segurança:

INSERT INTO empregado(id, nome, salario, setor) VALUES (NULL,’Lineu Silva’,'1300′,’financeiro’);

Quem tem boa memória diz: Quando as colunas a serem preenchidas não forem listadas, a inserção de valores respeitará  a ordem definida no banco. Como me lembro que a ordem das colunas no banco é nome,salario,setor posso conseguir o mesmo resultado do comando acima apenas com :

INSERT INTO tabela VALUES (’Lineu Silva’,'1300′,’financeiro’);

Quem aprendeu a editar primeiro diz: Vale lembrar que é permitido também a utilização do comando set na hora da inserção:

INSERT INTO empregado SET nome=’Lineu Silva’, salario=’1300′,setor=’financeiro’;

Os adiantados dizem: Como o comando SELECT é diferente do SELECT INTO, por curiosidade retirei o INTO do INSERT e percebi que ele funciona do mesmo jeito (pelo menos no MySql…):

INSERT empregado(nome, salario, setor) VALUES (’Lineu Silva’,'1300′,’financeiro’);

Neste post ficamos por aqui, no próximo abordarei os comandos de edição e eliminação de linhas!!

Comandos SQL I – SELECT

O comando que nos possibilita recuperar dados do nosso banco é o SELECT, que como o nome já diz seleciona linhas e colunas de uma ou mais tabelas de acordo com nossas especificações. Para facilitar o aprendizado a respeito das combinações que poderemos fazer com tal comando, utilizaremos uma única tabela de dados como base para nossos exemplos. De inicio, vamos recuperar todos os dados da tabela e à medida que formos explicando as clausulas/palavras-chave de refinamento, as aplicaremos em nossa tabela base para visualizar o retorno de nossas especificações.

Comando Base:

SELECT colunas FROM tabela(s) [WHERE condições] [ORDER BY tipo_de_pedido] [LIMIT critérios_de_limite]

Definindo atributos

Caso você queira definir quais colunas deverão ser retornadas em seu resultado, você deverá especificá-las após a palavra-chave SELECT. Um item útil é o operado curinga * (asterisco) que corresponde a todas as colunas na(s) tabela(s) especificadas.

Exemplo 1:  SELECT *  FROM empregado;

O comando acima retorna todas as linhas e colunas de nossa tabela base:

Selecionando toda a tabela

Selecionando toda a tabela

Exemplo 2: SELECT nome,setor,salario  FROM empregado;

Por meio da restrição de colunas retiramos a coluna que armazena o identificador e agora podemos trabalhar somente com os dados. Resultado do comando:

SELECT nome,setor,salario  FROM empregado;

Restringindo colunas na busca

WHERE

A cláusula WHERE é utilizada quando desejemos recuperar um subconjunto de linhas específicas de uma tabela, aplicando critérios de seleção. Os critérios podem ser agrupados tendo relação imperativa (AND) ou opcional (OR). Tal clausula aceita os comparadores de igualdade (=), diferença (<>), menor (<), maior (>), menor ou igual (<=), maior ou igual (>=).

Exemplo 1:

SELECT nome,setor,salario FROM empregado WHERE setor=’administrativo’ OR setor=’financeiro’;

Com este comando pedimos pra que seja selecionado selecionado apenas empregados que trabalhem no setor administrativo ou financeiro:

SELECT nome,setor,salario FROM empregado WHERE setor=’administrativo’ OR setor=’financeiro’;

Utilizando cláusula WHERE em consulta

Exemplo 2:

SELECT nome,setor,salario FROM empregado WHERE (setor=’administrativo’ OR setor=’financeiro’) AND salario>1000;

Utilizamos os parênteses para agrupar nossas restrições primeiro definimos o setor e depois a faixa salarial. Com esta query temos o seguinte resultado:

SELECT nome,setor,salario FROM empregado WHERE (setor=’administrativo’ OR setor=’financeiro’) AND salario>1000;

Utilizando mais de um critério na consulta

LIKE

O like é utilizado quando queremos especificar critérios de seleção na forma textual. Este operador possui dois curingas o %(porcentagem) que representa correspondência com qualquer numero de caracteres e o _(sublinhado) que representa correspondência com um único caractere. O like deve vir sempre acompanhado da cláusula WHERE e precedido da coluna em que vai atuar.

Exemplo:

SELECT nome,setor,salario FROM empregado WHERE (setor=’administrativo’ OR setor=’financeiro’) AND salario>1000 AND nome LIKE ‘M%’;

Além de definirmos o setor e a base salarial, especificamos apenas os empregados que tiverem o nome que inicie pela letra M:

SELECT nome,setor,salario FROM empregado WHERE (setor=’administrativo’ OR setor=’financeiro’) AND salario>1000 AND nome like ‘M%’;

Utilizando critérios textuais na busca

ORDER BY

Especifica a coluna que servirá de base para a ordenação do resultado da nossa consulta, esta ordenação pode ser invertida (ordem decrescente) quando se utiliza a palavra-chave DESC

Exemplo:

SELECT nome,setor,salario FROM empregado WHERE (setor=’administrativo’ OR setor=’financeiro’) AND salario>1000 AND nome LIKE ‘M%’ ORDER BY salario;

Acrescentando o ORDER BY, nosso resultado passa a ser ordenado de acordo com a coluna salário de forma crescente, ou seja do menor salário para o maior:

SELECT nome,setor,salario FROM empregado WHERE (setor=’administrativo’ OR setor=’financeiro’) AND salario>1000 AND nome like ‘M%’ ORDER BY salario;

Ordenando resultados em ordem crescente

LIMIT

A cláusula limite serve para você indicar o número de resultados que você deseja que sejam retornados em sua consulta.

Exemplo:

SELECT nome,setor,salario FROM empregado WHERE (setor=’administrativo’ OR setor=’financeiro’) AND salario>1000 AND nome LIKE ‘M%’ ORDER BY salario DESC LIMIT 1;

Executando o comando acima seria retornado a pessoa que tem o maior salário, ganhando acima de 1000 reais, que o nome começando pela letra M, e trabalha no setor administrativo ou no setor financeiro:

SELECT nome,setor,salario FROM empregado WHERE (setor=’administrativo’ OR setor=’financeiro’) AND salario>1000 AND nome like ‘M%’ ORDER BY salario DESC LIMIT 0,1;

Definindo número de resultados

Com o LIMIT você também pode especificar determinado intervalo para a recuperação dos resultados. Limit n,m – é para que seja retornado a partir do registro n, m linhas.Por exemplo, LIMIT 1,2 – faz com que seja retornado a partir do segundo registro (a contagem se inicia no registro 0) duas linhas:

Exemplo 2:

SELECT nome,setor,salario FROM empregado WHERE (setor=’administrativo’ OR setor=’financeiro’) AND salario>1000 AND nome LIKE ‘M%’ ORDER BY salario DESC LIMIT 1,2;

SELECT nome,setor,salario FROM empregado WHERE (setor=’administrativo’ OR setor=’financeiro’) AND salario>1000 AND nome like ‘M%’ ORDER BY salario DESC LIMIT 1,2;

Utilizando LIMIT para retornar intervalos

Formulário III – Formatação

Depois de conhecermos as tags e utilizá-las para construir nosso formulário, agora é hora de formatá-lo para que ele se torne mais aprazível aos nossos olhos. Lembrando que este post tem o objeto de abordar a disposição dos elementos e a interferência que a herança de propriedades pode ter para eles. Depois que entender a base sinta-se a vontade para modificar fundos, bordas, cores… e adequar os princípios descritos ao seu layout. A implementação visa deixar os campos de formulário e seus rótulos lado a lado, pelo caminho teremos como resultado a formatação de um campo abaixo do outro e caso desejássemos aplicá-la bastaríamos que parássemos em tal ponto.

Antes de observar o código vamos às considerações:

Como o W3C não faz leis e sim recomendações, certos browsers ainda têm formas diferentes de interpretar algumas propriedades e predefinições. Portanto, tudo aquilo que não definido (e em alguns casos até o que é definido…) poderá ser rederizado de forma diferente. Para minimizar este efeito começamos zerando algumas propriedades em nosso css, o que pode ser feito tag a tag ou atingindo todas as tags do documento utilizando o * (asterisco).

Para centralizarmos o formulário atribuímos a ele um tamanho, e deixamos suas margens laterais em automático o que faz com que o próprio browser calcule o valor disponível de margem e o divida entre a esquerda e a direita do elemento fazendo com que o mesmo fique centralizado. Tal técnica pode ser aplicada em outros elementos.

Como as tags do formulário são tags inline e utilizamos na marcação a quebra de linha já conseguimos a nossa formatação lado a lado, porém teremos os nossos campos dispostos de forma desorganizada (imagem abaixo), pois a localização do campo ficará condicionada ao tamanho do texto do label.

Início da Formatação de Formulário

Início da Formatação de Formulário

Bastaria então definirmos uma largura para o label e pronto! Correto! Se o label não fosse uma tag inline e basicamente sofresse apenas influência da formatação de texto. Para contornarmos isso poderemos obviamente alterar a propriedade display dos labels para block, simples assim… MAS (sempre tem um mas…), quando o fizermos será gerado uma quebra de linha no inicio e no fim da tag label fazendo com que nossos elementos abandonem a formação lado a lado e fiquem agora um abaixo do outro. A imagem abaixo retrata os labels depois da mudança para bloco e como dito anteriormente se quiséssemos um campo abaixo do outro poderíamos dar por encerrado o posicionamento e formatar apenas a parte visual.

Labels em bloco

Labels em bloco

Para que os campos voltem à posição que queremos será necessário flutuá-los. Depois que você deixar os elementos em bloco e flutuá-los verá que a renderização não irá sofrer alteração se você retirar a propriedade display dos labels, porque quando um elemento está flutuando a propriedade display é ignorada. Então, arranque esta tão perniciosa linha do nosso código, pois agora ela não é mais necessária. Amém! Isto é o suficiente para termos o nosso lado a lado permitindo que o label aceite largura para alinhar nossos inputs, porém opto sempre pela segurança, se você deixou a tag flutuando limpe o flutuamento à esquerda para que não tenhamos problemas no futuro.

Agora podemos definir a largura em nossa label, para ajustar a posição de nossos campos. E alinhamos o texto à direita para melhor correlação do rótulo com seu campo.

Labels flutuando

Labels flutuando

Observando a imagem acima chegaremos à conclusão de que necessitamos de espaçamento interno (padding) para ajustar nosso texto que se encontra desalinhado. Mas antes disso deve-se definir um tamanho para nossos inputs e selects para que com base nesse tamanho ajustemos o tamanho de nossos rótulos. Defini esse tamanho como 20px, e, além disso, coloquei nos inputs e nos select uma borda de 1px fazendo com que seu tamanho total chegue a 22px (20px de altura+1px da borda superior+1px da borda inferior). Dessa forma meu label deve ter o tamanho total de 22px, como pretendo atribuir um espaçamento interno de 4px deixo a altura (height) com 18px para que quando somados resulte nos 22px. Depois coloco em todo mundo uma margem superior de 4px para separar os elementos. Lembrando que a borda do select é atribuída de forma interna ao elemento e portanto faz parte da altura.

Como tenho mais inputs defino a largura geral dos campos como 200px e depois sobrescrevo as larguras do select e do textarea. No CSS o que vem depois tem maior prioridade, para comandos de mesma hierarquia a última palavra é de quem veio por último.

Dados pessoais finalizado

Dados pessoais finalizado

Finalizado a parte de dados pessoais vamos aos dois outros grupos.Como nesses conjuntos os campos terão um tratamento diferente atribui uma classe para fazer este controle, como a formatação virá depois ela sobrescreverá a formatação anterior, pois as duas se encontram na mesma hierarquia. Neste ponto não há de novo, apenas o fato de deixar o input com o posicionamento relativo para que pudesse fazer com que ele não grude no topo da label. Segue a imagem que representa a renderização de nossa formatação:

Finalização da formatação

Finalização da formatação

Abaixo o código css que deverá ser aplicado ao HTML do post anterior para que se tenha como resultado a renderização acima:

<style type="text/css">
*{
padding:0;
margin:0;
font-size:12px;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
}
body{
padding:10px 0 0 0;
}
form{
width:400px;
margin:0 auto 20px;
background:#dbdbdb;
border:1px #ccc ridge;
padding:30px;
}
fieldset{
margin:10px 0;
padding:0 0 10px 16px;
}
fieldset legend{
font-size:1.3em;
padding:0 5px;
color:#666;/* se não definir no IE será renderizado #0046d5(azul) */
}
#dpessoal label{
float:left;
clear:left;
width:90px;
display:block;
text-align:right;
padding:4px 4px 0 0;
margin:4px 0;/* há herança do elemento pai */
height:18px;
/* Pra ficar com o mesmo tamanho do input
a altura do label deveria ser 22px (20px da altura + 2px da borda do input)
mas como existe um padding superior de 4px ele passa a ser 18px */
}
#dpessoal input, #dpessoal select, #dpessoal textarea{
width:200px;
height:20px;
float:left;
clear:right;
padding:0;
border:1px solid #666;
margin:4px 0;
/* há herança do elemento pai */
/* a borda predefinida do input me 4px [2px no topo e 2px na base do campo] */
/* cuidado no uso de tamanho em fundo braco */
}

#dpessoal select{
width:auto;
height:22px;  /* a borda do select está incluída em sua altura */
}

#dpessoal textarea{
height:70px;
}
.escolha label{
width:180px;
float:left;
padding:0;
margin:3px 0;
vertical-align:baseline;
}
.escolha label input{
position:relative;
top:2px; /* adequar o posicionamento do input na label */
margin:0 4px 0 0;
height:13px;
vertical-align:baseline;
}
.botao{
padding:0 5px;
background:#666;
color:#fff;
}
</style>

Como já inserimos a formatação caso deseje retirar as quebras de linha (<br/>) a renderização continuará com o mesmo resultado (No IE8 e MF3.5). Porém, como o flutuamento nem sempre foi interpretado de maneira correta; e não estou falando do IE6 que obviamente iria nos dar dor de cabeça, no IE7 mesmo a retirada do <br/> nos trará problemas. Por isso, ainda opto por deixar a quebra de linha para obter maior segurança no código.

Formatação Testada em: MF 3.0.5 | MF 2.0 | IE 7 | IE 8 | Opera 9.62 | Safari 3.2 | Chrome 2.0

Posts da série formulário:
Formulário I – Conhecendo as Tags
Formulário II – Mão na massa…
Formulário III – Formatação

Formulário II – Mão na massa…

Depois de conhecer as tags que iremos utilizar, esta é a hora de utilizá-las na marcação de nosso formulário. Existem n formas de fazer a marcação de formulários e certamente não poderei descrever todas elas aqui. Neste post abordarei algumas práticas que utilizo, lembrando sempre que cada caso deverá ser analisado, pois nenhuma das soluções descritas a seguir atua em caráter imperativo.

Antes de irmos pra marcação é necessário abordar alguns pontos, para facilitar a compreensão do código:

No formulário teremos três grupos de dados. Cada grupo será delimitado por um fieldset que possui um título associado a ele através da tag legend.

Inputs do tipo radio são utilizados quando desejarmos que o usuário escolha apenas uma das alternativas ofertadas, tal tratamento é feito atribuindo o mesmo nome (propriedade name) a todos os inputs que pertencerem ao mesmo grupo.

Inputs do tipo checkbox devem ser utilizados quando o usuário puder escolher mais de uma das opções disponíveis; checkbox que pertençam ao mesmo grupo devem possuir o mesmo nome (propriedade name). Na nomeação dos inputs foram utilizados colchetes [] junto ao nome (propriedade name) para que possamos recuperar os dados enviados pelo checkbox como um array no php.

A tag label é utilizada pra criar um rótulo para os elementos dos formulários, e uma conseqüência de seu uso correto é o direcionamento do foco ou do cursor para o respectivo elemento quando o usuário clica em seu rótulo. Para que isso aconteça o relacionamento entre label e campo pode ser feito de duas formas: deixando o campo fora da label e fazendo uso do atributo for (tal propriedade terá como valor o id do campo com que o label se relaciona), ou colocando o campo dentro do label (associação implícita) o que faz com que ele receba automaticamente o link com o rótulo correspondente. A associação implícita é geralmente utilizada quando se tem a consciência que o rótulo possui grande expressividade dentro do formulário, quando o elemento por ser pequeno necessita que o usuário tenha demasiada destreza com o mouse para preenche-lo ou quando diante da numerosidade de elementos torna-se inviável a criação de seus identificadores(ids).

A recuperação no php de um dado presente em um determinado campo quando o formulário é submetido é feita através da referência ao seu nome,  que é o valor atribuído a propriedade name. Portanto cada campo deverá ter um name para que seja possível capturar seus dados com php.

A propriedade value representa o valor que o campo adquire quando os dados são submetidos, portanto em tags como o select ou um conjunto de inputs (partilham o mesmo name) do tipo radio o valor associado ao name será correspondente a opção que estiver marcada.

Em inputs do tipo submit e reset a propriedade value representa texto que será escrito no corpo do botão.

As tags Button e textarea não possuem a propriedade value, pois o valor que será enviado encontra-se entre suas tags de abertura e fechamento.

As tags que constroem os campos de nosso formulário são tags inline, e por isso não apresentam quebra de linha em seu inicio e fim.  Devido a isto muitas literaturas, inclusive em textos do W3C, há a utilização de tags de parágrafo (ou outras tags menos apropriadas) para definir linhas dentro do formulário ou para agrupar seus elementos. No entanto, tendo em vista que o form é uma tag de bloco e o fieldset também, acredito que os elementos que se encontrarem dentro de tais tags já estarão em blocos definidos sem que seja obrigatório a criação de blocos internos.

Dito isto vamos para prática segue o HTML:

<form id="form_base" method="get" action="">

<fieldset id="dpessoal">
 <legend>Dados Pesoais</legend>
 <label for="nome">Nome: </label>
 <input type="text" name="nome" id="nome" /><br />
 <label for="endereco">Endereço: </label>
 <input type="text" name="endereco" id="endereco" /><br />
 <label for="email">Email: </label>
 <input type="text" name="email" id="email" /><br />
 <label for="esco">Escolaridade: </label>
 <select name="esco" id="esco">
  <option value="basico">Nível Básico</option>
  <option value="medio">Nível Médio</option>
  <option value="superior">Nível Superior</option>
 </select><br />
 <label for="observacoes">Observações: </label>
 <textarea name="observacoes" id="observacoes"></textarea><br />
</fieldset>

<fieldset class="escolha">
 <legend>Natureza do Cargo</legend>
 <label>
  <input type="radio" name="cargo" value="gerencia"/> Gerência
 </label>
 <label>
  <input type="radio" name="cargo" value="financeiro"/> Financeiro
 </label>
 <label>
  <input type="radio" name="cargo" value="recepcao"/> Recepção
 </label>
 <label>
  <input type="radio" name="cargo" value="administrativo"/> Administrativo
 </label>
 <label>
  <input type="radio" name="cargo" value="juridico"/> Jurídico
 </label>
 <label>
  <input type="radio" name="cargo" value="outros"/> Outros
 </label>
</fieldset>

<fieldset class="escolha">
 <legend>Área de Interesse</legend>
 <label>
  <input type="checkbox" name="check[]" value="computacao"/> Computação
 </label>
 <label>
  <input type="checkbox" name="check[]" value="biologia" /> Biologia
 </label>
 <label>
  <input type="checkbox" name="check[]" value="comunicacao" /> Comunicação
 </label>
 <label>
  <input type="checkbox" name="check[]" value="meio-ambiente" /> Meio Ambiente
 </label>
 <label>
  <input type="checkbox" name="check[]" value="engenharia" /> Engenharia
 </label>
 <label>
  <input type="checkbox" name="check[]" value="historia" /> História
 </label>
 <label>
  <input type="checkbox" name="check[]" value="psicologia" /> Psicologia
 </label>
</fieldset>

<input type="submit" value="Enviar" />
<input type="reset" value="Limpar" />

</form>

O código acima será renderizado da seguinte forma:

HTML básio base para marcação de formulários

HTML básio base para marcação de formulários (Opera 9.62)

Agora que já temos nossa marcação nós podemos começarmos a formatá-la, mas só iremos fazer isso no próximo post.

Posts da série formulário:
Formulário I – Conhecendo as Tags
Formulário II – Mão na massa…
Formulário III – Formatação

Formulário I – Conhecendo as Tags

A forma mais comum para o requerimento de dados na internet é através da utilização de formulários. Eles podem apresentar-se de várias maneiras e assumir diversas funcionalidades. Como puderam perceber pelo título, esse post representa o início de uma seqüência  (milhares, centenas, dezenas, 3 posts na verdade…) de posts que abordará os conhecimentos necessários na hora de marcar, formatar e recuperar as informações de um formulário.

Primeiramente vamos abordar as tags que iremos precisar para marcar nosso formulário. Aqui vamos nós:

FORM – contêiner para os controles do formulário, possui os atributos action (página que irá processar as informações do formulário) e method (forma de envio dos dados get [ pela URL]  e post [ inclui os dados dentro do cabeçalho HTTP, faz o envio de forma oculta]).

INPUT – tag mais utiliza dentro do formulário, constrói um campo de entrada de dados simples e pode apresentar diversas funções de acordo com o tipo (type) escolhido. Não entrarei em detalhe sobre cada tipo de input, pois mais embaixo eles serão apresentados.O único tipo que não será mostrado na renderização é tipo oculto (hidden), pois como o nome já diz sua função é fazer com que determinado dado seja submetido sem que o usuário veja, tal campo é geralmente utilizado para armazenar metainformações.

SELECT – cria um menu de opções,  possibilitando a visualização de uma das opções e deixando  as demais ocultas, em estilo drop-down. Quando o formulário é submetido, o valor (propriedade value) do select é o valor da option selecionada (É possível permitir que mais de uma opção possa ser selecionada).

OPTION – cada uma das opções de um select.

OPTIONGROUP – agrupa um conjunto de opções.

TEXTAREA – campo para entrada de texto aceita que o texto contenha mais de uma linha, por esse motivo geralmente possui um tamanho maior que os demais campos de entrada de dados .

LABEL – usado para rotular campos que não possuam rótulos implícitos (criado através da propriedade value). Tal elemento só poderá referenciar apenas um campo, ligação esta que é feita atribuindo o mesmo valor as propriedades: for do label e id do campo.

FIELDSET – reuni um conjunto de campos com propósitos relacionados, para melhorar a estruturação do formulário.

LEGEND – cria um titulo para determinado fieldset.

BUTTON – Alternativo ao input para criar botões de envio (type=”submit”) e limpeza (type=”reset”) das informações no formulário. Também aceita o type=”button”, que pode aliar-se a eventos (onclick, por exemplo) para a chamada de funções javascript.

Depois que falei de nossas companheiras faço agora as aprentações, abaixo seguem a marcação HTML e a renderização das mesmas:

<!-- entrada de dados -->
<label for="texto">Tipo Text: </label>
<input type="text" name="texto" /><br />
<label for="senha">Tipo Password: </label>
<input type="password" name="senha" value="12345" /><br />
<label for="arquivo">Tipo File: </label>
<input type="file" name="arquivo" /><br />

<!-- oculto -->
<input type="hidden" name="id" value="5" /><br />

<!-- option -->
<label><input type="checkbox" name="check" />Tipo Checkbox </label>
<br />
<label><input type="radio" value="btnradio" />Tipo Radio </label><br />

<!-- botões -->
<input type="image" name="imagem" src="images/input_image.jpg" />
<br />
<input type="button" value="Type Buttom" />
<input type="reset" value="Type Reset" />
<input type="submit" value="Type Submit" /><br />

<!-- select -->
<label for="opcoes">Select: </label>
<select name="opcoes" id="opcoes">
<option value="1">Opção 1</option>
<option value="2">Opção 2</option>
<option value="3">Opção 3</option>
</select><br />

<!-- textarea -->
<label for="texto">Textarea: </label>
<textarea name="texto" id="texto" cols="30" rows="5"></textarea>

O código fonte acima irá renderizar da seguinte forma (no mozilla firefox 3.05):

Renderização das Tags de formulário

Renderização das Tags de formulário

Depois de conhecermos as tags vamos agora obsevar como utilizá-las na marcação.Este é o assunto de nosso próximo post: Formulário II – Mão na massa….

Posts da série formulário:
Formulário I – Conhecendo as Tags
Formulário II – Mão na massa…
Formulário III – Formatação