Dicas para formulários web

Seguem algumas dicas para se estruturar um formulário HTML funcional, especialmente na integração com back-ends em PHP.

A tag “form”

A tag form deve ter alguns atributos, como via de regra. São eles:

action
Indica para onde o formulário será submetido. A URL que vai receber os dados.
method
O método usado para enviar os dados. Os mais comuns são POST e GET. 
enctype
Se o formulário for enviar um arquivo, este atributo deve ser definido como multipart/form-data, casi contrário, o arquivo não será enviado com os dados.

Não é necessário e nem faz sentido a tag form ter um atributo name.

Os campos do formulário

Para que os campos do formulário sejam enviados para o backend, eles devem ter o atributo name. A ausência desse atributo faz com que o campo não esteja presente na requisição. Outro atributo importante é o value. Mais sobre isso a seguir.

Tipos de campos de entrada

Os campos de entrada mais comuns em formulários web são os input‘s. Eles podem ser de diversos tipos, como:

text
O mais comum, define que a entrada de texto será livre. Qualquer texto será aceito.
Em dispositivos móveis, o teclado padrão será exibido.
password
Campo para senhas. O texto digitado será ofuscado por outros caracteres para prevenir que outras pessoas vejam o que está sendo digitado.
submit
Funciona como um botão para enviar os dados para o servidor. Prefira usar uma tag como <button type="submit">Enviar<\button>.
reset
Serve para limpar o formulário, e apagar os dados preenchidos. Prefira usar uma tag como <button type="reset">Limpar<\button>.
radio
Normalmente usado em grupos para definir uma opção de um conjunto de possíveis. Apenas uma será marcada. Para funcionar, todas as opções do mesmo grupo devem ter o mesmo atributo name, porém com valores diferentes no atributo value.
checkbox
Identifica uma opção, ou várias num grupo. Similar aos inputs do tipo radio, porém permitem múltiplas seleções. Novamente, quando aplicável, deve ser agrupado pelo atributo name, mas aqui deve-se observar um detalhe: por ser possível enviar múltiplos valores, para que o back-end trate corretamente todos os valores, o name do campo deve terminar com []. Por exemplo: opcoes[]. Veja um exemplo mais completo:
<label>
	<input type="checkbox" name="opcoes[]" value="1">
	Um
</label>
<label>
	<input type="checkbox" name="opcoes[]" value="2">
	Dois
</label>
button
Exibe um botão. Por isso, é mais indicado usar a tag <button type="button">Botão</button>.
hidden
É um campo escondido cujo valor não pode ser editado pelo usuário. Usado para passar parâmetros que não necessitam da intervenção do usuário, como identificação do formulário ou tokens de autenticação.
file
Usado para enviar um arquivo.

Novos inputs com HTML5

A especificação do HTML5 trouxe novos tipos para os campos input:

  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week

Alguns destes ainda não estão bem padronizados pelos navegadores, mas outros (destacados) são bastante interessantes e devem ser utilizados sempre que possível. Fazem sentido semântico, bem como exibem controles auxiliares e validações (quando aplicável) que auxiliam o usuário a os preencherem.

Em dispositivos móveis, por exemplo, o input do tipo tel exibe um teclado numérico para facilitar a entrada de dados do usuário:

Teclados semânticos para input do tipo tel

Já num input tipo email, o teclado se ajusta, facilitando a digitação de um e-mail:

Teclados semânticos para input do tipo email

Outro exemplo notável é o tipo search. Ele pode trazer o histórico de buscas recentes no seu computador local e/ou nas páginas do seu site como autocomplete. E ainda permite limpar a busca. Veja mais informações no CSS-Tricks.

Sobre “labels”

Tags label são usadas para identificar os campos. Além disso, elas podem e devem ser usadas associadas diretamente aos controles. Isso permite clicar sobre uma label e por associação ativar ou focar o campo associado. Exemplos:


Nos exemplos acima, ao se clicar sobre a label do checkbox, ele é marcado/desmarcado automaticamente. Nenhum JavaScript necessário. Já no caso de input‘s digitáveis, o campo é focado e permite digitação.

Há duas formas de utilizar as tags label associadas aos campos.

A primeira é usando o atributo for na tag label. O atributo for é associado ao atributo id de um campo. Não confunda com o atributo name. Neste caso, é o id quem manda. Exemplo:

<label for="label_example2">Clique em mim também</label>
<input id="label_example2" type="number">

A segunda maneira é abraçar o controle que se deseja associar com a label. Este método é mais comumente usado com inputs tipo checkbox ou radio. Exemplo:

<label>
    <input type="checkbox">
    Qualquer texto dentro do label fica associado ao controle dentro da mesma label
</label>

Outros tipos de controle

Além dos input‘s, também temos outros controles, como select‘s, textarea‘s e button‘s.

Select

Controles select, também chamados de combos ou drop-down, trazem uma lista de opções, cada uma com seu valor (atributo value), para que o usuário selecione uma (ou várias).

O que vai determinar se o usuário poderá selecionar apenas uma opção, ou várias, é o atributo multiple. Ele altera completamente o visual do controle, mas seu markup é o mesmo, exceto pelo atributo multiple:



Nos exemplos acima, são usadas tags (opcionais) optgroup dentro do select para agrupar as opções (cachorros e gatos, no exemplo). optgroup‘s recebem o atributo label para definir o nome do grupo exibido:

<optgroup label="Gatos">
    <option value="Balinês">Balinês</option>
    <option value="Siamês">Siamês</option>
</optgroup>

Cada opção dentro do select (e opcionalmente dentro do optgroup) tem um atributo value. Quando a opção é selecionada, o controle (select) passa a ter aquele valor por consequência.

Textarea

O elemento textarea indica um campo de texto digitável que suporta múltiplas linhas de texto. De forma sucinta, este controle permite que se digite texto e que se possa quebrar a linha do texto usando Enter/return no teclado.

Botões

Como já mencionado, botões são semanticamente preferíveis à certos tipos de input‘s, como os de tipo button, submit e reset.

Um tipo de botão em específico que merece destaque é o submit. Este botão faz com que o form que o contém seja enviado para seu destino.

É muito importante definir o atributo type de um botão. Navegadores diferentes podem ter valores-padrão diferentes para botões sem este atributo, e os resultados ao se acionar o controle podem diferir de um navegador para outro.


Espero que este breve resumo possa auxiliar alguém.

Se você tiver alguma dica ou comentário, por favor, deixe-o abaixo.

Desenvolvimento Web: Correspondência de Nomes por Semelhança

Um desafio proposto por um cliente foi o seguinte: automatizar o processo de informação dos códigos de rastreamento dos pedidos enviados pelos Correios no sistema após o envio.

O processo até então era feito de forma manual:

  1. Os Correios fornecem diariamente uma tabela (HTML) com os nomes dos destinatários e os códigos de rastreamento do dia anterior (além de outras informações);
  2. A tabela tinha que ser lida e interpretada manualmente por um funcionário;
  3. O funcionário localizava os nomes dos clientes no sistema;
  4. Os códigos de rastreamento então eram copiados da tabela dos Correios e colados no campo apropriado.

Com este novo módulo, agora basta enviar a mesma tabela no formato HTML para o sistema e todo o processo é automatizado.

Continue reading…

Desenvolvimento Web: Manipulação de tabela com jQuery

O vídeo acima mostra um pouquinho do último trabalho do asterisko: um sistema para emissão de orçamentos e medição para Engenharia Civil, em desenvolvimento.

No vídeo podemos ver a edição da composição de um serviço, e a maneira como é feita a inserção e remoção de materiais através da manipulação de uma tabela HTML com jQuery. Um objetivo importante é fazer uma interface simples e intuitiva, porém bem funcional para o usuário do sistema.

All In One SEO Pack

Desde os primórdios do asterisko usava o plugin All In One SEO Pack do WordPress para melhorar os resultados de buscas e a integração do blog com as diversas ferramentas de busca, como Google e Yahoo!.

No começo o plugin era muito leve e fazia seu trabalho muito bem. Eu nem me preocupava com ele, exceto pela configuração, um pouco trabalhosa. Mas com o passar do tempo, o plugin foi inchando… É um mal que acomete muitos e muitos softwares. A história dos comunicadores instantâneos, por exemplo, é repleta de exemplos, como o saudoso ICQ e o próprio Messenger da Microsoft. Ambos começaram simples e foram virando verdadeiros monstros. Os desenvolvedores querem rechear os programas de recursos e enfeites, e acabam criando verdadeiros pesadelos. Esquecem do lema “KISS” (keep it simple, stupid).

Foi exatamente o que aconteceu com o All In One SEO Pack. O plugin virou um monstro. Tem atualizações quase toda semana – não que isso seja ruim. O problema é que a cada atualização, você tem que acessar a página de configuração do plugin para reativá-lo. Oras! Mas ele já está ativado no painel de plugins do WordPress, porque tenho que ativá-lo em dois lugares? Isso sem falar que, nessa página de configurações, agora existem vários anúncios e pedidos de doações. Eu uso o AdBlock Plus no Firefox para não ver anúncios, certamente não vou querer vê-los na área administrativa do meu blog pessoal.

Enfim, a extensão tornou-se um grande incomodo. Hoje eu decidi que o All In One já tinha deixado de ser útil e era hora de encontrar um substituto. Fiz algumas pesquisas no Google, mas não encontrei nenhuma dica boa de alternativa para o plugin. Foi na base de dados de plugins do WordPress que encontrei um substituto tão poderoso quanto, e ainda mais funcional e simples: O WordPress SEO, desenvolvido pela Yoast.

WordPress SEO da YoastO plugin está em inglês e é um tanto quanto complicado de configurar (usei as dicas do wpbeginner), mas funciona que é uma beleza. Recomendo!

Outro momento surreal do dia…

Acoplamento de BorrachaHá cerca de dois meses atrás publiquei aqui no asterisko um “momento surreal do dia“. Um doido me mandou uma mensagem perguntando sobre um limpa-vidros que ele gostava e não encontrava mais. Pode ser que tenha sido algum doido mesmo, que estava perdido na internet, ou talvez algum outro doido, tornando meu dia mais surreal. Bom, hoje recebi e-mail de outra doida:

gostaria de estar em contato com o setor de compras, pois somos fabricantes
de pçs de borracha, e já fornecemos para algums empresas do seu segmento.
gostaria de até mesmo fazer-lhe uma visita. ass. diane.a Empresa é
(editado por motivos de privacidade). fabricamos toda pç. em borracha
conforme amostra ou desenho.
(site editado por motivos de privacidade). tel 21-2674xxxx

O IP do e-mail dessa doida é de Montevidéu. O endereço dela é do Hotmail e o site que ela forneceu existe. É mesmo uma empresa que fabrica e vende peças de borracha. A Diane devia estar perdida mesmo. Devo admitir, no entanto, que o “acoplamento” que tem no site da empresa parece um pouco com o logo do asterisko!

Fogo no CPD do The Planet

Houve fogo e explosão no CPD onde o asterisko está hospedado. O site esteve fora do ar desde sábado por causa de um curto circuito em equipamentos elétricos nos servidores do The Planet, em Houston, Texas, EUA.

Aparentemente um transformador explodiu (derrubando três paredes) no fim da tarde do dia 31/05, sábado, e com a falta de energia elétrica 9.000 servidores ficaram fora do ar, afetando cerca de 7.500 clientes, entre eles, o asterisko. Nenhum servidor foi danificado no processo e por sorte ninguém se feriu. Não foi possível acionar geradores de emergência devido à restrições do corpo de bombeiros.

O problema parece ter sido solucionado hoje, então esperamos que o site permaneça no ar daqui pra frente. Mais detalhes podem ser vistos no fórum oficial do The Planet, aqui.

Bloqueio do WordPress no Brasil

Bloqueio do WordPressComo a justiça brasileira não tem muito serviço (são poucos os bandidos e políticos corruptos no país, não é mesmo), estão caçando serviço. E dessa vez, acharam “pelo em casca de ovo” na internet: a 31ª Vara Civel do Tribunal de Justiça de São Paulo determinou o bloqueio à um blog hospedado no portal WordPress.com, que supostamente está vinculando mensagens criminosas. O nome ou endereço do blog não foi revelado, já que o processo ocorre em sigilo.

Para quem não conhece, o WordPress é, provavelmente, a plataforma de criação de blogs mais completa e popular da internet, além de ser gratuita. Através do WordPress.org é possível obter a plataforma e rodar o blog diretamente em seu domínio (www.asterisko.com.br, por exemplo) ou você pode hospedar seu blog, de graça, no WordPress.com.

Acontece que é tecnicamente inviável bloquear apenas um endereço dentro de um domínio, ou seja, é necessário bloquear o domínio como um todo. Dessa forma, todo o WordPress.com teria que ser banido no país. A Abranet (Associação Brasileira de Provedores de Internet) diz que, “não pode deixar de cumprir uma decisão da Justiça, porém enviará carta ao Tribunal paulista explicando as dificuldades técnicas que a medida exige”.

Continue reading…