DESENV.
WEB EM
HTML5, CSS,
JAVASCRIPT E PHP
Profº: Luiz Felipe Cirqueira dos Santos
LINGUAGEM DE MARCAÇÃO DE
HYPERTEXTO HTML
FORMULÁRIOS
INTRODUÇÃO
Ferramentas essenciais para coleta de dados
do usuário;
Permitem que os usuários insiram e enviem
informações ao servidor para processamento;
Processos de login, registro, pesquisas, e-
commerce.
Importância
Cruciais para interação entre o usuário e o
aplicativo web;
Permitem coleção de informações de
maneira estruturada e organizada;
Facilita a comunicação e a execução de
operações importantes, como autenticação
de usuários e envio de pedidos.
Tags e atributos utilizados nos
formulários
<form> -> Define um formulário Html;
action -> Especifica a url para onde os dados serão
enviados;
method -> Especifica o Método (Get ou Post) usado ao
enviar os dados;
Tags e atributos utilizados nos
formulários
<input> -> Define um campo de entrada;
type -> Especifica o tipo de entrada;
name -> Nome do campo, usado para identificar dados
no servidor;
value -> Valor inicial do campo;
placeholder -> Texto que aparece no campo, antes de
inserir os dados;
Tags e atributos utilizados nos
formulários
required -> Define o campo como
obrigatório;
readonly -> Somente leitura;
disabled -> Campo desabilitado;
maxlength -> Limite de caracteres;
Tags e atributos utilizados nos
formulários
<label> -> Define um rótulo para um
campo de entrada;
for -> Relaciona um rótulo a um
campo de entrada (ID do campo);
<textarea> -> Área de texto com
múltiplas linhas;
rows -> Número de linhas;
cols -> Número de colunas;
Tags e atributos utilizados nos
formulários
<select> -> Define uma lista suspensa
(drop-down);
multiple -> Permite seleção múltipla;
<option> -> Define uma opção dentro do
select;
selected -> Define a opção selecionada
como padrão;
Tags e atributos utilizados nos
formulários
<button> -> Define um botão;
type -> Especifica o tipo de botão
(submit, button, reset);
<fieldset> e <legend> -> Agrupa campos
relacionados dentro de um formulário e
define uma legenda para o grupo.
Exemplo 1 - Formulário de Registro Simples
Exemplo 2 - Formulário de Envio de Feedback
Exemplo 3 - Formulário de Pedido
Desafio 1 - Formulário de Contato
Crie um formulário de contato que inclua os seguintes
campos: Nome, Email, Assunto, Mensagem. Todos os
campos devem ser obrigatórios, e o campo de Email deve
validar um endereço de email.
Desafio 2 - Formulário de Pesquisa
Crie um formulário de pesquisa que inclua os seguintes
campos: Nome, Idade (campo de número entre 1 e 120),
Gênero (opções de rádio), Interesses (checkboxes para
diferentes interesses). Adicione um botão para enviar o
formulário.
Desafio 3 - Formulário de Inscrição para
Newsletter
Crie um formulário de inscrição para uma newsletter que
inclua os seguintes campos: Nome e Email. O campo de
Email deve validar um endereço de email, e ambos os
campos devem ser obrigatórios.
Dúvidas
