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.

Staingate

Staingate: a Apple trocou a tela do meu MacBook Pro

Há alguns meses notei que a tela do meu notebook MacBook Pro da Apple estava com manchas nas bordas pretas. Pensei que fosse sujeira e não dei muita bola. Passou mais um tempo e as manchas aumentaram. Tentei limpar (sempre com o paninho de microfibra fornecido com o aparelho), sem sucesso.

Staingate: Parece sujeira, mas não é!

Uma rápida pesquisa no Google me levou à sites especializados relatando o mesmo problema. Chamado de Staingate pela mídia especializada (uma referência ao caso Watergate), tratava-se de um problema crônico, bem documentado, mas que a Apple não reconhecia.

Continue reading…

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!

Assassin’s Creed

Assassin's Creed - Vista da Cidade

Estou jogando Assassin’s Creed, um novo título da Ubisoft. Ótimo jogo, bem ao estilo de Prince of Persia: The Sands of Time (e suas continuações), com escaladas, acrobacias e lutas com espadas e facas. Tem amplos cenários ao ar livre, com vários NPCs andando pelas ruas. Os gráficos são muito bacanas e o jogo não é absurdamente pesado.

Você controla Altair, um assassino que percorre cidades do oriente-médio da era medieval, mais precisamente durante a Terceira Cruzada. Altair pertence há uma seita secreta conhecida como Ordem dos Assassinos, que tem como principais rivais no jogo os Templários e os Sarracenos.

Continue reading…