Aplicativos para Internet Aula 07 Formulários. Aplicações web dinânicas normalmente precisam receber entradas de dados de seus usuários. Para atender.

Apresentação em tema: "Aplicativos para Internet Aula 07 Formulários. Aplicações web dinânicas normalmente precisam receber entradas de dados de seus usuários. Para atender."— Transcrição da apresentação:

1 Aplicativos para Internet Aula 07 Formulários

2 Aplicações web dinânicas normalmente precisam receber entradas de dados de seus usuários. Para atender a esse objetivo, criamos formulários eletrônicos em nossas páginas HTML. O formulário irá receber dados do usuário e repassá-los para o servidor, onde serão processados e possivelmente devolvidos ao usuário. Cada formulário é delimitado pela marcação no código HTML, e irá gerar uma requisição exclusiva para o lado servidor da aplicação.

3 Exemplo de formulário

4 Dados Pessoais Nome Idade Estado São Paulo Rio de Janeiro Rio Grande do Sul Sexo Masculino Feminino Opinião Avaliação Excelente Boa Ruim Comentários Deseja receber newsletter? Sim, envie-me emails com novidades

5 Tag Delimita o formulário. Somente os campos que estiverem entre e serão enviados ao servidor. AtributoValorDescrição actionendereçoEspecifica o endereço da página do servidor que irá receber a requisição methodGET POST Tipo de requisição a ser enviada para o servidor: GET- os dados entrados fazem parte do URL associado à consulta enviada para o servidor; suporta até 128 caracteres. POST - os dados entrados fazem parte do corpo da mensagem enviada para o servidor; transfere grande quantidade de dados. enctypeTipo de codificação dos dados O padrao e application/x-www-form-urlencoded, mas alguns browsers suportam text/plain

6 Tag Permite agrupar campos em regiões, dependendo do tipo de informações a serem entradas. Os campos colocados entre e aparecerão dentro da mesma região. Uma legenda pode ser atribuída a cada fieldset usando-se a tag AtributoValorDescrição disabled Desabilita os elementos do formulario internos ao fieldset formnome do formEspecifica um ou mais forms aos quais o fieldset pertence namenomeEspecifica o nome do fieldset

7 Tag Cria um campo do formulário. AtributoValorDescrição namenomeDefine o nome do campo. É o identificador que o servidor irá receber para ler o valor do campo. typebutton checkbox file hidden password radio reset submit text Button – cria um botão Checkbox – caixa de seleção para multiplos valores File – Seleciona um arquivo Hidden – campo oculto Password – Senha, oculta caracteres com *** Radio – caixa de seleção para único valor Reset – Botão para limpar o formulário Submit – Botão que envia o formulário Text – campo tipo texto valuevalorDefine o valor do campo. Esse atributo é enviado para o servidor na requisição e é alterado quando o usuário digita algo no campo.

8 Campos input type=“text” type=“pasword” type=“submit” e type=“reset” type=“checkbox” type=“radio” type=“file”

9 Tag Cria um campo de digitação livre, que permite várias linhas de texto. Exemplo: AtributoValorDescrição disabled Desabilita o textarea formnome do formEspecifica um ou mais forms aos quais o textarea pertence namenomeEspecifica o nome do textarea readonly Define que o textarea permite somente leitura

10 Tags e A tag cria uma caixa de seleção. Cada opção a ser inclusa deve ser delimitada pela tag Enquanto o texto exibido é o conteúdo da tag option, o atributo value define o valor a ser enviado para o servidor.

11 Tag A tag serve para criar o rótulo de um campo. O atributo for de um label indica o id do campo que ele aponta. Ao clicar no label, o campo recebe foco automático.

12 Novos campos do HTML 5 O HTML 5 introduziu novos tipos de campos de formulários, já programados para validar diferentes tipos de dados (ainda não são compatíveis com todos os navegadores). –

13 Novos campos do HTML 5

14 Campo email Inputs com type=“email” armazenam endereços de email. Navegadores que aceitam esse tipo de campo validam automaticamente o conteúdo, buscando a existência do caracter @.

15 Campo tel Inputs com type=“tel” permitem armazenar números de telefone. Em dispositivos móveis, ele altera o teclado de alfanumérico para numérico.

16 Campo url Inputs com type=“url” armazenam endereços da web. A validação feita pelo navegador busca pela string “http://”

17 Campo number Inputs com type=“number” armazenam valores numéricos, e disponibilizam uma caixa de incremento/decremento de valores. AtributoValorDescrição stepvalorValor do incremento. minvalorValor mínimo que pode ser selecionado pelo campo maxvalorValor máximo que pode ser selecionado pelo campo valuevalorValor atual do campo

18 Campo range Inputs com type=“range” armazenam valores numéricos, e disponibilizam uma barra de alcance para o usuário selecionar o valor. AtributoValorDescrição stepvalorValor do incremento. minvalorValor mínimo que pode ser selecionado pelo campo maxvalorValor máximo que pode ser selecionado pelo campo valuevalorValor atual do campo

19 Campo date Inputs com type=“date” disponibilizam uma janela de calendário para seleção de data.

20 Campo time Inputs com type=“time” permitem seleção de horário.

21 Campo datetime Inputs com type=“datetime” combinam um seletor de data com um de horário, e permitem ajuste de fuso hórário.

22 Campo month Inputs com type=“month” permitem seleção de um mês.

23 Campo week Inputs com type=“week” permitem seleção de uma semana.

24 Campo color Inputs com type=“color” permitem seleção de uma cor RGB e retornam sua representação hexadecimal.

25 Campo search Inputs com type=“search” mostram automaticamente um “x” para apagar o conteúdo do campo se houver algum valor digitado.

26 Datalist Datalist permitem criar uma caixa de sugestões para serem preenchidas em campos de texto. O campo de texto utiliza o atributo list=“nomeDatalist” para referenciar a datalist desejada.

27 Progress Permite inserir uma barra de progresso. A divisão value/max determina a porcentagem do progresso. O valor pode ser alterado via javascript, para criar uma barra de progresso dinamica.

28 Meter Cria uma régua com indicador de valores dentro de uma escala.

29 Outros atributos do HTML 5 Placeholder –Define um texto de exemplo a ser exibido se o campo estiver vazio Required –Define que o campo vai ser validado pelo navegador. O form não será enviado se houver erros. * * Para impedir que o formulario seja validado no momento do envio use o atributo novalidate na tag form.

30 Exercício Crie a seguinte página de formulário: