Formulários, Cores e Imagens

Curso de Análise e Desenvolvimento de Sistemas (ADS)

Unidade Curricular: Webdesign
Professora: Jéssica Zanelato Soares
Conteúdo
● Formulários;
● Cores;
● Revisão TAG Imagem.
Formulários
Com frequência precisamos trabalhar com informações dos usuários (entrada de
dados), processá-las no servidor (processamento) e mostrar uma respostas ao
usuário (saída de dados).
Formulários
Servidor (backend)

Clientes (frontend)
Formulários
● TAG form
● Entrada de dados podem ser de duas formas:
○ GET
■ Os dados são enviados pela URL;
■ Até 128 caracteres;
■ www.meusite/produtos?nome1=valor1&nome2=valor2
● nome1 e 2: parâmetro.
● valor 1 e 2: valor a ser enviado.
○ POST
■ Independente da URL;
■ Dados de entrada fazem parte do corpo da mensagem a ser enviada ao servidor;
■ Transfere grande quantidade de dados.
Formulários
● Para entrada de dados utilizamos a TAG input dentro do formulário.
○ Representa a entrada de dados;
○ Pode ser do tipo texto, botões, imagem, seleção, etc;
○ É necessário o atributo name. Cada input do formulário deve ter um name;
○ É necessário definir o atributo type. Ele define o tipo do input que será utilizado;
○ Pode ser definido o atributo id. Será importante quando estudarmos javascript.
Formulários
Atributo type pode ser:
<input type="button">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text">
<input type="time">
<input type="url">
<input type="week">
Formulários
● TAG label é utilizada para definir um rótulo ou texto;
● Normalmente está relacionado a um input;
● O atributo for se relaciona com o atributo id do input.
Formulários
● Para entrada de dados utilizamos a TAG input dentro do formulário.
○ Utilizamos o tipo text para criar uma entrada de dados (box);
○ Também precisamos definir o atributo name. Assim, o servidor acessa este atributo para ler a
informação contida nele;
○ É possível adicionar um valor fixo utilizando o atributo value.
Formulários
Formulários
● Input
○ Podemos definir o tamanho utilizando o atributo size.
Formulários
● Input
○ Podemos utilizar o atributo placeholder para inserir um texto de exemplo. Ao clicar, some.
Exercício de Fixação
● Crie uma página web com um formulários com os seguintes campos:
○ Produto;
○ Quantidade;
○ Preço Unitário;
○ Preço Total.

● Na tag input usar os atributos name, id, size e placeholder.

● Utilizar a TAG label.
Formulários
● Input
○ Podemos utilizar um tipo radio para escolher uma única alternativa de várias opções listadas.
Formulários
● Input
○ O tipo utilizado para dados de entrada de senhas é o password.
○ Podemos utilizar o atributo required para informar ao validador do formulário que este campo
é obrigatório.
Formulários
● Input
○ O tipo utilizado para respostas com múltiplas escolhas é o checkbox.
Formulários
● Para enviar os dados para o servidor utilizamos o botão do tipo (type)
submit.
Formulários
● Para limpar um formulário, utilizamos o tipo reset.
Formulários
● TAG textarea
● Podemos criar em nosso formulário uma área de texto.
Formulários
● TAG select
○ Para definir uma lista de opções utilizamos a TAG select.
○ Options são os itens de opções que aparecerão para o usuário.
Formulários
● TAG select
● Atributos:
○ Name: nome que identifica o item na lista.
○ Option: itens da lista.
○ Selected: item da lista selecionado.
○ Value: valor a ser enviado ao servidor.
○ Multiple: mostra a lista sempre aberta.
○ Size: número de itens que aparecem por vez.
Formulários
Formulários
● TAG form
● <form> Entrada de dados </form>
● Atributos básicos:
○ Name: nome do formulário
○ Action: ação do formulário, direcionando por exemplo para outra página.
○ Method: método de submissão ao servidor GET ou POST.

● Atributos HTML5:
○ Autocomplete: especifica se o formulário tem ou não (on ou off) o autocomplete.
○ Novalidate: especifica que o formulário não deve ser validado antes de enviar ao servidor.
■ Utilizar somente quando você tem certeza que os dados não precisam ser validados.
Formulários
Exercício de fixação
● Crie um novo projeto (nova pasta);
● Crie 3 páginas web:
○ Login de usuários (login.html);
■ Formulário com os inputs: login, senha e botão submit.
■ Utilize labels para os textos dos inputs.
○ Cadastrar usuário (usuario.html);
○ Lista de usuários (listausuario.html).
■ Criar uma lista de usuários utilizando tabela.

● Insira um menu de navegação (lista não ordenada) em todas as páginas.

Exercício de Fixação
● A página usuario.html deve conter os seguintes campos:
○ Nome, Sobrenome, Login, E-mail, Endereço, Cidade = texto.
○ Estado = seleção.
○ Senha = password.
○ Sexo = radio.
○ Informe o perfil do usuário (administrador, usuário, visitante) = checkbox.
○ Observação sobre o usuário = texto área.
○ Insira um botão para limpar e outro para salvar.
Cores
● Definição de cores:
○ Mistura quantidades de Vermelho, Verde e Azul;
○ Pixels são pontos minúsculos da tela do computador;
○ Imagens são criadas a partir da variação de cores dos pixels.
Cores
● Color Picker
● https://htmlcolorcodes.com/color-picker/
Imagens
● Formatos
○ Existem múltiplos formatos que podem ser utilizados na web;
○ Os principais são:
■ GIF;
■ JPEG;
■ PNG.
Imagens - Formato GIF
● Graphics Interchange Format (Formato para Intercâmbio Gráfico);
● Compressão da imagem;
● Algoritmo de compressão LZW (derivado do nome dos seus inventores: Lempel-Ziv e
Welch);
● Perde qualidade;
● Mais rápido para se transmitido via rede;
● Permite criar animações;
● Possui 8 bits /256 possibilidades de cores;
● RGB (Red, Green, Blue).
Imagens - Formato JPEG
● Joint Photographic Experts Group;
● Utilizado para compressão de imagens fotográficas;
● Utiliza algoritmo para comprimir as imagens, diferente do GIF que utiliza
menos cores;
■ Algoritmo transforma uma imagem (possibilidade infinita de cores) em valores inteiros
(8 bits – 256);

● Exemplo:
○ Uma imagem de 3.000 Kb, pode ser reduzida para 300Kb.
Imagens - Formato PNG
● Portable Network Graphics;
● Formato de dados utilizado para imagens;
● Formato livre;
● Maior gama de profundidade de cores;
● Alta compressão;
● Desenvolvido pela W3C.
Imagens
● TAG IMG <img>
● Atributos:
○ src (source);
○ alt (texto alternativo, aparece quando
a imagem não pode ser carregada ou
por leitores de tela).

● Podemos utilizar a TAG HTML 5

Figure para encapsular a
imagem.
Imagens
● Inclusão de imagens em páginas
web
○ Tamanho da imagem podem ser
padronizado.
○ Grande ou pequena, ela ocupa o mesmo
espaço de armazenamento.
■ Altura: height=“” e Largura:
width=“”
Imagens
● Podemos alinhar a imagem
relativamente ao texto.
○ Atributo Align.
○ Valores alinhamento horizontal: left e
right.
○ Valores alinhamento vertical: bottom,
middle e top.
Exercício de fixação
● Crie uma página web para mostrar o catálogo de produtos de uma loja. O
catálogo deve conter pelo menos 9 produtos. Utilize as tags que já vimos em
aula.