Aula 4 - Desenvolvimento WEB

Desenvolvimento WEB

Aula 4 - Introdução a Formulários em HTML
Professor: Lucas Sbaraini

Introdução a Formulários em HTML

Os formulários são essenciais para a interação dos usuários com páginas web. Eles são amplamente utilizados para cadastros, login, pesquisas e diversas outras finalidades.

Estrutura Básica do <form>

O elemento <form> é a base de qualquer formulário HTML e contém os campos de entrada e botões de envio.

Um formulário HTML é um elemento que permite a entrada de dados do usuário e seu envio para um servidor para processamento.

Multiple Choice

O que define um formulário em HTML?

• 1️Apenas um conjunto de botões

• Um elemento para entrada de dados e envio para o servidor

• Uma caixa de texto dentro de uma página

• Apenas um botão de envio

Métodos GET e POST

📌 Diferença entre os métodos:

• GET: Envia os dados na URL, adequado para pesquisas.

• POST: Envia os dados no corpo da requisição, mais seguro para informações sensíveis.

Dropdown

1️⃣ O método ​

Select answer

é mais seguro para enviar dados confidenciais.
2️⃣ O método ​

Select answer

exibe os dados na URL e é útil para buscas.

Principais Campos de Entrada

• <input type="text">: Entrada de texto

• <input type="password">: Senha

• <input type="email">: E-mail

• <input type="number">: Números

• <textarea>: Texto longo

• <select> + <option>: Lista suspensa

• <input type="radio">: Escolha única

• <input type="checkbox">: Múltipla escolha

Validação de Formulários

• required: Torna o campo obrigatório.

• maxlength: Define um limite de caracteres.

• pattern: Usa expressões regulares para validar dados.

• placeholder: Exibe um texto explicativo no campo.

Multiple Choice

Qual desses atributos impede que um campo vazio seja enviado?

• maxlenght

• required

• placeholder

• pattern

Agrupando Campos com <fieldset>

• 📌 O que é <fieldset>?
  Um agrupador de elementos de formulário para organização e acessibilidade.

Agrupando Campos com <fieldset>

Multiple Select

📌 O <fieldset> serve para:

• Organizar campos de formulários.

• Criar caixas de seleção automática.

• Melhorar a acessibilidade do formulário.

• Definir um estilo CSS automaticamente.

Botões e Envio de Dados

• 📌 Tipos de Botões em Formulários

  • <input type="submit">: Envia os dados

  • <input type="reset">: Limpa os campos

  • <button>: Botão personalizável

Atividade Prática

Criar um formulário de login como este ao lado: