Formulários
Comunicando-se na web

Quem sou eu?
Jonatas Oliveira

Quem sou eu? Jonatas Oliveira
Programador e Desenvolvedor Web desde
2005.
Desenvolvedor e evangelizador Python.
Desenvolvedor do Classificados Diginet.
Atual mantenedor do site digi.com.br.
Em 2005, junto com José Luiz Coe, vulgo
Zeck, adaptamos o site da Diginet para os
padrões web.

Quem sou eu? Jonatas Oliveira
Ainda em 2005, foi criada a primeira versão
do Classificados Diginet em TurboGears
(Python), já seguindo os padrões web.
Em 2006, responsável pela personalização do
visual do Webmail Diginet, seguindo também
os padrões web.
Em 2007, junto com Karlisson, ministramos o
curso de Padrões Web para os
desenvolvedores da SEMPLA/RN.

Formulários
Não automatizados

Formulários Não automatizados
RG
CPF
Inscrever-se na faculdade
Carteira de estudante
Provas
Requisitar empréstimo
Comprar com cartão de crédito

Formulários Não automatizados
Carteira de estudante

Formulários Não automatizados
Autorização para estocar inflamáveis

Formulários Não automatizados
Envio de dados para
solicitar uma ação

Formulários
Na web

Formulários Na web
Criar e acessar uma conta de email
Enviar e apagar emails
Pesquisar no Google
Criar conta em um fórum
Enviar um scrap no Orkut
Fazer um compra em uma loja virtual
Enviar uma sugestão para um site

Formulários Na web

Formulários Na web

Formulários Na web

Formulários Na web

Formulários Na web

Formulários Na web
Envio de dados para
solicitar uma ação

Formulários
HTML

Formulários HTML
Seção no código onde estão os “controls” e
“labels” (controles e etiquetas)
Checkboxes, radio buttons, menus, labels, etc.
Completa-se um formulário modificando os
controles e enviando–o para uma aplicação

Formulários HTML

Formulários HTML

Formulários HTML
Itens de um formulário

Formulários HTML
form
Container para os controles.
Pode conter qualquer tipo de marcação.

Formulários HTML
form
action (http://example.com/acao.php)
Quem receberá os dados enviados
method (get|post)
Forma usada para envio dos dados
enctype (multipart/form-data)
Tipo de conteúdo usado para enviar os dados, somente
quando o valor de method é post

Formulários HTML

Formulários HTML
input
Cria controles definidos por seus tipos.

Formulários HTML
input
type (text|password|checkbox|radio|submit|
reset|file|hidden|image|button)
Tipo de controle a ser criado
name (primeironome)
Nome com que o campo será identificado pela aplicação
value (João Maria)
Valor inicial do campo ou etiqueta para o botão

Formulários HTML
input
size (10|50)
Largura inicial do campo, quantidade de caracteres
maxlenght (8|32)
Quantidade máxima de caracteres no campo
Somente para inputs do tipo “text” ou “password”
checked (checked)
Diz que o input inicialmente, será marcado
Somente para inputs do tipo “checkbox” ou “radio”

Formulários HTML
input
src (http://example.com/search.png)
Local da imagem que será usada para decorar o botão
Somente para inputs do tipo “image”

Formulários HTML
input text
atributo “type”
password
checkbox
radio
submit
image
reset
hidden = escondido button
Não aparece na página, mas é enviado
para a aplicação junto com os outros file

Formulários HTML
input atributo “type”
text Campo de texto, apenas uma linha
password Campo para senha, mostra asterísco no lugar do texto
checkbox Agrupados por “name”, pode haver mais de um marcado
radio Agrupados por “name”, apenas um deles podem ser marcados
submit Botão para enviar os dados entrados para a aplicação
image Botão para enviar os dados, decorado com uma imagem
reset Reinicia os dados do formulário
button Botão para usar ações externas
file Selecionador de arquivos
hidden Controle escondido, o seu valor não pode ser mudado

Formulários HTML

Formulários HTML

Formulários HTML
button
Elementos parecidos com o “input”, mas
oferecem maior possibilidade de conteúdo.

Formulários HTML
button
type (submit|button|reset)
Tipo de controle a ser criado
name (submit)
Nome com que o campo será identificado pela aplicação
value (Enviar)
Valor inicial do campo ou etiqueta para o botão

Formulários HTML

Formulários HTML

Formulários HTML
select
Cria um menu, cada opção do menu é
definida por um elemento “option”.
As opções podem ser agrupadas por um
“optgroup”.

Formulários HTML
select
name (sexo)
Como será identificado pela aplicação
size (1|5)
Quando presente define a quantidade de linhas mostradas de
uma só vez pela lista
multiple (multiple)
Quando presente permite múltipla seleção

Formulários HTML
optgroup
label (Python)
Define a etiqueta para o grupo

Formulários HTML
option
selected (selected)
Quando definido diz que a opção está pré–selecionado
value (turbogears)
Valor inicial do elemento, se não estiver especificado será
usado o seu conteúdo
label (TurboGears)
Quando definido é usado no lugar do conteúdo para etiqueta

Formulários HTML

Formulários HTML

Formulários HTML

Formulários HTML

Formulários HTML
textarea
Controle de entrada de texto multi–linha.
O conteúdo é o valor inicial.

Formulários HTML
textarea
name (mensagem)
Como será identificado pela aplicação
rows (10|25)
Quantidade de linhas do campo
cols (10|25)
Quantidade de colunas do campo

Formulários HTML

Formulários HTML

Formulários HTML

Formulários HTML

Formulários HTML
label
Especifica uma etiqueta para um elemento.
A área de foco do elemento se estende para
a etiqueta.

Formulários HTML
label
for (mensagem)
“id” do elemento que receberá a etiqueta

Formulários HTML

Formulários HTML

Formulários HTML
fieldset e legend
Agrupa controles por tema.
Para definir um título é usado “legend”.

Formulários HTML

Formulários HTML