Design para Web 8 Formulários Formularios.

Apresentação em tema: "Design para Web 8 Formulários Formularios."— Transcrição da apresentação:

1 Design para Web Http://tertuliano.wetpaint.com

2 8 Formulários Formularios

3 Arquitetura Cliente-Servidor A arquitetura cliente-servidor sempre envolve um “pedido de informação” e uma “resposta”. Ex: Saldo bancario Cliente Servidor URL Dados Form Informação Html form html

4 XHTML  Formulários type=“text” Atributos: size, maxlength, value Campo de texto de linha única Atributos: type, name/id, size, maxlength, value, checked Campo de formulário.. Atributos: method, action, name/id Corpo do formulário Tag/AtributosElemento

5 XHTML  Formulários type=“password” Atributos: size, maxlength, value Campo de senha type=“hidden” Atributos: name, value Campo oculto type=“checkbox” Atributos: name, value, checked Campos checkbox type=“radio” Atributos: name, value, checked Campos radio button Tag/AtributosElemento

6 XHTML  Formulários.. Atributo: selected, value Opção da caixa de seleção.. Atributos: name/id, size, multiple Caixa de seleção.. Atributos: name/id, cols, rows Área de texto type=“reset” Atributos: name/id, value. Botão para limpar dados type=“submit” Atributos: name/id, value. Botão para enviar dados Tag/AtributosElemento

7 Transferencia de dados cliente Servidor Dentro das tags forms utlizamos tag de widgets (controles) como campos de entrada de texto, caixas de seleção, botões e outros elementos graficos HTML agrupa os dados que devem ser enviados ao servidor em uma estrutura chamada formulário

8 Caixas de Entrada de Texto Simples type = text / password size = numero de caracteres exibidos maxlength = numero maximo de caracteres permitidos name = id utilizado para identificar campo no servidor Caixas de entrada de texto simples – Textfields Permitem entrada de apenas 1 linha de texto

9 Caixas de Entrada de Texto Simples Escolha seu time favorito... Palmeiras Sao Paulo Santos Outro name =identificador do campo value = identificador da opcao Menus (Drop down lists) Permitem escolher uma opcao de uma lista

10 Pagina de Login banco Rural. net Banco Rural conta corrente conta poupanca login: senha:

11 Seguros de Automoveis Exemplo 2: Pagina de Seguros

12 Lista de Opcoes Female Male Other checked = valor padrao, somente 1 permitido name = id utilizado para identificar campo no servidor value = codigo da opcao selecionada Listas de opcoes (radio buttons) permitem a escolha de uma única opção

13 Lista de Opcoes Usa oculos Menor de 25 anos Ja sofreu acidente de carro name = id utilizado para identificar campo no servidor value = codigo da opcao selecionada Listas de checagem (checklists) permitem a escolha de mais de uma opção

14 Pagina de Seguros seguro Seguro de Automoveis http://servidor/pagina2.asp Sexo Feminino Masculino Fatores de Risco: Usa oculos Menor de 25 anos Ja sofreu acidente de carro

15 Pagina De Seguros

16 Pagina de Comentarios

17 Caixas de Entrada de Texto Compostas Titulo cols = numero de caracteres por linha rows = numero de linhas name = id utilizado para identificar campo no servidor Caixas de entrada de texto compostas - TextBlocks

18 Label Your name: Labels - Permitem associar um texto a um conntrole (menu, caixa de texto, etc..

19 Botoes type = tipo do botao: submit (envia), reset (limpa) name = nome do botao value = valor do botao class = CSS Imagens botao Scripts utilizam variaveis para identificar paginas, ou passar valores do browsr para o servidor

20 Variaveis name = nome da variavel value = valor da variavel Scripts utilizam variaveis para identificar paginas, ou passar valores do browsr para o servidor

21 Seletores de Arquivo name = nome do seletor Seletores de arquivo permitem escolher arquivos para serem transferidos para o servidor

22 Pagina de Opiniao teste2 Pesquisa de Opiniao http://server/pagina3.asp Comentarios Arquivos Anexos Enviar Limpar

23 Pagina de Comentarios

24 Links Para saber mais: http://www.w3.org/TR/1999/REC-html401-19991224/interact/forms.html