1. Formulários
Comunicando-se na web

2. Quem sou eu?
Jonatas Oliveira

3. 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.

4. 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.

5. Formulários
Não automatizados

6. 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

7. Formulários Não automatizados
Carteira de estudante

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

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

10. Formulários
Na web

11. 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

12. Formulários Na web

13. Formulários Na web

14. Formulários Na web

15. Formulários Na web

16. Formulários Na web

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

18. Formulários
HTML

19. 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

20. Formulários HTML

21. Formulários HTML

22. Formulários HTML
Itens de um formulário

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

24. 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

25. Formulários HTML

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

27. 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

28. 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”

29. 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”

30. 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

31. 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

32. Formulários HTML

33. Formulários HTML

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

35. 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

36. Formulários HTML

37. Formulários HTML

38. 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”.

39. 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

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

41. 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

42. Formulários HTML

43. Formulários HTML

44. Formulários HTML

45. Formulários HTML

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

47. 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

48. Formulários HTML

49. Formulários HTML

50. Formulários HTML

51. Formulários HTML

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

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

54. Formulários HTML

55. Formulários HTML

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

57. Formulários HTML

58. Formulários HTML