DESENV.

WEB EM HTML5, CSS, JAVASCRIPT E PHP

Formulários em HTML

Prof. Me. André Teixeira De Frades

Compreendendo o problema

◼ Um hotel em crescimento, quer ampliar seus negócios com a criação

de uma página WEB.

◼ Uma das necessidades seria disponibilizar uma página na qual os seus

possíveis hóspedes possam realizar suas reservas.

◼ O ideal seria representar uma versão digital da ficha de check-in dele.

◼ Como isso é possível no ambiente web?

2
Agenda da Aula

◼ Objetivo:
◼ Entender as funcionalidades das ferramentas para criação e
validação de formulários, a verificação se a validação está sendo
feita.

◼ Tópicos:
◼ Formulários e validação em HTML.

3
Formulários HTML

◼ Uma das formas do usuário interagir

com a página é através de formulários.

◼ Um formulário HTML é usado para

coletar a entrada do usuário.

◼A entrada do usuário geralmente é

enviada a um servidor para
processamento.
4
Formulários HTML

◼ Formulários podem conter diversos elementos:

◼ Campos de textos;
◼ Caixas de seleção;
◼ Botões;
◼ Radio buttons;
◼ Checkboxes.

5
Formulários HTML

◼ O formulário HTML é representado pela tag de abertura <form> e a

de fechamento </form>.

◼ Principais atributos:
◼ Action - define o local (através de uma URL) ao qual serão
enviados todos os dados recolhidos do formulário.
◼ Method - define o método HTTP (GET ou POST) com que o
formulário HTML irá lidar com os dados.

6
Formulários HTML

◼ Uma requisição HTTP tem duas partes:

◼ O cabeçalho contém um conjunto de metadados globais
envolvendo os recursos do navegador.
◼O corpo pode conter informações necessárias para o servidor
conseguir processar a solicitação anterior.

7
Formulários HTML

◼ Método GET:
◼ O método GET é usado pelo navegador para solicitar que o
servidor envie de volta um determinado recurso.
◼ O navegador envia um corpo vazio, se um formulário for enviado
através do método GET, os dados serão reconhecidos pelo
servidor através da URL.
◼ Exemplo de URL iria se parecer com algo como:
url?nome=valor&idade=value.

8
Formulários HTML

◼ Método GET:
◼ Esse é o método padrão do formulário HTML. Caso não seja
declarado o atributo method, o formulário funcionará através do
método GET.
◼ O tamanho de uma URL é limitado a cerca de 3.000 caracteres;
◼ Nunca use o GET para enviar dados confidenciais, pois esses
dados ficarão visíveis na URL;

9
Formulários HTML

◼ Método POST:
◼ Os dados são enviados ao servidor através do corpo da solicitação
HTTP.

◼ Também é realizada uma solicitação de resposta. Portanto, é como

se falássemos ao servidor “Servidor, verifique esses dados e me
retorne um resultado adequado”.

10
Formulários HTML

◼ Método POST:
◼ Diferentementedo método GET, explicado anteriormente, o
método POST não inclui o corpo na URL.

◼ Os dados enviados não ficarão visíveis na URL.

◼ Não tem limitações de tamanho;

11
Formulários HTML

◼ Outros atributos para formulários:

◼ autocomplete – aceita os valores “on“ ou “off”, o navegador completa
automaticamente os valores com base nos valores que o usuário inseriu
antes.
◼ target - especifica onde exibir a resposta recebida após o envio do
formulário.
◼ blank - A resposta é exibida em uma nova janela ou guia
◼ self - A resposta é exibida na janela atual (padrão)
◼ parent A resposta é exibida no frame pai
◼ top - A resposta é exibida no corpo inteiro da janela
◼ framename - A resposta é exibida em um iframe nomeado
12
Formulários HTML

◼ Os principais elementos de formulários utilizados no HTML são:

<input> – Define um campo de entrada de dados;
<textarea> – Define uma área de texto;
<button> – Define um botão;
<select> – Define uma lista selecionável, também conhecida como drop-down;
<option> – Define uma lista de opções dentro de um drop-down;
<optgroup> – Define um grupo de opções;
<fieldset> – Define um grupo de campos;
<label> – Define um rótulo ou legenda para um campo ou controle do formulário;
<output> – Define elementos de saída para o formulário;
<legend> – Define um título para o conjunto de campos.

13
Formulários HTML

◼ A tag <input> pode ser considerada a principal que vai dentro de

um formulário HTML.
◼ Para usá-la precisamos definir o atributo type.

14
Formulários HTML

◼ Lista de Types:

15
Formulários HTML

16
Formulários HTML - Validação

◼ A importância da validade dos dados concorre com a importância da utilização das

tags corretas e que permitam a melhor experiência possível aos usuários e evite
erros.

◼ A validação é um processo que pode, e deve, ocorrer tanto no lado cliente quanto
no lado servidor.

◼ Até há bem pouco tempo, para validar um formulário era necessário fazer uso de
Javascript. Entretanto, na HTML5 é possível fazê-lo de forma nativa, sem o uso de
linguagens de programação.

17
Formulários HTML – Outros Atributos
Atributo Função Comentário

Utilizado para dar uma dica ao

Exibir um texto no campo de
placeholder usuário sobre o dado a ser
input.
inserido.

Determinar se um campo é Utilizado na validação dos dados

required
obrigatório. de um formulário.

Utilizado quando desejamos que,

autofocus Fixar o foco no campo. ao carregar o formulário, um
determinado campo seja focado.

Validar o valor de um campo com

O campo de tel. é um bom
base em uma expressão regular.
exemplo de utilização desse
(As RegEX – expressões
atributo. Com ele podemos, por
pattern regulares – podem ser
exemplo, determinar a quantidade
consideradas um recurso de
de caracteres e o formato
linguagem de programação para a
esperado para um campo.
análise e manipulação de texto.)
18
Formulários HTML - Validação

◼ Podemos verificar se o dado inserido em um campo é consistente com o seu tipo e/ou padrão
(pattern).
◼ Ex: type email.
◼ Utilização do atributo pattern, sendo que, neste caso, é você quem define o que um campo
precisa conter para ser considerado válido. Por exemplo: determinar o formato desejado
para um campo que receba um número de telefone.
◼ Podemos definir que ele contenha o DDD, com dois caracteres numéricos, seguido
por dois conjuntos de números – um contendo 5 e outro contendo 3 ou 4 caracteres
– o que geraria este código: pattern=“[0−9]2 [0-9]{5}-[0-9]{3,4}$”.

◼ Que verifica se um campo obrigatório foi preenchido.

◼ Atributo required.
19
Exemplo
◼ Criando o formulário do hotel com os seguintes campos:
◼ Nome
◼ Sexo
◼ Email
◼ Data de chegada
◼ Número de noites
◼ Número de hóspedes
◼ Mensagem
20
Exemplo
◼ Criando o formulário do hotel com os seguintes campos:
◼ OLHAR UMA DAS POSSÍVEIS SOLUÇÕES NO TEAMS.

21
Atividade

22
Atividade Individual

◼ Criar formulários para temas escolhidos no projeto.

◼ Devem ser componentes mínimos: form, fieldset, div, label, input,

output, textarea e button.

23
Referências
◼ HOMEHOST. Formulário HTML: criando forms HTML e enviando dados. Disponível em:
https://www.homehost.com.br/blog/tutoriais/formulario-html/ Acesso em: 04/08/2022.
◼ [1] TERUEL, Evandro C. HTML 5 Guia Prático. 2ª Ed. São Paulo: Érica, 2014. Página 23 a 33.
Disponível em: https://integrada.minhabiblioteca.com.br/#/books/9788536519296/
◼ Elementos do formulário HTML. Disponível em:
https://www.w3schools.com/html/html_form_elements.asp. Acesso em 01 de julho de 2020.
(Acesse com o Chrome, clique com o botão direto e selecione traduzir para o português).

24
Próxima Aula

◼ CSS - Definição
◼ CSS -Sintaxe & Seleção de elementos

25