Formulários

FormuláriosComunicando-se na web

Quem sou eu?Jonatas Oliveira

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

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

FormuláriosNão automatizados

Formulários Não automatizados

RGCPFInscrever-se na faculdadeCarteira de estudanteProvasRequisitar empréstimoComprar 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

Envio de dados para solicitar uma ação

Não automatizados

FormuláriosNa web

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

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áriosHTML

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

formContainer para os controles.Pode conter qualquer tipo de marcação.

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

Formulários HTML

Formulários HTML

inputCria controles definidos por seus tipos.

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

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”

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”

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

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

Formulários HTML

Formulários HTML

Formulários HTML

buttonElementos parecidos com o “input”, mas oferecem maior possibilidade de conteúdo.

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

Formulários HTML

Formulários HTML

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

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

Formulários HTML

optgrouplabel (Python)Define a etiqueta para o grupo

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

Formulários HTML

Formulários HTML

Formulários HTML

Formulários HTML

Formulários HTML

textareaControle de entrada de texto multi–linha.O conteúdo é o valor inicial.

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

Formulários HTML

Formulários HTML

Formulários HTML

Formulários HTML

Formulários HTML

labelEspecifica uma etiqueta para um elemento.A área de foco do elemento se estende para a etiqueta.

Formulários HTML

labelfor (mensagem)“id” do elemento que receberá a etiqueta

Formulários HTML

Formulários HTML

Formulários HTML

fieldset e legendAgrupa controles por tema.Para definir um título é usado “legend”.

Formulários HTML

Formulários HTML