cefet_front_end

HTML parte 6

Elementos HTML de entrada, eventos e formulários

---

Na última aula… (1/4)

• Objeto Global Window

  window.alert('mensagenzinha feia');                     // retorna undefined
  

• Objetos dentro do window
  • window.document: Acesso ao DOM (estrutura HTML da página)
  • window.navigator: Acesso a características do navegador como geolocalização, reconhecimento de fala etc.
  • window.Math: Funções matemáticas, como Math.sin, Math.floor, Math.round
  • window.location: Informações sobre o endereço (a URL) da página
• Convenção: omitir o window

---

Na última aula… (2/4)

• Alterando a propriedade style:

   botaoEl.style.width = '80%';           // define largura como 80%
   botaoEl.style.paddingTop = '2px';      // padding-top vira paddingTop
  

• CSS ➡️ JavaScript
  • background-color ➡️ backgroundColor
  • border-radius ➡️ borderRadius
  • margin ➡️ margin

---

Na última aula… (3/4)

• click vs mousedown vs mouseup
• mouseover vs mousemove vs mouseout

---

Na última aula… (4/4)

• Obtendo as posições do mouse por meio das propriedades e.pageX e e.pageY

---

Roteiro

1. Elementos HTML de entrada
2. Elementos HTML de escolha
3. Envio de formulários e validação

---

Elementos HTML de entrada

Interação “livre” com usuário

• O elemento input e alguns tipos:
  • texto, e-mail, telefone, número, cor
• Rótulos: relembrando o label
• O elemento textarea
• Interagindo via JavaScript

---

Caixa de texto (p/ usuário digitar)

• Elemento HTML onde o usuário pode digitar qualquer coisa
• Formato:

  <input id="palavra" type="text" placeholder="Digite..."> <!-- exemplo abaixo -->
  <input id="palavra">
  <input>
  

  • type="text" é o valor padrão para o input
  • placeholder="um texto..." define um texto de ajuda que só aparece quando não há nada digitado

---

Rótulos (ou etiquetas)

• Tipicamente atribuímos rótulos (<label></label>) aos campos (input)
  • Podemos clicar nos rótulos e o foco será movido para dentro do input a ele associado
  • Há 02 formas de associação:

    <label for="cidade">Cidade: </label><input id="cidade">
    <!-- ...ou... -->
    <label>Cidade:
        <input id="cidade">
    </label>
    

    Cidade:

---

Caixa de texto para e-mail

• Idêntico à caixa de texto, porém o navegador espera um e-mail válido
• Formato:

  <label>Remetente:
    <input id="remetente" type="email">
  </label>
  

  • Em smartphones, os navegadores mudam o layout do teclado colocando “@” em posições mais fáceis

Remetente:

---

• Pesquisa
  <input type="search">:
• URL
  <input type="url">:
• Telefone
  <input type="tel">:

---

• Formato:

  <input type="number" step="0.5">
  <input type="range" min="0" max="100" step="1">
  <input type="color">
  

  2. 
     
  3. 
     
• number é indicado para digitação de um número específico
• range para uma escala (e.g., quente ou frio?)
  • number e range aceitam min, max e step (incremento)
• color para pegar o valor hexadecimal de uma cor

---

• Formato:

  <input type="date">
  <input type="time">
  <input type="datetime-local">
  <input type="month">
  <input type="week">
  

• Observações:
  • date é apenas uma data, time apenas um horário
  • datetime-local é um dia/horário

---

Interagindo via JavaScript

• Todo <input> possui o atributo value, que é o valor padrão. Exemplo:
  • <input type="number" value="5">:
• Para pegar (get) ou definir (set) o valor atual via JavaScript, (a) pegamos o elemento no DOM e (b) acessamos a propriedade value:

  let quantidadePizzasEl = document.querySelector('#qtde-pizzas');
  
  
  // podemos pegar o valor atual no console acessando .value:
  let qtdePizzasAtual = quantidadePizzasEl.value; // botão 1
  alert(qtdePizzasAtual);
  
  
  // ou podemos definir um novo valor para o elemento:
  quantidadePizzasEl.value = 25;                  // botão 2
  

---

Elementos HTML de escolha

Pegando a escolha do usuário

• O input do tipo checkbox
• O input do tipo radio
• O elemento select e suas options
• Interação via JavaScript

---

Checkbox: caixinha de marcação

• Formato:

  <label>
    <input id="emails" type="checkbox" value="sim"> Inscrever?
  </label>
  

  • !! Se não colocarmos um <label></label>, o usuário precisará clicar exatamente na caixinha

    Inscrever (com label)?

    Inscrever (com label)?
• Atributos:
  • checked, para deixar previamente marcado

    <input id="..." type="checkbox" checked>
    

---

Radio: escolha dentro de um grupo

• Formato:

  <label>
    <input type="radio" name="cor" value="azul">Azul
  </label>
  <label>
    <input type="radio" name="cor" value="verde">Verde
  </label>
  

  

  Azul Verde
• Atributo name: define qual é o nome do input ao enviar o fomulário para o servidor
• Repare que apenas uma cor pode ser escolhida
  • porque os dois <input> têm o mesmo name

---

Select e options (lista de opções)

Sabor da pizza: Marguerita Frango

Formato:

  <label for="sabor">Sabor da pizza:</label>
  <select id="sabor">
    <option value="marg">Marguerita</option>
    <option value="muzza" selected>Frango</option>
  </select>

• Atributos:
  • selected, para o option, para deixar selecionado
  • multiple, para o select, para permitir mais de um option

---

Interagindo via JavaScript (2)

1. Verificando se um checkbox está marcado: Inscrever?

   let desejaInscreverEl = document.querySelector('#inscrever');
   let estaMarcado = desejaInscreverEl.checked;   // elemento.checked: true/false
   

2. Pegando qual opção selecionada em um select: MargueritaMuzzarela

   let saborPizzaEl = document.querySelector('#pizza');
   let sabor = saborPizzaEl.value;   // elementoSelect.value: valor da option
   

3. Pegando qual a opção marcada em um grupo de radio: Azul Verde

   let corMarcadaEl = document.querySelector('[name="cor"]:checked');
   let cor = corMarcadaEl.value;   // elemento.value: valor do input
   

   • Repare o seletor: todo elemento com atributo name="cor" e que esteja no estado :checked (marcado)

---

Outros elementos de dados

Tipo	Markup	Exemplo
Seleção de arquivo	<input type="file">
Campo de senha	<input type="password">
Texto oculto	<input type="hidden">
Texto multi-linha	<textarea></textarea>

---

Envio de Formulários e Validação

Enviando dados e verificando

• O elemento HTML <form></form>
• Botões: submit, reset e button
• Validação de campos e formulário

---

O Elemento HTML <form>...</form>

• Um formulário é um conjunto de campos de dados (i.e., entrada/escolha) que pode ser enviado a um servidor Web. Exemplos:

  Ao se cadastrar no Facebook (ou qualquer site)

  • Ao preencher e enviar um questionário
  • Ao editar seu perfil em algum site

• Além de enviar os dados, podemos também configurar os campos com algumas restrições (e.g., campo obrigatório)

---

Formulário e Botões

• Um form agrupa inputs para, posteriormente, serem enviados a um servidor (por exemplo, para cadastrar um usuário):

  <form action="cadastrar-usuario.php"> <!-- que "página" receberá os dados -->
    <label>Nome: <input name="nome" type="text"></label>
    <label>E-mail: <input name="email" type="email"></label>
    <label>Senha: <input name="senha" type="password"></label>
  
    <button type="submit">Enviar</button> <!-- veja no próximo -->
    <button type="reset">Limpar</button>  <!-- slide -->
  </form>
  

• Exemplo de formulário

---

Botões de submissão e reset

• Dentro de um formulário, um botão do type="submit" envia os dados para o servidor:

  <button type="submit">
    <img src="icone.png">Cadastrar <!-- podemos colocar ícones nos botões =) -->
  </button>
  

• Um botão type="reset" volta os valores digitados para seus value padrão

  <button type="reset">Limpar</button> <!-- muito pouco usado -->
  

• Também há botões que não fazem nada, mas podem ter algum comportamento associado (via JavaScript)

  <button type="button">Ver detalhes</button> <!-- type="button" é o padrão -->
  

---

Validação e Restrições nos Campos

• Podemos usar o atributo HTML required para marcar um campo como de preenchimento obrigatório:

  <form action="verifica-login.php">
    <label>Digite seu login:
      <input type="text" id="usuario" required>
      <input type="password" id="senha" required>
    </label>
    <button type="submit">Entrar</button>
  </form>
  

  Digite seu login: Usuário: Senha:

---

Outros Tipos de Restrições

Tipo	Código HTML	Exemplo
Campo obrigatório	<input required>
Quantidade de caracteres	<input maxlength="2">
Número mínimo	<input type="number" min="5">
Número máximo	<input type="number" max="10">
Padrão	<input pattern="[0-7]{4}">
Desabilitar	<input disabled>

---

Eventos de formulários

• Lembrando: eventos são associados a elementos HTML e causam a invocação de uma função “manipuladora” (event handler)
• Eventos de entrada de dados:
  • change ou input (modificou)
  • blur (perdeu foco)
  • focus (ganhou foco)
  • keydown (pressionou uma tecla)
  • keyup (liberou uma tecla)

• (Muitos) outros tipos: Eventos na MDN

---

Estilizando campos de formulários

• Campos de “entrada livre” (text, number, email etc.) podem ser facilmente estilizados. Exemplos:

  input[type="number"] {  /* todos os campos de números */
    width: 4em; /* largura de 4 caracteres */
  }
  
  input[disabled],    /* todos que estejam disabled */
  button[disabled] {
    cursor: not-allowed;
    opacity: 0.65;
  }
  
  input.discreto {    /* criei uma classe */
    background-color: transparent;
    border-width: none; /* tira o fundo e a borda */
  }
  

---

Estilizando campos em diferentes estados

• É possível estilizar campos em diferentes situações

  input:focus { /* elemento que está com o foco */
    outline: 3px solid LightSkyBlue;
  }
  input:invalid { /* elementos com erro */
    border: 1px solid red;
  }
  

• É importante ressaltar o elemento que está com o foco
• Além de mostrar os que estão com erro

---

Referências

1. Capítulo “A Form of Madness” do livro online diveintohtml5.info
2. Capítulo 14 do livro
3. Mozilla Developer Network (MDN)