bg cover

Formulários e metadados

Prof. Me. Danilo Bueno

O que são formulários ?

Um formulário é um conjunto de campos de entrada que permitem ao usuário inserir dados e enviá-los para o servidor.
Os formulários são usados para coletar informações do usuário, como nome, e-mail, senha, comentários, etc.
Eles são essenciais para interações dinâmicas em sites, como cadastro, login, pesquisa, entre outros.

A anatomia de um formulário

Um formulário básico contém três partes:

Um elemento <form> que envolve todos os elementos de controle do formulário;
Um ou mais pares de elementos <label> e entrada (<input>, <textarea>, etc.) que permitem ao usuário inserir dados;
Um botão de envio <button> que submete os dados do formulário para o servidor.

1. O elemento `<form>`

É o contêiner para os elementos de entrada do formulário.
Ele pode ter atributos como:
- action: URL para onde os dados serão enviados.
- method: método HTTP usado para enviar os dados.

<form action="/submit" method="POST">
  <!-- Campos do formulário aqui -->
</form>

2. Elementos de entrada

O elemento <input> é o mais comum e pode ter diferentes tipos

<form action="/submit" method="POST">
  <input type="text" name="nome" id="nome" />
</form>

Elemento <input>

Os atributos:

type: define o tipo de entrada (existem 22 tipos)
name: nome do campo, usado para identificar os dados no servidor
id: identificador único do campo, usado para associar o <label> ao campo

Elemento <label>

O elemento <label> é usado para associar um rótulo a um campo de entrada.
Ele melhora a acessibilidade e a usabilidade, permitindo que o usuário clique no rótulo para focar no campo de entrada.

<form action="/submit" method="POST">
  <label for="nome">Nome:</label>
  <input type="text" name="nome" id="nome" />
</form>

3. Botão de envio

O botão de envio <button> é usado para enviar os dados do formulário para o servidor.
Ele pode ter um tipo submit, button ou reset.

<form action="/submit" method="POST">
  <label for="nome">Nome:</label>
  <input type="text" name="nome" id="nome" />

  <button>Enviar</button>
</form>

Testando o envio de dados

Quando o usuário clica no botão de envio, os dados do formulário são enviados para o servidor.
O servidor pode processar os dados e retornar uma resposta.
Para testar: https://formtester.goodbytes.be/post.php

<form action="https://formtester.goodbytes.be/post.php" method="POST">
  <label for="nome">Nome:</label>
  <input type="text" name="nome" id="nome" />
  <button type="submit">Enviar</button>
</form>

Outros tipos para `<input>`

type="password": para entrada de senha
type="email": para entrada de e-mail
type="number": para entrada de números
type="tel": para entrada de telefone
type="url": para entrada de URL
type="search": para campos de pesquisa

bg cover

Mais tipos para `<input>`

type="color": para entrada de cor
type="range": para entrada de intervalo
type="file": para upload de arquivos
type="hidden": para campos ocultos

Tipos de campos de data e hora

date, datetime-local, month, time e week

bg contain

Escolha para `<input>`

o HTML também permite que os usuários selecionem dados usando listas de múltipla escolha .

Os tipos mais comuns são:

type="radio": uma escolha de uma lista de opções.
type="checkbox": várias escolhas de uma lista de opções.

Input tipo <radio>

O elemento <radio> é usado para seleção única em um grupo de opções.
O atributo name deve ser o mesmo para que o navegador entenda que faz parte do mesmo grupo.

<form action="/submit" method="POST">
  <label for="opcao1">Sábado</label>
  <input type="radio" name="dia" id="opcao1" value="sabado" />

  <label for="opcao2">Domingo</label>
  <input type="radio" name="dia" id="opcao2" value="domingo" />
</form>

Input tipo <checkbox>

É usado para seleção múltipla em um grupo de opções.
Deve ter um name único. O atributo value é usado para identificar a opção selecionada.

<form action="/submit" method="POST">
  <label for="opcao1">Sábado</label>
  <input type="checkbox" name="sabado" id="opcao1" />

  <label for="opcao2">Domingo</label>
  <input type="checkbox" name="domingo" id="opcao2" />
</form>

<select> e <option>

É usado para criar uma lista suspensa de opções.
Cada opção é definida usando o elemento <option>.

<form action="/submit" method="POST">
  <label for="estados">Escolha um estado:</label>
  <select name="estados" id="estados">
    <option>São Paulo</option>
    <option>Paraná</option>
  </select>
</form>

O atributo value

O atributo value é usado para definir o valor enviado ao servidor quando o formulário é enviado.
Se o atributo value não for especificado, o texto dentro do elemento <option> será usado como valor.

<form action="/submit" method="POST">
  <label for="estados">Escolha um estado:</label>
  <select name="estados" id="estados">
    <option value="SP">São Paulo</option>
    <option value="PR">Paraná</option>
  </select>
</form>

Exibindo uma primeira opção

Às vezes, você deseja que a primeira coisa seja exibida em uma seleção ser algo como “Escolha um”

<form action="/submit" method="POST">
  <label for="estados">Escolha um estado:</label>
  <select name="estados" id="estados">
    <option disabled hidden selected>Selecione um estado</option>
    <option value="SP">São Paulo</option>
    <option value="PR">Paraná</option>
  </select>
</form>

Atributos utilizados

disabled: impede que a opção seja selecionada.
hidden: oculta a opção da lista suspensa.
selected: define a opção como selecionada por padrão.

Exemplo:

<option disabled hidden selected>Selecione um estado</option>

Mais atributos para <input>

required: torna o campo obrigatório.
autofocus: foca no campo quando a página é carregada.
placeholder: indicar como o usuário deve preencher.

<form action="/submit" method="POST">
  <input
    type="text"
    name="nome"
    id="nome"
    placeholder="Digite seu nome"
    required
    autofocus
  />
</form>

Entrada de várias linhas

O elemento <textarea> é usado para entrada de texto de várias linhas.

<form action="/submit" method="POST">
  <label for="comentario">Comentário:</label>
  <textarea
    name="comentario"
    id="comentario"
    rows="4"
    cols="50"
    placeholder="Digite seu comentário aqui..."
  ></textarea>
</form>

Validação de formulários

Certificar de que os dados sejam enviados no formato correto e não causam problemas de segurança.

Existem dois tipos de validação:

client-side: feita pelo navegador antes de enviar os dados.
server-side: feita pelo servidor após receber os dados.

Não decida entre usar a validação do lado do cliente ou do servidor - você precisará de ambas.

Metadados

Metadados são dados sobre dados.

bg right

O que são metadados?

Metadados são um conjunto de dados que fornecem informações sobre outros dados.
Eles fornecem informações contextuais que ajudam a descrever, classificar e organizar dados.

<head>
  <title>Exemplo de Metadados</title>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width" />
</head>

Metadados nomeados

Elementos <meta> incluem atributos de nome e conteúdo
Exemplos: autor, descrição, palavras-chave, robots, etc.

<head>
  <meta name="author" content="Seu Nome" />
  <meta name="description" content="Descrição da página" />
  <meta name="robots" content="noindex, nofollow" />
  <!-- Não use mais o atributo `keywords`
    <meta name="keywords" content="HTML, CSS, JavaScript"> -->
</head>

bg contain

Metadados de ícone de página

O elemento <link> com o atributo rel="icon" define o ícone da página, que é exibido na aba do navegador.

<head>
  <link rel="icon" href="favicon.ico" />
</head>

O ícone deve ser um arquivo de imagem pequeno, geralmente no formato .ico, .png ou .svg.
Favicon Generator

Open Graph

Protocolo usado para integrar páginas da web com redes sociais (inventado pelo Facebook).
Ele permite que você defina como sua página será exibida quando compartilhada no Facebook, Twitter, LinkedIn, etc.

<head>
  <meta property="og:title" content="Título da Página" />
  <meta property="og:description" content="Descrição da Página" />
  <meta property="og:image" content="URL da Imagem" />
  <meta property="og:image:alt" content="Descrição da Imagem" />
  <meta property="og:url" content="URL da Página" />
</head>

Metadados de Twitter Cards

Eles são semelhantes aos metadados Open Graph, mas específicos para o Twitter.

<head>
  <meta name="twitter:title" content="Título da Página" />
  <meta name="twitter:description" content="Descrição da Página" />
  <meta name="twitter:url" content="URL da Página" />
  <meta name="twitter:image:src" content="URL da Imagem" />
  <meta name="twitter:image:alt" content="Descrição da Imagem" />
</head>

Documentação do Twitter Cards

bg contain

Ferramentas

Validação

Ferramentas de produção

Obrigado!

[email protected] · website/docs · github

Formulários e metadados

Prof. Me. Danilo Bueno

O que são formulários ?

A anatomia de um formulário

Um formulário básico contém três partes:

1. O elemento <form>

2. Elementos de entrada

Elemento <input>

Os atributos:

Elemento <label>

3. Botão de envio

Testando o envio de dados

Outros tipos para <input>

Mais tipos para <input>

Tipos de campos de data e hora

Escolha para <input>

Os tipos mais comuns são:

Input tipo <radio>

Input tipo <checkbox>

<select> e <option>

O atributo value

Exibindo uma primeira opção

Atributos utilizados

Exemplo:

Mais atributos para <input>

Entrada de várias linhas

Validação de formulários

Existem dois tipos de validação:

Metadados

O que são metadados?

Metadados nomeados

Metadados de ícone de página

Open Graph

Metadados de Twitter Cards

Ferramentas

Validação

Ferramentas de produção

Obrigado!

1. O elemento `<form>`

Outros tipos para `<input>`

Mais tipos para `<input>`

Escolha para `<input>`