f7951e5b-9e44-4391-a362-bc31286b430e

Prévia do material em texto

DESENVOLVIMENTO 
DE SISTEMAS PHP
Maurício de Oliveira Saraiva
Catalogação na publicação: Karin Lorien Menoncin – CRB 10/2147
S243d Saraiva, Maurício de Oliveira.
 Desenvolvimento de sistemas com PHP [recurso
 eletrônico] / Maurício de Oliveira Saraiva; Jeanine dos 
 Santos Barreto; [revisão técnica: Jeferson Faleiro Leon]. – 
 Porto Alegre : SAGAH, 2018.
 ISBN 978-85-9502-322-2
 1. Computação. 2. PHP (Linguagem de programação de
 computador). I. Barreto, Jeanine dos Santos. II. Título.
CDU 004.439PHP
Revisão técnica:
Jeferson Faleiro Leon
Especialista em Formação Pedagógica
Graduado em Desenvolvimento de Sistemas
Criação e validação de 
formulários com HTML5
Objetivos de aprendizagem
Ao final deste texto, você deve apresentar os seguintes aprendizados:
 � Reconhecer o que são formulários de uma página web.
 � Desenvolver formulários em uma página web.
 � Aplicar validações em formulários de uma página web.
Introdução
Formulários web são utilizados para realizar a interação entre páginas 
HTML e um servidor de aplicação web. Essa interação ocorre pelo aten-
dimento de uma requisição do usuário, que é processada e devolvida 
pelo servidor, gerando uma resposta esperada. Existem diversos recursos 
que podem ser usados para criar formulários web com HTML5, entre eles 
os campos para edição de conteúdo, as listas para exibição de itens e os 
botões que executam ações. 
Neste capítulo, você irá estudar o que são e como criar formulários 
em uma página web, bem como aplicar validações em formulários com 
HTML5.
Formulários de uma página web
Em uma página web, um formulário é utilizado para agrupar um conjunto de 
elementos HTML com o objetivo de captar ou disponibilizar uma informação. 
Esses elementos são conhecidos por possuir atributos ou campos de formulário, 
podendo ser de diversos tipos, como campos para edição de conteúdo, listas 
de seleção de itens, caixas de múltipla escolha, botões que executam ações, 
entre outros (PRESCOTT, 2015).
Normalmente, é por meio de um formulário que um usuário consegue 
interagir com um sistema web. Essa interação ocorre em diversos momentos, 
por exemplo, na entrada do site, por meio de uma tela que realiza login; em 
uma página de contato, para enviar uma mensagem; em uma tela para realizar 
um pedido de compras; ou até mesmo em uma página que realiza pesquisas 
na intranet.
Formulários são utilizados para padronizar a entrada e a saída de dados. 
Essa padronização se dá pela apresentação dos campos que atendem a de-
terminadas funcionalidades, como um cadastro de produtos, a baixa de um 
artefato no estoque ou a exibição das características de determinado produto.
Por trás de um formulário em uma página web, exibida no navegador 
do usuário, há um servidor de aplicação que irá interagir com essa página, 
ou seja, a página web do usuário irá enviar e receber dados desse servidor 
em operações conhecidas por solicitação e resposta (FLATSCHART, 2011). 
Observe a ilustração da Figura 1.
Figura 1. Atributos da tag <form>.
Ao submeter dados em um formulário, o navegador envia essa informação 
para um servidor que fará o processamento por meio de uma linguagem de 
programação web, como o PHP. Após processar a informação, o servidor 
envia a resposta ao navegador do usuário para que possa ser exibida na tela.
Para implementar um formulário web você vai precisar de uma ferramenta 
de desenvolvimento de páginas HTML, que pode ser um simples editor de 
Criação e validação de formulários com HTML52
textos ou um Integraded Development Environment (IDE) – ou ambiente de 
desenvolvimento integrado. 
Existem diversas ferramentas no mercado, muitas delas disponibilizam 
vários recursos que facilitam e agilizam o desenvolvimento, como a apresen-
tação em destaque dos elementos no código-fonte e a opção de autocompletar 
os comandos.
No link a seguir, você encontrará mais informações 
sobre oito editores de código que são gratuitos 
(EVANGELISTA, 2017).
https://goo.gl/oucKBU
Algumas ferramentas de edição disponibilizam a facilidade de implementar e 
visualizar uma página web no mesmo ambiente, sem ter que programar linhas de 
código-fonte. Por meio de assistentes, você consegue incluir e dispor elementos 
HTML na sua página, sem se preocupar em conhecer os comandos da linguagem.
No entanto, é preciso ficar atento, pois essa facilidade coloca em risco a 
legibilidade do código-fonte, uma vez que a ferramenta irá acrescentar diversas 
linhas de código que podem poluir o seu programa, aumentado a complexidade 
de entendimento das funcionalidades implementadas.
Um ponto importante sobre os formulários é a questão da validação da 
entrada de dados. Você viu que um formulário submete informações a um 
servidor, contudo, precisa estar atento para que essas informações sejam 
coletadas de forma precisa e correta.
Imagine se em um campo data de um formulário, por exemplo, o usuário 
insere valores que não correspondem a uma data válida. Isso provavelmente irá 
comprometer a confiabilidade dos dados e reduzir a credibilidade do sistema. 
Para resolver isso, é uma boa prática validar os dados sempre que possível.
Essa validação pode ser realizada de duas formas: a primeira é feita no 
navegador do usuário, por meio de comandos que analisam os dados antes de 
enviá-los ao servidor; já a segunda forma verifica os dados no próprio servidor, 
porém antes de utilizá-los (CROWTHER et al., 2014).
3Criação e validação de formulários com HTML5
Leia mais sobre formulários web no link ou código a 
seguir (BASSO, 2017).
https://goo.gl/Y2tNbr
Agora, você irá aprender a criar formulários web e realizar validações no 
navegador do usuário com HTML5.
Como criar formulários em uma página web
Para criar um formulário em uma página web você precisa usar a tag <form>, que 
especifica a abertura de um formulário em um documento HTML. Dentro dessa 
tag, você vai colocar os atributos de seu formulário, como campos para a entrada 
ou visualização de dados, botões para submeter dados, etc. (PRESCOTT, 2015).
Form
Essa é a tag principal de um formulário web. Com ela você vai definir os atri-
butos que estabelecem o comportamento do formulário HTML, por exemplo, 
a forma como os dados serão enviados, para onde serão enviados e se serão 
validados pelo navegador. Observe a exemplificação disso na Figura 2.
Figura 2. Atributos da tag <form>.
Criação e validação de formulários com HTML54
Name
Especifica o nome do formulário da página web. É possível que uma página 
web contenha mais de um formulário, e que esses formulários apresentem 
comportamentos diferentes. Nesse sentido, o nome identifica cada um desses 
formulários no documento HTML.
Method
Define o método hypertext transfer protocol (HTTP) – ou protocolo de trans-
ferência de hipertexto – que o navegador vai usar para enviar os dados do 
formulário para o servidor. São valores possíveis desse atributo:
 � Post – os dados são enviados no corpo do formulário, de forma invisível 
para o usuário da página web.
 � Get – os dados são anexados ao endereço uniform resource locator 
(URL) – ou localizador uniforme de recursos – da página de resposta. 
Esses dados são passados abertos, podendo ser visualizados na barra 
de endereço do navegador após a presença do caractere “?”.
Action
Especifica a URL de destino que irá processar as informações enviadas pelo 
formulário. Se esse atributo não for definido, o navegador enviará os dados 
para a própria página HTML.
Autocomplete
Define uma autorização ao navegador para autocompletar o preenchimento de 
informações em campos do formulário que já foram preenchidos em outras 
oportunidades. Ativar essa opção facilita a atividade do analista que precisa 
inserir os dados repetidamente para testar programas web. São valores pos-
síveis desse atributo:
 � On – permite que o navegador complete automaticamente os campos 
a partir de valores já preenchidos pelo usuário.
 � Off – impede que o navegador complete automaticamente os valores 
dos campos,forçando que o usuário tenha que digitar os dados a cada 
submissão.
5Criação e validação de formulários com HTML5
Target
Especifica o contexto de navegação ou local em que o navegador deve exibir os 
dados submetidos pelo formulário, como uma janela, aba ou guia de navegação. 
São valores possíveis desse atributo:
 � _self – é o valor padrão, caso o atributo target não seja especificado. 
Carrega a resposta no mesmo contexto de navegação, isto é, na mesma 
guia, aba ou janela do navegador.
 � _blank – carrega a resposta em uma nova janela, aba ou guia de 
navegação.
 � _parent – carrega a resposta no contexto pai do contexto de navegação 
atual.
 � _top – carrega a resposta na janela, aba ou guia de nível superior.
 � nome_do_iframe – carrega a resposta em um iframe da página, espe-
cificado pelo nome do iframe.
Enctype
Especifica a forma como os dados são codificados antes de serem transferidos 
ao servidor web. São valores possíveis desse atributo:
 � application/x-www-form-urlencoded – é o valor padrão, caso não seja 
especificado. Define o envio de qualquer tipo de dados do formulário 
com codificação de caracteres antes do envio.
 � multipart/form-data – é utilizado para enviar arquivos para servidor 
(upload).
 � text/plain – envia qualquer tipo de dados em formato texto, sem con-
verter caracteres especiais.
Novalidate
É um atributo que não possui opções. Significa que o navegador não deve 
realizar validações automáticas pelo HTML5 nos campos do formulário, 
caso sejam definidas pelo programador. São exemplos de validação a verifi-
cação de e-mail e máscaras de formatação de dados. Caso esse atributo não 
seja informado, o navegador fará a verificação dos campos que possuírem 
validação via HTML5.
Criação e validação de formulários com HTML56
Campos de formulário
Os campos de formulário servem para capturar ou exibir informações. Existem 
diversos tipos de campos, como text, radio, checkbox, button, entre outros, 
como você pode ver nas Figuras 3 e 4. Para implementar o formulário em uma 
página web, você deve inserir os campos HTML dentro das tags <form> e 
</form> (FREEMAN; ROBSON, 2014). 
Figura 3. Campos de formulário.
Figura 4. Campos de formulário.
Input
Especifica um campo para edição de texto que pode conter diversos formatos 
para a entrada ou exibição de dados. São tipos do elemento input:
 � Text – é um campo de texto que aceita qualquer informação, como 
letras, números, etc.
7Criação e validação de formulários com HTML5
 � Password – é um campo texto que oculta os caracteres na exibição ou 
durante a digitação.
 � File – apresenta um botão para localizar um arquivo em uma pasta no 
computador.
 � Hidden – representa um campo oculto, porém com as mesmas carac-
terísticas do text.
 � Radio – cria um campo múltipla escolha que permite a seleção de 
apenas um item.
 � Checkbox – cria um campo múltipla escolha que permite a seleção de 
mais de um item.
Os campos que pertencem ao tipo input possuem os seguintes atributos:
 � Id – define um identificador para o campo.
 � Name – define um nome para o campo.
 � Size – especifica o tamanho do campo na tela.
 � Value – atribui um valor ao campo.
Botões
 � Button – apresenta um botão no formulário que pode responder a uma 
ação de clique do mouse.
 � Reset – limpa o conteúdo dos dados do formulário que foram preen-
chidos pelo usuário.
 � Submit – realiza a submissão dos dados do formulário.
Os botões possuem os seguintes atributos:
 � Id – define um identificador para o campo.
 � Name – define um nome para o campo.
 � Value – atribui um valor ao campo.
Outros campos
 � Textarea – especifica um campo para edição de textos longos. Possui 
dois atributos específicos: rows e cols, que representam, respectiva-
mente, a quantidade de linhas e colunas.
 � Select – define um campo de seleção que apresenta itens definidos. 
Pode ser de seleção única (padrão) ou múltipla (pelo atributo multiple).
Criação e validação de formulários com HTML58
O navegador irá exibir os campos de acordo com a ordem em que eles foram 
incluídos na página web, iniciando a partir do topo da página. No código-fonte, 
apresentado anteriormente, a formatação de layout foi retirada para reduzir 
espaço, contudo, você pode usar uma tabela ou formatação com cascading 
style sheets (CSS) para exibir os dados conforme apresentado na Figura 5.
Figura 5. Apresentação dos campos no navegador.
Validações em formulários web com HTML5
Em diversas situações, você precisa validar ou restringir a entrada de dados, 
conforme o formato do campo do formulário. Isso é necessário porque não 
podemos, por exemplo, incluir letras em um campo que guarda um valor 
numérico, ou armazenar um endereço de e-mail inválido digitado por engano 
pelo usuário.
Antes da versão 5 do HTML, era preciso escrever dezenas ou até centenas 
de linhas de código em linguagem Javascript ou usar frameworks específicos 
para realizar a validação de dados antes de submeter os dados de um formulário 
ao servidor. Com o HTML5, diversos atributos foram criados especificamente 
9Criação e validação de formulários com HTML5
para validar a entrada de dados pelo navegador, como máscaras para campos 
numéricos ou alfanuméricos, calendário para seleção de datas, paleta para 
seleção de cores, entre outros (SILVA, 2015).
Você viu na seção anterior os elementos mais comuns para campos de for-
mulário HTML. No entanto, deixamos para esta seção os elementos lançados no 
HTML5, que permitem aplicar validação de forma automática, proporcionando 
desempenho, produtividade e segurança no desenvolvimento de sistemas web.
Número
É possível restringir a entrada de dados em determinado campo para exigir 
que o usuário digite ou cole apenas números ou caracteres que possuem re-
lação com número, como ponto, vírgula e os sinais positivo e negativo. Essa 
validação é feita pelo atributo number.
1 <input type=“number”>
Data
O atributo date além de restringir a digitação de valores válidos em formato 
de data, apresenta a opção de exibir um calendário para que o usuário possa 
selecionar uma data sem precisar digitar qualquer valor, como apresentado 
na Figura 6.
1 <input type=“date”>
Figura 6. Exibição do campo data no navegador.
Criação e validação de formulários com HTML510
Mês
O atributo month permite a digitação de um mês e um ano conforme os pa-
drões já definidos. Além disso, disponibiliza um calendário para seleção sem 
a necessidade de digitar qualquer valor no campo.
1 <input type=“month”>
Semana
Assim como month, week permite a digitação ou a escolha via calendário de 
uma semana e um ano.
1 <input type=“week”>
Hora
O atributo time insere automaticamente uma máscara no campo que garante 
a validação do horário. Caso o usuário informe uma hora incorreta, o atributo 
corrige para o horário mais próximo.
1 <input type=“time”>
E-mail
Utilize o atributo email para validar campos de e-mail, conforme você pode 
observar na Figura 7. Essa validação identifica se o caractere “@” está presente 
no texto, bem como verifica a existência de espaços e caracteres inválidos, 
como “;” ou “+”.
1 <input type=“email”>
Figura 7. Exibição da validação do campo e-mail no navegador.
11Criação e validação de formulários com HTML5
Faixa
O atributo range apresenta uma barra de rolagem horizontal ou vertical que 
permite ao usuário selecionar valores sem a necessidade de usar o teclado. 
Uma função escrita em Javascript deve ser usada em conjunto para exibir o 
valor selecionado enquanto movimenta a barra.
1 <input type=“range” min= “0” max= “100”>
Cor
Color é um atributo que apresenta uma paleta de cores para o usuário sele-
cionar uma entre algumas opções disponíveis, como cores básicas e cores 
personalizadas. Observe um exemplo de paleta de cores na Figura 8.
1 <input type= “color”>
Figura 8. Exibição da paleta de cores no navegador.
Expressões regulares
São expressões utilizadas em diversas linguagens de programação para exe-
cutar operações complexas de tratamentode padrões em strings. No HTML5, 
são usadas com o atributo pattern para realizar a validação de formatos que 
Criação e validação de formulários com HTML512
podem ser adaptados em diversos tipos de campo, como números de telefone, 
valores alfanuméricos, formatos de CPF, moedas ou qualquer outro definido 
pelo programador (EIS; FERREIRA, 2012).
Validação de telefone
Você pode definir uma expressão regular para garantir o formato de valores 
adequados para um campo de telefone. 
1 <input type=“tel” pattern=”\d{2} \d{5}-\d{4}$” />
A expressão “\d{2}” exige que o valor inserido pelo usuário comece com 
dois dígitos numéricos seguidos de um espaço. Na sequência, a expressão 
“\d{5}-” exige cinco dígitos numéricos e um traço. Após, a expressão “\d{4}” 
requer mais quatro dígitos numéricos. Por fim, o comando se encerra com o 
caractere “$”.
Caso o usuário não informe valores no formato esperado, o navegador 
irá informar que o formato não está conforme o exigido e não realizará a 
submissão da página. Veja o exemplo na Figura 9.
Figura 9. Validação de campo com expressão regular.
Leia mais sobre expressões regulares com HTML5 no 
link ou código a seguir (EIS, 2016). 
https://goo.gl/rrDeLw
13Criação e validação de formulários com HTML5
Além dos atributos do tipo input, como number, date e time, existem atributos que 
implementam outras validações ou dicas, permitindo maior interação com o usuário: 
 � Maxlength – delimita o tamanho máximo do campo, impedindo que o usuário 
insira mais caracteres que o limite definido.
 � Minlength – requer que o usuário insira um número mínimo de caracteres.
 � Required – exige o preenchimento do campo antes de submeter o formulário.
 � Placeholder – insere uma dica no valor do campo. A dica some quando o usuário 
coloca algum valor no campo.
 � Autofocus – atribui o foco em determinado campo quando a página web é 
carregada.
 � Title – apresenta uma mensagem de dica quando o usuário posiciona o mouse 
sobre o campo na tela do navegador.
BASSO, F. Meu primeiro formulário HTML. [S.l.]: MDN, 2017. Disponível em: <https://
developer.mozilla.org/pt-BR/docs/Web/Guide/HTML/Forms/Meu_primeiro_formu-
lario_HTML>. Acesso em: 30 nov. 2017.
CARLOS EDUARDO. HTML5: acessibilidade com o atributo accesskey. [S.l.]: Kadunew, 
2012. Disponível em: <http://www.kadunew.com/blog/html/html5-acessibilidade-
-com-o-atributo-accesskey>. Acesso em: 30 nov. 2017.
CROWTHER, R. et al. HTML5 em ação. São Paulo: Novatec: 2014.
EIS, D. O básico sobre expressões regulares. [S.l.]: Tableless, 2016. Disponível em: <https://
tableless.com.br/o-basico-sobre-expressoes-regulares/>. Acesso em: 30 nov. 2017.
EIS, D.; FERREIRA, E. HTML5 e CSS3: com farinha e pimenta. São Paulo: Lulu.com, 2012.
EVANGELISTA, L. Editor de código gratuito: 8 opções para você escolher o seu. [S.l.]: 
KingHost, 2017. Disponível em: <https://www.kinghost.com.br/blog/2017/02/editor-
-de-codigo-gratuito-8-opcoes-para-voce-escolher-o-seu/>. Acesso em: 30 nov. 2017.
FLATSCHART, F. HTML5: embarque imediato. Rio de Janeiro: Brasport, 2011.
FREEMAN, E.; ROBSON, E. Use a cabeça! Programação em HTML 5. Rio de Janeiro: Alta 
Books, 2014.
PRESCOTT, P. HTML 5. [S.l.]: Babelcube, 2015.
SILVA, M. S. Fundamentos de HTML5 e CSS3. São Paulo: Novatec, 2015.
Criação e validação de formulários com HTML514
Conteúdo: