Escolher, não digitar

O problema do texto livre

O curso anterior deu caixas de texto aos seus forms, e caixas de texto têm uma fraqueza que você vai combater pela carreira inteira: as pessoas digitam qualquer coisa nelas. Peça um país e você vai receber "Brazil", "brasil", "BR", "Brasil 🇧🇷" e "brazl". Pergunte "você aceita os termos?" e uma caixa de texto convida a uma redação. Seu controller Rails herda a bagunça, tentando normalizar cinco grafias em um único valor de banco.

Controles de seleção invertem o acordo. Em vez de pedir que o visitante produza um valor, a página oferece valores e o visitante escolhe. O dado que chega ao seu servidor só pode ser uma das opções que você definiu. Sem typos, sem grafia criativa, sem código de normalização.

As três formas de escolha

Toda interface de seleção da web, de um banner de consentimento de cookies a um mapa de assentos de avião, é construída com três controles, e cada um responde a uma pergunta diferente:

A divisão é de cardinalidade: quantas opções existem e quantas o visitante pode escolher. Zero-ou-mais de uma lista visível é um grupo de checkboxes. Uma de uma lista curta visível são radio buttons. Uma de uma lista longa que engoliria a página é um dropdown <select>.

flowchart TB
  A{"Quantas opções a pessoa pode escolher?"} -->|"zero ou mais"| B["Checkboxes"]
  A -->|"exatamente uma"| C{"Quantas opções existem?"}
  C -->|"poucas, de 2 a 5, que vale ver lado a lado"| D["Radio buttons"]
  C -->|"muitas, países ou categorias"| E["Select menu"]

Designers de interface carregam essa árvore na cabeça. Bons desenvolvedores Rails também, porque o controle errado produz o formato de dado errado: uma pergunta de "escolha uma" renderizada como checkboxes deixa o usuário escolher três, e agora seu controller precisa rejeitar entradas que usuários honestos digitaram de boa fé.

A mesma máquina por baixo

A parte tranquilizadora: tudo do curso de Inputs continua valendo. Cada um desses controles vive dentro de um <form>, carrega um name e envia um par name=value quando o form é submetido. A linha de requisição, a query string, o hash params no Rails, nada disso muda. O que muda é de onde o valor vem: não de teclas digitadas, mas de um atributo que você escreveu no HTML.

<form action="/preferences" method="post">
  <input type="checkbox" name="newsletter" value="yes">
  <button type="submit">Salvar</button>
</form>

Esse checkbox nunca vai enviar "smi" nem "SIM!" nem um parágrafo sobre newsletters. Ele envia newsletter=yes ou nada. Você, autor, escreveu o único valor que ele pode mandar. Essa autoria é o tema do curso inteiro.

Restrição é um presente para o seu eu futuro

Em algumas fases você vai escrever models Rails com enum :status e colunas de banco que só aceitam certos valores. Controles de seleção são a metade front-end dessa mesma disciplina: o form oferece os valores legais, o model os garante, e o banco os armazena. Quando as três camadas concordam sobre a lista, os bugs não têm onde morar. Quando o form é texto livre e o model espera um enum, o usuário vê erros de validação que um dropdown teria tornado impossíveis.

Um aviso antes de começar, importante o bastante para repetir depois: a restrição no navegador é uma conveniência, não uma defesa. Qualquer pessoa pode abrir o DevTools, editar seu HTML e enviar um valor que você nunca ofereceu. As validações do Rails continuam sendo o portão real. Controles de seleção deixam a entrada honesta limpa; não tornam a entrada desonesta impossível.

O que este curso cobre

1. Escolher, Não Digitar: por que entrada restrita vence texto livre (você está aqui)
2. Checkbox: O Interruptor: uma caixa, um booleano e uma pegadinha famosa
3. Grupos de Checkboxes: várias caixas, uma pergunta, arrays em params
4. Radio Buttons: escolha uma entre poucas, garantido pelo navegador
5. select e option: dropdowns e a diferença entre rótulo e valor
6. Agrupado, Múltiplo e Sugerido: optgroup, multiple e datalist
7. Juntando Tudo: um form de preferências usando cada controle

Ao final você vai construir o form no formato "página de configurações", aquele em que nada é digitado e tudo é escolhido, sabendo o que cada clique envia ao servidor.