Aula 6

Forumlários

Os formulários são usados em HTML para permitir interação entre o utilizador e o site.

O utilizador tem assim como inserir valores para tratamento do lado do servidor.

<form> </form> – Cria o formulário

Elementos

<input> – É o elemento de formulário mais usado e pode ser exibido de várias maneiras, dependendo do type atribuído.

<label> – Define um “rótulo” para os elementos de formulário. É útil para utilizadores de leitores de tela, porque o leitor de tela lerá o rótulo em voz alta quando o utilizador focar no elemento de entrada.

Nota: O atributo for da tag <label> deve ser igual ao atributo id do elemento <input> para uni-los.

<fieldset> Permite criar uma linha à volta de todo formulário

<legend> – Associa título dentro da linha do fieldset

type=”radio”

<input type=”radio”> – define um botão de seleção.

Os botões de seleção permitem que um utilizador selecione UMA dentro de um número limitado de opções.

Checkboxes

<input type=”checkbox”> – Define uma caixa de seleção, elas permites que um utilizador selecione ZERO ou MAIS opções de um número limitado de opções.

Botões

<input type=”submit”>– botão de submissão para o envio dos dados do formulário.

<input type=”reset”> – botão que permite limpar todos os dados do formulário, voltando aos valores iniciais

Atributos importantes

name=” “ – Serve para representar uma coleção de valores, enviados através de um formulário para o servidor.

action=” “ – Define a ação a ser executada quando o formulário é enviado. Normalmente, os dados do formulário são enviados para um arquivo no servidor quando o usuário clica no botão enviar.

method=” “ – Especifica o método HTTP a ser usado ao enviar os dados do formulário. Os dados do formulário podem ser enviados como variáveis de URL com method=“get” ou com o method=“post”.

Exercício:

1. Crie uma página “form.html” com um formulário semelhante ao da imagem abaixo:

Tenha em consideração:

1. Os types dos dois primeiros elementos são text e email
2. O primeiro input tem de ter um placeholder
3. O select da turma tem as options:
   • Fullstack Developer
   • Outra

Exercício 2

Objetivo: Criar um formulário simples em HTML para o registo de utilizadores, com elementos básicos de entrada de dados.

1. Estrutura do Formulário:
   • Informações Pessoais:
     • Nome Completo (Obrigatório)
     • Data de Nascimento(Obrigatório)
     • Género (Masculino, Feminino, Outro) – utilizando o elemento <select>
   • Informações de Conta
     • Endereço de E-mail (Obrigatório e validação de formato)
     • Palavra-passe (Obrigatório e oculto)
     • Confirmar Palavra-passe(Obrigatório e oculto)
   • Preferências de Comunicação:
     • Aceitar Receber Novidade por E-mail (caixa de seleção)

Exercício:

1. Requisitos Técnicos:
   • Utilizar elementos básicos de formulário como <form>, <input>, <label> e <select>.
   • Incorporar o atributo required para indicar campos obrigatórios.
   • Utilizar o atributo type nos campos de entrada para especificar o tipo de informação (por exemplo, type=”text”, type=”email”, type=”password”).
   • Utilizar o atributo placeholder para fornecer dicas sobre o formato de entrada.
   • Incluir um botão de submissão (<input type=”submit”>) para enviar o formulário.
2. Desafio extra:
   • Experimentar com o elemento <fieldset> para agrupar e organizar as secções do formulário.