Programação para web HTML: Formulários Professor: Harlley Lima E-mail: harlley@decom.cefetmg.br Departamento de Computação Centro Federal de Educação Tecnológica de Minas Gerais Belo Horizonte, 9 de março 2016
Programação para web HTML: Formulários 2/46 Aula de hoje http://www.dcc.ufmg.br/ harlley/web/aula05
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.
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.
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.
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.
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.
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.
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.
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.
Parâmetro POST Programação para web HTML: Formulários 11/46
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.
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.
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.
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.
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.
Programação para web HTML: Formulários 17/46 Caixas de email, telefone e url No HTML5 foram definidas caixas de entradas específicas para emails, telefones e urls. Essas caixas são adicionadas com o elemento input. O valor do atributo type deve ser email, tel e url para e-mails, telefones e urls respectivamente.
Caixas de email, telefone e url Programação para web HTML: Formulários 18/46
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
Caixas de datas e horas Programação para web HTML: Formulários 20/46
Programação para web HTML: Formulários 21/46 Caixas de datas e horas Figure: date e datetime-local
Programação para web HTML: Formulários 22/46 Caixas de datas e horas Figure: week e month
Programação para web HTML: Formulários 23/46 Caixas de datas e horas Figure: time
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.
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.
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.
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.
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
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.
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.
Drop-down list Programação para web HTML: Formulários 31/46
Drop-down list Programação para web HTML: Formulários 32/46
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.
Drop-down list Programação para web HTML: Formulários 34/46
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.
Autocomplete Programação para web HTML: Formulários 36/46
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
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.
Validação Programação para web HTML: Formulários 39/46
Validação Programação para web HTML: Formulários 40/46
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. E-mail (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)
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-mail. E o campo 4 deve ser do tipo data. Não deixe de colocar o label de cada campo conforme mostrado nos slides.
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 2. email 3. 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 http://www.dcc.ufmg.br/ harlley/web/aula05/parametros.z Salve o arquivo parametros.php na mesma pasta do arquivo do formulário criado.
Exercício Faça um formulário semelhante a esse: Programação para web HTML: Formulários 44/46
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 e-mail, 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 e-mail ú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 email dever estar no formato ProgWeb Bimestre1HTML nome do aluno. Enviar os exercícios para o email: esub.para.harlley@gmail.com E-mail com assunto e nome do arquivo em formatos diferentes não serão avaliados.
Programação para web HTML: Formulários 46/46 Dúvidas? http://www.dcc.ufmg.br/ harlley/web/aula05