Formulários

5.954 visualizações

Publicada em

Publicada em: Tecnologia
2 comentários
2 gostaram
Estatísticas
Notas
Sem downloads
Visualizações
Visualizações totais
5.954
No SlideShare
0
A partir de incorporações
0
Número de incorporações
40
Ações
Compartilhamentos
0
Downloads
133
Comentários
2
Gostaram
2
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Formulários

  1. 1. Formulários Comunicando-se na web
  2. 2. Quem sou eu? Jonatas Oliveira
  3. 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. 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. 5. Formulários Não automatizados
  6. 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. 7. Formulários Não automatizados Carteira de estudante
  8. 8. Formulários Não automatizados Autorização para estocar inflamáveis
  9. 9. Formulários Não automatizados Envio de dados para solicitar uma ação
  10. 10. Formulários Na web
  11. 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. 12. Formulários Na web
  13. 13. Formulários Na web
  14. 14. Formulários Na web
  15. 15. Formulários Na web
  16. 16. Formulários Na web
  17. 17. Formulários Na web Envio de dados para solicitar uma ação
  18. 18. Formulários HTML
  19. 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. 20. Formulários HTML
  21. 21. Formulários HTML
  22. 22. Formulários HTML Itens de um formulário
  23. 23. Formulários HTML form Container para os controles. Pode conter qualquer tipo de marcação.
  24. 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. 25. Formulários HTML
  26. 26. Formulários HTML input Cria controles definidos por seus tipos.
  27. 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. 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. 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. 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. 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. 32. Formulários HTML
  33. 33. Formulários HTML
  34. 34. Formulários HTML button Elementos parecidos com o “input”, mas oferecem maior possibilidade de conteúdo.
  35. 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. 36. Formulários HTML
  37. 37. Formulários HTML
  38. 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. 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. 40. Formulários HTML optgroup label (Python) Define a etiqueta para o grupo
  41. 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. 42. Formulários HTML
  43. 43. Formulários HTML
  44. 44. Formulários HTML
  45. 45. Formulários HTML
  46. 46. Formulários HTML textarea Controle de entrada de texto multi–linha. O conteúdo é o valor inicial.
  47. 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. 48. Formulários HTML
  49. 49. Formulários HTML
  50. 50. Formulários HTML
  51. 51. Formulários HTML
  52. 52. Formulários HTML label Especifica uma etiqueta para um elemento. A área de foco do elemento se estende para a etiqueta.
  53. 53. Formulários HTML label for (mensagem) “id” do elemento que receberá a etiqueta
  54. 54. Formulários HTML
  55. 55. Formulários HTML
  56. 56. Formulários HTML fieldset e legend Agrupa controles por tema. Para definir um título é usado “legend”.
  57. 57. Formulários HTML
  58. 58. Formulários HTML

×