[UFMS Digital] Fundamentos de Web - Videoaula do Módulo 2 - Unidade 2

Prévia do material em texto

Fundamentos de Web
Prof. Dr. Leonardo Souza Silva
Módulo 2 - Introdução às Folhas de 
Estilo em Cascata
Unidade 2 — Interação com Formulários
Formulários em HTML
● Elemento usado para realizar a entrada de dados por parte de um 
usuário.
○ A informação coletada pode ser enviada para um servidor para 
ser processada ou ser trabalhada na própria página.
● Enquanto uma página HTML em geral somente apresenta o 
conteúdo, o formulário permite coletar um dado e enviá-lo a um 
servidor.
○ Neste caso o servidor precisa estar configurado (ver Curadoria).
Formulários em HTML
● É formado por um ou mais elementos interativos(widgets):
○ Caixas de seleção, campos de texto, áreas de texto, botões, 
botões de opção, dentre outros. 
● Trabalhar com formulários não requer nada a mais do que os 
conceitos vistos até este momento no curso.
Mãos à obra…
● E se eu desejar fazer 
um formulário para 
envio de dúvidas da 
disciplina? 
A marcação 
● Elemento que define um formulário em HTML.
○ Suporta alguns atributos (opcionais), mas os principais são os 
atributos: action e method.
■ action → define o local (URL) para envio das informações.
■ method → define qual método HTTP será usado no envio das 
informações GET ou POST.
Fonte: Própria
A marcação 
● É o elemento mais usado em um formulário HTML, podendo ser 
apresentado de diferentes maneiras, dependendo do valor do 
atributo type.
TYPE DESCRIÇÃO
 Apresenta um campo de entrada de texto de uma linha.
 Apresenta um botão de opção.
 Apresenta uma caixa de seleção.
 Apresenta um botão 
 Apresenta um botão de envio do formulário.
A marcação 
● Define um rótulo para os elementos que compõem o formulário.
○ Auxilia o usuário no entendimento do formulário.
○ Útil para os leitores de tela (acessibilidade).
Fonte: Própria
Retomando 
nosso formulário…
Label Caixa de Texto
Área de Texto
Título
Subtítulo
Botão
Fonte: Própria
Retomando 
nosso formulário…
Label Caixa 
de 
Texto
Área 
de Texto
Título
Subtítulo
Botão
Fonte: Própria
Retomando nosso formulário…
Fonte: Própria
Retomando nosso formulário…
Fonte: Própria
Formulários HTML - Elementos
● 
● 
● 
● 
● 
● 
● 
● 
● 
● 
● 
Formulários HTML — 
Fonte: Própria
Formulários HTML — 
Fonte: Própria
Formulários HTML — 
Fonte: Própria
Formulários HTML — 
Fonte: Própria
Formulários HTML - 
● button
● checkbox
● color
● date
● datetime-local
● email
● file
● month
● number
● password
● radio
● range
● reset
● search
● text
● time
● url
● week
● hidden
● image
● submit
● tel
Fonte: Própria
Fonte: Própria
Fonte: Própria
Fonte: Própria
Fonte: Própria
Alguns atributos para 
ATRIBUTO DESCRIÇÃO
size Especifica a largura, em caracteres, de um campo do tipo input
placeholder Define uma dica curta para o valor esperado em um campo do tipo 
input. A dica desaparecerá assim que o usuário entre com um valor.
required Especifica que um campo é de preenchimento obrigatório.
autofocus Especifica que automaticamente após o carregamento da página o 
campo indicado receberá o foco (cursor).
Finalizando
● É importante explorar os elementos que podem ser utilizados na 
construção de um formulário, em especial, os atributos.
○ W3Schools é uma boa fonte de consulta.
■ Não se esqueça que é possível traduzir a página.
■ Oferece espaço interativo para treinar.
● Melhorar a apresentação dos elementos com o uso do CSS.
Referências
ALVES, William Pereira. HTML & CSS: guia prático. 2. ed. São Paulo: Érica, 2014. ISBN 9788536519296. 
Capítulo 2. Disponível na Biblioteca Digital da UFMS
FLATSCHART, Fábio. Html 5: embarque imediato. 1. ed. Rio de Janeiro: Brasport, 2011. Recurso on-line. ISBN 
9788574525778. Capítulo 1, Capítulo 2 e Capítulo 3. Disponível na Biblioteca Digital da UFMS. 
MAZZA, Lucas. HTML5 e CSS3: domine a web do futuro. São Paulo, SP: Casa do Código, 2014. Recurso 
on-line. ISBN 9788566250909. Capítulo 1 e Capítulo 2. Disponível na Biblioteca Digital da UFMS. 
W3 Schools. HTML Tutorial. Disponível em: https://www.w3schools.com/html/ . Acesso em maio de 2025.
W3 Schools. CSS Tutorial. Disponível em: https://www.w3schools.com/css/ . Acesso em maio de 2025.
https://pergamum.ufms.br/
https://pergamum.ufms.br/
https://pergamum.ufms.br/
https://www.w3schools.com/html/
https://www.w3schools.com/css/
Licenciamento
Respeitadas as formas de citação formal de autores de acordo com as normas 
da ABNT NBR 6023 (2018), a não ser que esteja indicado de outra forma, todo 
material desta apresentação está licenciado sob uma Licença Creative Commons 
- Atribuição 4.0 Internacional. 
https://creativecommons.org/licenses/by/4.0/
https://creativecommons.org/licenses/by/4.0/