formulários
TRANSCRIPT
![Page 1: Formulários](https://reader031.vdocuments.com.br/reader031/viewer/2022020116/5570a934d8b42a5d288b4f38/html5/thumbnails/1.jpg)
FormuláriosComunicando-se na web
![Page 2: Formulários](https://reader031.vdocuments.com.br/reader031/viewer/2022020116/5570a934d8b42a5d288b4f38/html5/thumbnails/2.jpg)
Quem sou eu?Jonatas Oliveira
![Page 3: Formulários](https://reader031.vdocuments.com.br/reader031/viewer/2022020116/5570a934d8b42a5d288b4f38/html5/thumbnails/3.jpg)
Quem sou eu?
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.
Jonatas Oliveira
![Page 4: Formulários](https://reader031.vdocuments.com.br/reader031/viewer/2022020116/5570a934d8b42a5d288b4f38/html5/thumbnails/4.jpg)
Quem sou eu?
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.
Jonatas Oliveira
![Page 5: Formulários](https://reader031.vdocuments.com.br/reader031/viewer/2022020116/5570a934d8b42a5d288b4f38/html5/thumbnails/5.jpg)
FormuláriosNão automatizados
![Page 6: Formulários](https://reader031.vdocuments.com.br/reader031/viewer/2022020116/5570a934d8b42a5d288b4f38/html5/thumbnails/6.jpg)
Formulários Não automatizados
RGCPFInscrever-se na faculdadeCarteira de estudanteProvasRequisitar empréstimoComprar com cartão de crédito
![Page 7: Formulários](https://reader031.vdocuments.com.br/reader031/viewer/2022020116/5570a934d8b42a5d288b4f38/html5/thumbnails/7.jpg)
Formulários Não automatizados
Carteira de estudante
![Page 8: Formulários](https://reader031.vdocuments.com.br/reader031/viewer/2022020116/5570a934d8b42a5d288b4f38/html5/thumbnails/8.jpg)
Formulários Não automatizados
Autorização para estocar inflamáveis
![Page 9: Formulários](https://reader031.vdocuments.com.br/reader031/viewer/2022020116/5570a934d8b42a5d288b4f38/html5/thumbnails/9.jpg)
Formulários
Envio de dados para solicitar uma ação
Não automatizados
![Page 10: Formulários](https://reader031.vdocuments.com.br/reader031/viewer/2022020116/5570a934d8b42a5d288b4f38/html5/thumbnails/10.jpg)
FormuláriosNa web
![Page 11: Formulários](https://reader031.vdocuments.com.br/reader031/viewer/2022020116/5570a934d8b42a5d288b4f38/html5/thumbnails/11.jpg)
Formulários Na web
Criar e acessar uma conta de emailEnviar e apagar emailsPesquisar no GoogleCriar conta em um fórumEnviar um scrap no OrkutFazer um compra em uma loja virtualEnviar uma sugestão para um site
![Page 12: Formulários](https://reader031.vdocuments.com.br/reader031/viewer/2022020116/5570a934d8b42a5d288b4f38/html5/thumbnails/12.jpg)
Formulários Na web
![Page 13: Formulários](https://reader031.vdocuments.com.br/reader031/viewer/2022020116/5570a934d8b42a5d288b4f38/html5/thumbnails/13.jpg)
Formulários Na web
![Page 14: Formulários](https://reader031.vdocuments.com.br/reader031/viewer/2022020116/5570a934d8b42a5d288b4f38/html5/thumbnails/14.jpg)
Formulários Na web
![Page 15: Formulários](https://reader031.vdocuments.com.br/reader031/viewer/2022020116/5570a934d8b42a5d288b4f38/html5/thumbnails/15.jpg)
Formulários Na web
![Page 16: Formulários](https://reader031.vdocuments.com.br/reader031/viewer/2022020116/5570a934d8b42a5d288b4f38/html5/thumbnails/16.jpg)
Formulários Na web
![Page 17: Formulários](https://reader031.vdocuments.com.br/reader031/viewer/2022020116/5570a934d8b42a5d288b4f38/html5/thumbnails/17.jpg)
Formulários Na web
Envio de dados para solicitar uma ação
![Page 18: Formulários](https://reader031.vdocuments.com.br/reader031/viewer/2022020116/5570a934d8b42a5d288b4f38/html5/thumbnails/18.jpg)
FormuláriosHTML
![Page 19: Formulários](https://reader031.vdocuments.com.br/reader031/viewer/2022020116/5570a934d8b42a5d288b4f38/html5/thumbnails/19.jpg)
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
![Page 20: Formulários](https://reader031.vdocuments.com.br/reader031/viewer/2022020116/5570a934d8b42a5d288b4f38/html5/thumbnails/20.jpg)
Formulários HTML
![Page 21: Formulários](https://reader031.vdocuments.com.br/reader031/viewer/2022020116/5570a934d8b42a5d288b4f38/html5/thumbnails/21.jpg)
Formulários HTML
![Page 22: Formulários](https://reader031.vdocuments.com.br/reader031/viewer/2022020116/5570a934d8b42a5d288b4f38/html5/thumbnails/22.jpg)
Formulários HTML
Itens de um formulário
![Page 23: Formulários](https://reader031.vdocuments.com.br/reader031/viewer/2022020116/5570a934d8b42a5d288b4f38/html5/thumbnails/23.jpg)
Formulários HTML
formContainer para os controles.Pode conter qualquer tipo de marcação.
![Page 24: Formulários](https://reader031.vdocuments.com.br/reader031/viewer/2022020116/5570a934d8b42a5d288b4f38/html5/thumbnails/24.jpg)
Formulários HTML
formaction (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
![Page 25: Formulários](https://reader031.vdocuments.com.br/reader031/viewer/2022020116/5570a934d8b42a5d288b4f38/html5/thumbnails/25.jpg)
Formulários HTML
![Page 26: Formulários](https://reader031.vdocuments.com.br/reader031/viewer/2022020116/5570a934d8b42a5d288b4f38/html5/thumbnails/26.jpg)
Formulários HTML
inputCria controles definidos por seus tipos.
![Page 27: Formulários](https://reader031.vdocuments.com.br/reader031/viewer/2022020116/5570a934d8b42a5d288b4f38/html5/thumbnails/27.jpg)
Formulários HTML
inputtype (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
![Page 28: Formulários](https://reader031.vdocuments.com.br/reader031/viewer/2022020116/5570a934d8b42a5d288b4f38/html5/thumbnails/28.jpg)
Formulários HTML
inputsize (10|50)Largura inicial do campo, quantidade de caracteres
maxlenght (8|32)Quantidade máxima de caracteres no campoSomente para inputs do tipo “text” ou “password”
checked (checked)Diz que o input inicialmente, será marcadoSomente para inputs do tipo “checkbox” ou “radio”
![Page 29: Formulários](https://reader031.vdocuments.com.br/reader031/viewer/2022020116/5570a934d8b42a5d288b4f38/html5/thumbnails/29.jpg)
Formulários HTML
inputsrc (http://example.com/search.png)Local da imagem que será usada para decorar o botãoSomente para inputs do tipo “image”
![Page 30: Formulários](https://reader031.vdocuments.com.br/reader031/viewer/2022020116/5570a934d8b42a5d288b4f38/html5/thumbnails/30.jpg)
Formulários HTML
textpasswordcheckbox
radiosubmitimage
resetbutton
file
inputatributo “type”
hidden = escondidoNão aparece na página, mas é enviadopara a aplicação junto com os outros
![Page 31: Formulários](https://reader031.vdocuments.com.br/reader031/viewer/2022020116/5570a934d8b42a5d288b4f38/html5/thumbnails/31.jpg)
Formulários HTML
textpasswordcheckbox
radiosubmitimagereset
buttonfile
hidden
input atributo “type”Campo de texto, apenas uma linha
Campo para senha, mostra asterísco no lugar do texto
Agrupados por “name”, pode haver mais de um marcado
Agrupados por “name”, apenas um deles podem ser marcados
Botão para enviar os dados entrados para a aplicação
Botão para enviar os dados, decorado com uma imagem
Reinicia os dados do formulário
Botão para usar ações externas
Selecionador de arquivos
Controle escondido, o seu valor não pode ser mudado
![Page 32: Formulários](https://reader031.vdocuments.com.br/reader031/viewer/2022020116/5570a934d8b42a5d288b4f38/html5/thumbnails/32.jpg)
Formulários HTML
![Page 33: Formulários](https://reader031.vdocuments.com.br/reader031/viewer/2022020116/5570a934d8b42a5d288b4f38/html5/thumbnails/33.jpg)
Formulários HTML
![Page 34: Formulários](https://reader031.vdocuments.com.br/reader031/viewer/2022020116/5570a934d8b42a5d288b4f38/html5/thumbnails/34.jpg)
Formulários HTML
buttonElementos parecidos com o “input”, mas oferecem maior possibilidade de conteúdo.
![Page 35: Formulários](https://reader031.vdocuments.com.br/reader031/viewer/2022020116/5570a934d8b42a5d288b4f38/html5/thumbnails/35.jpg)
Formulários HTML
buttontype (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
![Page 36: Formulários](https://reader031.vdocuments.com.br/reader031/viewer/2022020116/5570a934d8b42a5d288b4f38/html5/thumbnails/36.jpg)
Formulários HTML
![Page 37: Formulários](https://reader031.vdocuments.com.br/reader031/viewer/2022020116/5570a934d8b42a5d288b4f38/html5/thumbnails/37.jpg)
Formulários HTML
![Page 38: Formulários](https://reader031.vdocuments.com.br/reader031/viewer/2022020116/5570a934d8b42a5d288b4f38/html5/thumbnails/38.jpg)
Formulários HTML
selectCria um menu, cada opção do menu é definida por um elemento “option”.As opções podem ser agrupadas por um “optgroup”.
![Page 39: Formulários](https://reader031.vdocuments.com.br/reader031/viewer/2022020116/5570a934d8b42a5d288b4f38/html5/thumbnails/39.jpg)
Formulários HTML
selectname (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
![Page 40: Formulários](https://reader031.vdocuments.com.br/reader031/viewer/2022020116/5570a934d8b42a5d288b4f38/html5/thumbnails/40.jpg)
Formulários HTML
optgrouplabel (Python)Define a etiqueta para o grupo
![Page 41: Formulários](https://reader031.vdocuments.com.br/reader031/viewer/2022020116/5570a934d8b42a5d288b4f38/html5/thumbnails/41.jpg)
Formulários HTML
optionselected (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
![Page 42: Formulários](https://reader031.vdocuments.com.br/reader031/viewer/2022020116/5570a934d8b42a5d288b4f38/html5/thumbnails/42.jpg)
Formulários HTML
![Page 43: Formulários](https://reader031.vdocuments.com.br/reader031/viewer/2022020116/5570a934d8b42a5d288b4f38/html5/thumbnails/43.jpg)
Formulários HTML
![Page 44: Formulários](https://reader031.vdocuments.com.br/reader031/viewer/2022020116/5570a934d8b42a5d288b4f38/html5/thumbnails/44.jpg)
Formulários HTML
![Page 45: Formulários](https://reader031.vdocuments.com.br/reader031/viewer/2022020116/5570a934d8b42a5d288b4f38/html5/thumbnails/45.jpg)
Formulários HTML
![Page 46: Formulários](https://reader031.vdocuments.com.br/reader031/viewer/2022020116/5570a934d8b42a5d288b4f38/html5/thumbnails/46.jpg)
Formulários HTML
textareaControle de entrada de texto multi–linha.O conteúdo é o valor inicial.
![Page 47: Formulários](https://reader031.vdocuments.com.br/reader031/viewer/2022020116/5570a934d8b42a5d288b4f38/html5/thumbnails/47.jpg)
Formulários HTML
textareaname (mensagem)Como será identificado pela aplicação
rows (10|25)Quantidade de linhas do campo
cols (10|25)Quantidade de colunas do campo
![Page 48: Formulários](https://reader031.vdocuments.com.br/reader031/viewer/2022020116/5570a934d8b42a5d288b4f38/html5/thumbnails/48.jpg)
Formulários HTML
![Page 49: Formulários](https://reader031.vdocuments.com.br/reader031/viewer/2022020116/5570a934d8b42a5d288b4f38/html5/thumbnails/49.jpg)
Formulários HTML
![Page 50: Formulários](https://reader031.vdocuments.com.br/reader031/viewer/2022020116/5570a934d8b42a5d288b4f38/html5/thumbnails/50.jpg)
Formulários HTML
![Page 51: Formulários](https://reader031.vdocuments.com.br/reader031/viewer/2022020116/5570a934d8b42a5d288b4f38/html5/thumbnails/51.jpg)
Formulários HTML
![Page 52: Formulários](https://reader031.vdocuments.com.br/reader031/viewer/2022020116/5570a934d8b42a5d288b4f38/html5/thumbnails/52.jpg)
Formulários HTML
labelEspecifica uma etiqueta para um elemento.A área de foco do elemento se estende para a etiqueta.
![Page 53: Formulários](https://reader031.vdocuments.com.br/reader031/viewer/2022020116/5570a934d8b42a5d288b4f38/html5/thumbnails/53.jpg)
Formulários HTML
labelfor (mensagem)“id” do elemento que receberá a etiqueta
![Page 54: Formulários](https://reader031.vdocuments.com.br/reader031/viewer/2022020116/5570a934d8b42a5d288b4f38/html5/thumbnails/54.jpg)
Formulários HTML
![Page 55: Formulários](https://reader031.vdocuments.com.br/reader031/viewer/2022020116/5570a934d8b42a5d288b4f38/html5/thumbnails/55.jpg)
Formulários HTML
![Page 56: Formulários](https://reader031.vdocuments.com.br/reader031/viewer/2022020116/5570a934d8b42a5d288b4f38/html5/thumbnails/56.jpg)
Formulários HTML
fieldset e legendAgrupa controles por tema.Para definir um título é usado “legend”.
![Page 57: Formulários](https://reader031.vdocuments.com.br/reader031/viewer/2022020116/5570a934d8b42a5d288b4f38/html5/thumbnails/57.jpg)
Formulários HTML
![Page 58: Formulários](https://reader031.vdocuments.com.br/reader031/viewer/2022020116/5570a934d8b42a5d288b4f38/html5/thumbnails/58.jpg)
Formulários HTML