Programação para web HTML: Formulários

Transcrição

1 Programação para web HTML: Formulários Professor: Harlley Lima Departamento de Computação Centro Federal de Educação Tecnológica de Minas Gerais Belo Horizonte, 9 de março 2016

2 Programação para web HTML: Formulários 2/46 Aula de hoje harlley/web/aula05

3 Programação para web HTML: Formulários 3/46 Formulários Praticamente todas as aplicações web necessitam obter informações enviadas pelos usuários. Para tornar os sites e as aplicações web mais interativos, podemos utilizar formulários. Através dos formulários, os usuários podem enviar informações aos Web Servers.

4 Programação para web HTML: Formulários 4/46 Formulários Devemos utilizar o elemento form. Esse elemento possui um atributo chamado action. O valor desse atributo indica para qual endereço os dados do formulário serão enviados. Os formulários são compostos por caixas de texto, checkboxes, radios, caixas de seleção, botões, entre outros componentes.

5 Programação para web HTML: Formulários 5/46 Caixas de texto As caixas de texto são adicionadas nos documentos HTML através do elemento input. Esse elemento possui um atributo chamado type. Para definir uma caixa de texto, o valor do atributo type deve ser text. O atributo name do elemento input serve para identificar cada caixa.

6 Programação para web HTML: Formulários 6/46 Parâmetros GET e POST Vamos analisar como os valores preenchidos nos formulários são enviados aos Web Servers. Considere o seguinte exemplo.

7 Programação para web HTML: Formulários 7/46 Parâmetros GET e POST O formulário a seguir possui duas caixas de texto. Nas duas, o atributo name foi definido.

8 Programação para web HTML: Formulários 8/46 Parâmetro GET Quando as caixas forem preenchidas e o formulário enviado, os dados desse formulário são adicionados na requisição HTTP.

9 Programação para web HTML: Formulários 9/46 Parâmetro GET Observe na imagem abaixo que os valores preenchidos nas caixas de texto são enviados como parâmetros na URL da requisição HTTP.

10 Programação para web HTML: Formulários 10/46 Parâmetro POST Muitas vezes, não é adequado exibir os valores dos atributos na barra de endereço dos navegadores. Podemos ocultar esses valores adicionando o atributo method com o valor post no elemento form. Esse atributo aceita apenas dois valores: get e post.

11 Parâmetro POST Programação para web HTML: Formulários 11/46

12 Programação para web HTML: Formulários 12/46 Rótulos Os rótulos são fundamentais para informar aos usuários quais dados devem ser preenchidos. Para adicionar um rótulo, devemos utilizar o elemento label.

13 Programação para web HTML: Formulários 13/46 Placeholders Além dos rótulos, podemos utilizar placeholders para dar dicas ou exemplos do conteúdo que desejamos em cada caixa de entrada.

14 Programação para web HTML: Formulários 14/46 Botões de submit Para adicionar um botão de submit em um formulário, podemos utilizar o elemento input com type igual a submit.

15 Programação para web HTML: Formulários 15/46 Botões de submit Utilizar o elemento button com type igual a submit. Diferentemente do elemento input, o elemento button permite a criação de botões com imagens além de texto.

16 Programação para web HTML: Formulários 16/46 Caixas de números Para coletar dados numéricos, podemos utilizar caixas específicas para números. Valor do atributo type é number ou range.

17 Programação para web HTML: Formulários 17/46 Caixas de , telefone e url No HTML5 foram definidas caixas de entradas específicas para s, telefones e urls. Essas caixas são adicionadas com o elemento input. O valor do atributo type deve ser , tel e url para s, telefones e urls respectivamente.

18 Caixas de , telefone e url Programação para web HTML: Formulários 18/46

19 Caixas de datas e horas Diversos tipos de caixas de entrada para coletar datas e horas foram adicionados no HTML5: date: Utilizado para coletar data (dia, mês e ano) sem fuso horário. datetime: Utilizado para coletar data (dia, mês e ano) e hora (hora, minuto, segundo e fração de segundo) com fuso horário em UTC. datetime-local: Utilizado para coletar data (dia, mês e ano) e hora (hora, minuto, segundo e fração de segundo) sem fuso horário. month: Utilizado para coletar data composta por mês e ano sem fuso horário. time: Utilizado para coletar hora (hora, minuto, segundo e fração de segundo) sem fuso horário. week: Utilizado para coletar data composta por semana e ano sem fuso horário. Programação para web HTML: Formulários 19/46

20 Caixas de datas e horas Programação para web HTML: Formulários 20/46

21 Programação para web HTML: Formulários 21/46 Caixas de datas e horas Figure: date e datetime-local

22 Programação para web HTML: Formulários 22/46 Caixas de datas e horas Figure: week e month

23 Programação para web HTML: Formulários 23/46 Caixas de datas e horas Figure: time

24 Programação para web HTML: Formulários 24/46 Caixas de senha Para adicionar uma caixa de senha em um formulário, devemos utilizar o elemento input com o valor password para o atributo type.

25 Programação para web HTML: Formulários 25/46 Caixas de texto longo Para coletar um texto com várias linhas, podemos utilizar o elemento textarea. A quantidade de linhas de um textarea é definida com o atributo rows e a quantidade de colunas com o atributo cols.

26 Programação para web HTML: Formulários 26/46 Checkboxes Para adicionar um checkbox em um formulário, devemos utilizar o elemento input com type igual a checkbox.

27 Programação para web HTML: Formulários 27/46 Checkboxes Para agrupar esses checkboxes, basta definir o atributo name com o mesmo valor para eles.

28 Programação para web HTML: Formulários 28/46 Radios Para adicionar um radio em um formulário, devemos utilizar o elemento input com type igual a radio. Ao utilizar esse componente, é importante definir um valor para o atributo value. Algumas vezes, desejamos que determinados checkboxes e radios estejam marcados quando os formulários são apresentados aos usuários: checked

29 Programação para web HTML: Formulários 29/46 Botões de upload Para adicionar um botão de upload em um formulário, podemos utilizar o elemento input com type igual a file.

30 Programação para web HTML: Formulários 30/46 Drop-down list Muitos formulários permitem que os usuários selecionem um ou mais itens de uma lista de opções. Para adicionar esse tipo de componente, devemos utilizar o elemento select. As opções devem ser definidas no conteúdo do elemento select e elas são adicionadas com o elemento option.

31 Drop-down list Programação para web HTML: Formulários 31/46

32 Drop-down list Programação para web HTML: Formulários 32/46

33 Programação para web HTML: Formulários 33/46 Drop-down list Por padrão, apenas um item de um drop-down list pode ser selecionado pelos usuários. Mas, utilizando o atributo multiple, um ou mais itens podem ser selecionados.

34 Drop-down list Programação para web HTML: Formulários 34/46

35 Programação para web HTML: Formulários 35/46 Autocomplete Para melhorar a usabilidade, podemos utilizar o recurso do autocomplete nas caixas de entrada. Para utilizar esse recurso, devemos criar uma lista de sugestões com o elemento datalist.

36 Autocomplete Programação para web HTML: Formulários 36/46

37 Programação para web HTML: Formulários 37/46 Validação Validação: verificar se os dados fornecidos no formulário correspondem minimamente com que é solicitado ao usuário Segurança, organização de banco de dados ou até para evitar a perda de tempo na hora de filtrar entre dezenas de mensagens spam. Tarefa trabalhosa que demanda tempo HTML5 a validação tornou-se nativa da linguagem

38 Programação para web HTML: Formulários 38/46 Validação Alguns recursos para realizar a validação dos campos de um formulário foram adicionados no HTML5.

39 Validação Programação para web HTML: Formulários 39/46

40 Validação Programação para web HTML: Formulários 40/46

41 Programação para web HTML: Formulários 41/46 Prática: Página pessoal Altere sua página pessoal criada na aula passada e crie um link que direcione o usuário para outra tela com um formulário que possibilite ao usuário entrar em contato com você. Esse formulário deverá ter os seguintes campos: 1. Nome (campo obrigatório) 2. (campo obrigatório) 3. Telefone 4. Data de nascimento 5. Drop-down list com os possíveis motivos do contato (campo obrigatório) 6. Campo que pergunte se a resposta deve ser urgente ou não. 7. Mensagem (campo obrigatório)

42 Programação para web HTML: Formulários 42/46 Prática: Página pessoal Os campos 1, 2, 5 e 7 devem ser validados para não aceitarem respostas em branco. O campo 2 deve ser validado para verificar se realmente foi fornecido um . E o campo 4 deve ser do tipo data. Não deixe de colocar o label de cada campo conforme mostrado nos slides.

43 Programação para web HTML: Formulários 43/46 Prática: Página pessoal Os campos definidos anteriormente devem possuir os seguintes names 1. nome telefone 4. data 5. urgente 6. motivo 7. mensagem Além disso, o valor do action no formulário deve ser igual a parametros.php e o method igual a post. Baixe o arquivo parametros.php no seguinte endereço harlley/web/aula05/parametros.z Salve o arquivo parametros.php na mesma pasta do arquivo do formulário criado.

44 Exercício Faça um formulário semelhante a esse: Programação para web HTML: Formulários 44/46

45 Programação para web HTML: Formulários 45/46 Forma de entrega dos exercício Exercícios de HTML Data de entrega: 22/março até às 23h59. Antes de enviar o exercício por , você deve selecionar todos os arquivos utilizados na sua solução e comprimir para um arquivo (*.zip ou *.rar). Todos os exercícios devem ser entregues em um único. E as soluções de cada exercício devem ser divididos em pastas. O nome no arquivo a ser enviado deve estar no formato ProgWeb Bimestre1HTML nome do aluno.zip. O assunto do dever estar no formato ProgWeb Bimestre1HTML nome do aluno. Enviar os exercícios para o esub.para.harlley@gmail.com com assunto e nome do arquivo em formatos diferentes não serão avaliados.

46 Programação para web HTML: Formulários 46/46 Dúvidas? harlley/web/aula05