HTML forms: inputs
O curso trata do elemento form e dos inputs em que o usuário digita. Ele mostra como action e method definem para onde vão os dados e qual verbo HTTP os carrega. O atributo name transforma cada controle numa chave de params. As aulas passam por inputs de texto, e-mail, senha e número, pelo textarea e por atributos como value, placeholder, maxlength, readonly, disabled e hidden. A validação do navegador aparece como conveniência, e a validação no servidor, no Rails, impõe as regras. Um form de cadastro reúne tudo no fim.
O que você vai aprender
- ✓Como action e method do form montam a requisição, e por que todo controle precisa de name
- ✓Inputs de texto e textarea: value, placeholder, maxlength e a tecla Enter
- ✓Inputs de e-mail, required e por que a validação no servidor Rails decide
- ✓O que o mascaramento de senha protege, ao lado de HTTPS, hash e tokens de autocomplete
- ✓Quando usar type=number e quando identificadores em dígitos pedem texto com inputmode
- ✓readonly versus disabled, autofocus e o token de autenticidade escondido
form: a página começa a escutar
Listas, links, imagens, tabelas: tudo que esta série construiu apresenta conteúdo para o visitante. Mas pense na web que você usa: você busca, faz login, fecha compra, publica. Cada um desses momentos é um form: o mecanismo pelo qual uma página coleta valores de uma pessoa e os envia a um servidor.…
Ler a aula completa grátis →Currículo
7 aulasform: a página começa a escutar
O elemento form, os atributos action e method, o atributo name e o padrão POST, redirect, GET.
type="text": o burro de carga, dissecado
A anatomia do input de texto: value, placeholder, maxlength versus size, textarea e o envio pelo Enter.
type="email" e required: o navegador começa a conferir
Inputs de e-mail e required acionam checagens nativas do navegador; a validação no servidor protege os dados.
type="password": o que as bolinhas protegem e não protegem
Campos de senha só mascaram a tela; HTTPS, hash no servidor, POST e tokens de autocomplete cuidam do resto.
type="number": números de verdade e números impostores
Inputs number com min, max e step, e por que CEPs e telefones pedem texto com inputmode.
A caixa de ferramentas: estado, limites e fiação escondida
Atributos comuns: readonly versus disabled, minlength, pattern, tokens de autocomplete, autofocus e o token de autenticidade escondido.
Juntando tudo: um form de cadastro, construído com honestidade
Um form de cadastro que junta todas as aulas, inspecionado nas DevTools e validado também no servidor.