Programação

Disciplina

Prof. Santos Carvalho

WEB Formulários e Elementos de Formulário

37
Aula
Módulo 10 – Formulários
Aula 37

Nessa aula!

01 form

02 fieldset, legend, label e input text

03 Validação de formulários com JavaScript

03

Aula 06
 Aula 02

Nesta aula, vamos explorar os principais

elementos HTML que compõem um formulário
web, bem como os atributos e eventos
associados a esses elementos.
 Aula 02

• Introdução (5 minutos)
• A importância dos formulários em aplicações web e como eles permitem
aos usuários interagir com o site.
 Aula 02

• Os formulários são uma parte fundamental de qualquer aplicação web,

pois permitem que os usuários interajam com o site de
maneira ativa e personalizada.
• Através dos formulários, os usuários podem enviar
informações, como cadastro de usuários, pesquisa,
comentários, pedidos, entre outros.
 Aula 02

• Os formulários também permitem que o site colete informações do

usuário para personalizar a experiência do usuário e fornecer um melhor
atendimento ao cliente.
• Por exemplo, um site de compras pode usar um
formulário para coletar informações de pagamento
e envio, permitindo que o usuário faça a compra
com mais facilidade.
 Aula 02

• Além disso, os formulários são importantes para manter a segurança do

site, pois permitem a validação de informações fornecidas pelos usuários,
como senhas e endereços de e-mail.

• Isso ajuda a evitar o envio de spam, ataques de

phishing e outros tipos de ataques maliciosos.
 Aula 02

• Em resumo, os formulários são uma parte crítica de qualquer aplicação

web, permitindo aos usuários interagir com o site de maneira eficiente,
personalizada e segura.
 Aula 02

01 form
 Aula 02

01 form

• O elemento HTML <form> é usado para criar um formulário web em uma página
HTML.

• O formulário pode conter vários elementos de entrada, como caixas

de texto, botões de rádio, caixas de seleção e botões de envio.
 Aula 02

01 form

• O elemento <form> é usado para agrupar todos esses elementos juntos para que
possam ser enviados ao servidor quando o usuário clicar no botão de envio.
 Aula 02

01 form

• Para usar o elemento <form>, é necessário definir o atributo "action", que é o URL
do script do servidor que processa o envio do formulário.

• O atributo "method" deve ser definido como "get" ou "post", dependendo do

método de envio que se deseja usar.
 Aula 02

01 form

<form action=“enviar-form.php" method="post">

</form>
 Aula 02

02 fieldset, legend, label e input text

 Aula 02

02 form

 Dentro do elemento <form>, é possível adicionar vários elementos de entrada, cada

um com um nome e um valor associados.

 Os nomes são usados para identificar cada elemento no servidor e os valores são os
dados que serão enviados.
 Aula 02

02 form

 Quando o usuário clica no botão de envio dentro do formulário, os dados são

enviados ao servidor para processamento.

 O servidor pode então processar as informações recebidas e retornar uma resposta

adequada para o usuário.
 Aula 02

02 form
 Aula 02

02 form
 Aula 02

02 form
 Aula 02

02 form
 Aula 02

02 form
 Aula 02

03 Validação de formulários com JavaScript

 Aula 02

03 Validação de formulários com JavaScript

 A validação de formulário com JavaScript permite verificar se os dados inseridos

pelo usuário estão em um formato correto antes de enviá-los para o servidor.

 Isso ajuda a garantir que as informações recebidas sejam precisas e seguras.

 Aula 02

03 Validação de formulários com JavaScript

 Para validar um formulário com JavaScript, é necessário adicionar um evento

"submit" ao elemento <form>.

 Esse evento é acionado quando o usuário clica no botão de envio e permite que o
código JavaScript verifique se os dados estão corretos antes de enviar o formulário.
 Aula 02

03 Validação de formulários com JavaScript

 Por exemplo, para validar uma caixa de texto para nome, podemos usar o seguinte
código JavaScript: