Name	Name	Last commit message	Last commit date
parent directory ..
README.md	README.md

HTML parte 6

Elementos HTML de entrada, eventos e formulários
e o AvatarCreator 💄

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 <iframe width="100%" height="100" src="https://jsfiddle.net/fegemo/xxemf1eq/embedded/result,html,js/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
mouseover vs mousemove vs mouseout <iframe width="100%" height="200" src="https://jsfiddle.net/fegemo/1eoacrkm/embedded/result,html,js/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

Na última aula... (4/4)

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

Roteiro

Elementos HTML de entrada
Elementos HTML de escolha
Envio de formulários e validação
AvatarCreator 💄

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..."> 
<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 ::: result
:::

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">

<label>Cidade:
    <input id="cidade">
</label>
```
  ::: result
  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 ::: result

Remetente:

:::

Outros semelhantes à caixa de texto

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

Números, Escala e Cor

Formato:

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

::: result . background-color:white; margin-top: 1.25em
:::

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

Data e Hora

Formato:

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

::: result . display: flex; flex-direction: column; margin-top: 2.25em; :::

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">: (1) Pegar (2) Definir

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 ::: result
  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>

::: result
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)

::: result .push-right margin-left: 1em; margin-top: 1.25em Sabor da pizza: Marguerita Frango ::: Formato: ```html Sabor da pizza: Marguerita Frango ```
Atributos:
- selected, para o option, para deixar selecionado
- multiple, para o select, para permitir mais de um option

Interagindo via JavaScript (2)

Verificando se um checkbox está marcado: Inscrever? 💻 Executar

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

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

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

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>`	<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:

Cadastrar

<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> 
```
Também há botões que não fazem nada, mas podem ter algum comportamento associado (via JavaScript)
```
<button type="button">Ver detalhes</button> 
```

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>

::: result Digite seu login: Entrar :::

Outros Tipos de Restrições

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

AvatarCreator 💄

Gerador de avatares

O AvatarCreator 💄
Eventos de formulários
- Foco: blur e focus
- Teclado: keydown e keyup
- Modificação: change, input
Estilizando campos de formulários

Atividade de Hoje

Completar a página do "AvatarCreator" 💄
Baixe os arquivos contendo o HTML e faça os exercícios
- Leia as instruções detalhadas no arquivo README.md. No geral:
  1. Possibilitar o usuário:
    - Escrever o nome
    - Selecionar uma cor da pele
    - Escolher um cabelo
    - Colocar/remover acessórios (desafios)

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)
<iframe width="700" height="170" src="//jsfiddle.net/fegemo/novwcd56/embedded/result,js/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0" class="push-right bordered rounded"></iframe> (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 */
}

::: result Desabilitado :::

Estilizando campos em diferentes estados

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

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

::: result :::

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

Referências

Capítulo "A Form of Madness" do livro online diveintohtml5.info
Capítulo 14 do livro
Mozilla Developer Network (MDN)

Files

html6

Directory actions

More options

Directory actions

More options

Latest commit

History

html6

Folders and files

parent directory

README.md

HTML parte 6

Elementos HTML de entrada, eventos e formuláriose o AvatarCreator 💄

Na última aula... (1/4)

Na última aula... (2/4)

Na última aula... (3/4)

Na última aula... (4/4)

Roteiro

Elementos HTML de entrada

Interação "livre" com usuário

Caixa de texto (p/ usuário digitar)

Rótulos (ou etiquetas)

Caixa de texto para e-mail

Outros semelhantes à caixa de texto

Números, Escala e Cor

Data e Hora

Interagindo via JavaScript

Elementos HTML de escolha

Pegando a escolha do usuário

Checkbox: caixinha de marcação

Radio: escolha dentro de um grupo

Select e options (lista de opções)

Interagindo via JavaScript (2)

Outros elementos de dados

Envio de Formulários e Validação

Enviando dados e verificando

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

Formulário e Botões

Botões de submissão e reset

Validação e Restrições nos Campos

Outros Tipos de Restrições

AvatarCreator 💄

Gerador de avatares

Atividade de Hoje

Eventos de formulários

Estilizando campos de formulários

Estilizando campos em diferentes estados

Referências

Elementos HTML de entrada, eventos e formulários
e o AvatarCreator 💄

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