forms

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…

Mulher atirando com pistola

Desarmamento: você conhece os fatos?

Foi divulgado na semana passada o Mapa da Violência: Mortes Matadas por Arma de Fogo. É a versão mais atual de um compilado anual de dados sobre mortes causadas por armas de fogo no país, escrito pelo sociólogo Julio Jacobo Waiselfisz com cooperação da UNESCO e do governo brasileiro.

O estudo traz números de 2012, e como era esperado, houve um aumento de 9,5% no número de mortes atribuídas às armas de fogo em relação ao ano anterior. Veja o gráfico que resume os 32 anos do estudo. Continue reading…

queimando-dinheiro

O tamanho do roubo na Petrobras

Gostaria muito de poder assumir a autoria do texto que segue, mas ele não é meu. Recebi pelo WhatsApp, porém sem informações do autor. As informações me parecem corretas e as fontes batem. Como o texto parece estar com pouca circulação, achei por bem divulgar aqui. Fiz pequenas edições de estilo, apenas e uma leve correção ortográfica. Boa leitura!


Acredito que todos têm acompanhado o noticiário com as recentes descobertas do Esquema PT na Petrobras. O que não consegui achar foi qual o tamanho desse roubo e, por isso, me dei ao trabalho de fazer alguns cálculos e apresentar à quem possa interessar.

O site da VEJA levantou os contratos fechados pela estatal com 14 fornecedores que, a julgar pelos documentos apreendidos, estão sob suspeita ou comprovadamente destinaram recursos à empresas controladas por Alberto Youssef desde 2003, ano em que o PT assumiu a Presidência da República. Pelo menos R$ 31,1 bilhões foram faturados em contratos com a Petrobras.

Segundo as declarações feitas à Polícia Federal pelo ex-diretor de abastecimento da Petrobras, Paulo Roberto Costa, e pelo doleiro Alberto Youssef, no Esquema PT, os contratos eram superfaturados em 20%, na média.

Só com esses dois dados, já podemos fazer uma regra de três e chegar em um valor aproximado: se R$ 31.100.000.000,00 foram faturados e representavam os 120%, o valor superfaturado em 20% seria R$ 5.183.333.333,33, ou seja, num primeiro cálculo, concluí que o roubo foi de R$ 5,2 bilhões.

Como não temos comprovação que todos esses contratos foram fraudados desde 2003, resolvi fazer a conta de outra maneira. Nas declarações de Paulo Roberto Costa, ele também relata como esse dinheiro era dividido: do valor final dos contratos, em média 3% eram destinados ao pagamento de propinas. Na diretoria dele que era controlada pelo PP e PMDB (partidos aliados ao PT), 2% eram destinados ao PT e o 1% restante era dividido em 0,60% para o PP e PMDB, 0,20% eram para despesas com Notas Fiscais frias e despesas com envio do dinheiro roubado e os outros 0,20% eram divididos em 0,14% para ele e 0,06% para o Deputado do PP José Janene ou o doleiro Alberto Youssef, talvez dependendo de qual dos dois teria fechado o contrato fraudado com a empresa.

Segundo a revista ÉPOCA, o ex-diretor prometeu devolver diversos bens, entre eles estão US$ 23 milhões (R$ 55 milhões) em contas bancárias na Suíça, US$ 2,8 milhões (R$ 6,7 milhões) nas Ilhas Cayman, uma lancha no valor de R$ 1,1 milhão, um terreno no município de Mangaratiba, no Rio de Janeiro, avaliado em R$ 3,2 milhões, e valores em dinheiro: R$ 762 mil, US$ 181 mil e € 10,9 mil apreendidos em sua residência durante a Operação Lava Jato em março deste ano e um veículo Range Rover Evoque de R$ 300 mil que recebeu de Youssef. Somando tudo isso, Paulo Roberto Costa devolverá cerca de R$ 67,5 milhões que recebeu do Esquema PT.

Com esses dados, fazemos o seguinte cálculo: se R$ 67,5 milhões representam 0,14%, o valor dos 3% destinados ao pagamento de propinas foi R$ 1.446.428.571,43, ou seja R$ 1,45 bilhões pagos em propina só da diretoria de abastecimento da Petrobras.

Como o Esquema PT envolvia 5 diretorias da Petrobras, podemos dizer que esse número é apenas uma parcela do total de propina que foi pago aos partidos PT, PP e PMDB. Não sei dizer qual o volume de contratos fraudados por cada diretoria, por isso, não vou aumentar esse valor.

Esse valor representa apenas 3% do valor dos contratos superfaturados pela diretoria de abastecimento, dessa forma, o total dos contratos que foram superfaturados chegam aos impressionantes R$ 48,2 bilhões e os 20% superfaturado, ou seja, o valor que foi cobrado a mais e dividido entre todos os envolvidos no Esquema PT na Petrobras e saiu do bolso do povo brasileiro foi, no mínimo, R$ 8 bilhões de reais!!!

Com esse valor dava pra construir vários hospitais, escolas, creches, universidades, delegacias, ou seja o problema do Brasil é a corrupção e o PT é o partido que está no poder há 12 anos e que controla quase todos os esquemas que, infelizmente, todos sabem que existem, menos o ex-presidente Lula e a presidenta Dilma!

Fontes:

São Francisco e Las Vegas: Um pequeno diário

São Francisco e Las Vegas: Um pequeno diário

Abaixo segue um diário super-sucinto da viagem que fiz em maio de 2013 para São Francisco e Las Vegas, com meu grande amigo TC Nardini. Não sei porque não publiquei isso antes…

03/05, sexta-feira

Voo a bordo do 777-300(São Paulo) Difícil pegar um táxi perto de casa. Depois de uns 15 min. consegui chegar em Congonhas. Paguei R$ 11. Depois mais R$ 35 pelo Airport Bus Service até Cumbica. Cheguei perto das 18:00. Esperei o TC e fizemos checkin.

Vôo AA950 até JFK num Boeing 777-300 novinho! Vôo foi bom. Wi-Fi grátis durante todo o vôo. Continue reading…