4 - html_parte_4_formularios_Fatec00.pdf

HTML 5
 Novos recursos e vantagens do HTML 5
 Novos recursos baseados em HTML, CSS,
JavaScript
 Redução da necessidade de plugins externos (
Flash)
 Melhor manipulação de erros
 Novos elementos (tags), atributos
2

DECLARAÇÃO DOCTYPE
 Nas versões anteriores ao HTML5, referia-se a
uma Document Type Definition (DTD), ou seja,
regras de linguagem marcação.
 Agora o elemento <DOCTYPE> é uma instrução
para que o navegador saiba a versão da
linguagem de marcação que está sendo usada.
 A linguagem HTML5 requer um elemento
<DOCTYPE> para garantir que a página seja
renderizada pelo navegador de maneira correta.
3

SINTAXE BÁSICA DE DOCUMENTO HTML5
<!doctype html>
<html>
<head>
<meta charset=“UTF-8”>
<Title> Estrutura do HTML 5</title>
</head>
<body>
<p> Primeiro parágrafo </p>
</body>
</html>
4

FORMULÁRIOS
 Um formulário é um componente de uma página web
que possui controles, como campos de texto, botões,
caixas de seleção ou de combinação, listas, etc, para
permitir a interação de usuário com o site.
 É normalmente utilizado para cadastrar e manipular
dados de clientes, funcionários e produtos, selecionar
produtos em sites de comércio eletrônico, enviar
sugestões e/ou reclamações às empresas, validar
entrada de usuários, etc.
 A linguagem de marcação HTML5 traz um conjunto de
novos tipos de campos que fazem a validação
automática dos dados de entrada ao submeter o
formulário, sem a necessidade de criar complexos
scripts de validação. 5

FORMULÁRIOS
 A validação automática de campos de entrada de
e-mail, valores numéricos, datas, URL, etc. É sem
dúvida a principal inovação da linguagem
HTML5 no que diz respeito à criação de
formulários.
6

NOVOS ATRIBUTOS DO ELEMENTO <INPUT>
Atributo Descrição
tel Entrada do tipo número de telefone
search Entrada do tipo um campo de pesquisa
url Entrada de URL
email Entrada de endereço de e-mail
datetime Entrada de uma data e/ou hora
date Entrada de uma data
month Entrada de um mês
week Entrada de uma semana
time Entrada do tipo hora
datetime-local Entrada de uma data ou hora local
number Entrada de um número
range Entrada de um número em um determinado intervalo
color Entrada de uma cor hexadecimal
7

CAMPO DO TIPO TEXT
 Para definir um campo de entrada de texto, é
necessário que o elemento <input> possua o
atributo type com valor “text”.
 O atributo required indica que o preenchimento
desse campo é obrigatório.
 O atributo size indica o tamanho do campo em
pixels.
<p> Nome: <input type=“text” size = “50” required>
</p>
8

CAMPO DO TIPO TEL
 Para definir um campo de entrada de telefone, é
necessário que o elemento <input> possua o
atributo type com valor “tel”.
 O atributo placeholder exibe um valor no campo
até que ele receba o foco. Ao receber o foco, esse
valor desaparece.
<p> Telefone: < input type=“tel”
placeholder=“(XX)XXXX-XXXX” required></p>
9

CAMPO DO TIPO EMAIL
 Para definir um campo de entrada de e-mail, é
necessário que o elemento <input> possua valor
“email” no atributo type.
<p> E-mail: <input type=“email”</p>
10

CAMPO DO TIPO URL
 Para definir um campo de entrada de endereço
web, é necessário que o elemento <input> possua
o atributo type com o valor “url”.
 Utilize o atributo required caso deseje tornar o
preenchimento desse campo obrigatório.
<p>Site: <input type=“url” required></p>
11

CAMPO DO TIPO NUMBER
 O tipo “number” é utilizado nos elementos
<input> para entrada de valores númericos.
 O atributo value define um valor padrão para o
campo.
 Já os atributos max,min e step definem
respectivamente, o valor máximo permitido, o
valor mínimo e a escala de intervalos de entrada
permitida.
<p> Nota: <input type=“number” name=“nota”
min=“0” max=“10” step=“0.5”>
</p>
12

CAMPO DO TIPO RANGE
 O tipo “range” é usado para campos de entrada que
devem receber um valor numérico contido em uma
faixa de valores numéricos.
 O tipo “range” é apresentado como uma barra
deslizante, que vai do valor definido no atributo
min até o valor definido no atributo max. Você
pode mover o marcador na barra por intervalos
indicados no atributo step.
<p> Volume: <input type=“range” name=“volume”
min=“0” max=“10” step=“2”>
</p>
13

CAMPOS PARA ENTRADA DE DATA E HORA
 Atributo “date” – permite selecionar o dia, mês e
ano.
<p> Data: <input type=“date” name=“data” ></p>
14

 Atributo “month” – permite selecionar o mês e
ano.
<p> Mês: <input type=“month” name=“mês” </p>
15

 Atributo “week” – seleciona o dia da semana e ano.
<p> Semana: <input type=“week” name=“semana”>
</p>
16

 Atributo “time” – permite selecionar hora e minuto.
<p> Hora: <input type=“time” name=“hora”>
</p>
17

 Atributo “datetime- local” – permite selecionar
dia, mês, ano , hora e minuto (horário local).
<p> Data e Hora: <input type=“datetime-local”
name=“datahora”>
</p>
18

VALIDAÇÃO DE ENTRADA DE VALORES DE
DATA E HORA
 Se for inserido um valor não válido em campos que
manipulam data e hora, será exibida a mensagem
indicando que o valor é inválido.
<p> Tempo de entrega do produto: <input
type=“time” min=“19:00” max=“23:00” step=“300”>
</p>
o Com escala de intervalo válida de 5 em 5 minutos
(step=“300”)
o O valor contido em step deve ser mantido em
segundos.
19

VALIDAÇÃO DE ENTRADA DE VALORES DE
DATA E HORA
 <p> Data: <input type=“date” min=“0001-01-01”
max=“2011-10-10” value=“2010-10-05”>
 </p>
 Atributo “value” – o campo será iniciado com o
valor 2010-10-05.
20

CAMPO DO TIPO PASSWORD
 Um campo criado pelo elemento <input>
contendo o valor “password” permite que o
usuário digite um valor que não é exibido de
forma legível. Esse campo é utilizado para a
entrada de senhas.
 É importante lembrar que o elemento <form>
deve estar com o atributo method definido com o
valor “post” para que a senha não seja mostrada
na linha de endereço do navegador.
<p> Senha: <input type=“password”
name=“senha”>
</p> 21

BOTÕES DOS TIPOS SUBMIT, BUTTON E
RESET
 O elemento <input> pode apresentar botões de
ação no formulário. Para isso, basta definir o
atributo type com os valores “button”, “submit”
ou “reset”.
 O valor “submit” submete os dados do formulário
ao servidor.
 O valor “reset” limpa os campos do formulário e o
valor “button” não realiza ações.
 Para o tipo button é necessário configurar a ação
por meio de scripts “javaScript”.
22

BOTÃO DO TIPO BUTTON
Exemplo sem uso de function
 <input type="button" name="botao"
onclick="window.open(‘pagina2.html')"
value="Enviar">
23

EXEMPLO – USANDO BOTÕES
...
<head>
<meta charset="ISO-8859-1">
<title>Primeira página HTML 5</title>
<script type="text/javascript">
function validar(){
var n = document.formulario.pnome.value;
if (n==""){
alert ('O campo nome está vazio');
document.formulario.pnome.focus(); } }
</script>
</head>
<body><form name="formulario" >
<p>Nome: <input type="text" size="40" maxlength="40" name="pnome">
<p>Telefone: <input type="tel" required>
<p><input type="submit" value="enviar">
<input type="reset" value="limpar">
<input type="button" value="validar nome" onclick="validar();">
...
24

BOTÃO DO TIPO IMAGE
 Quando um elemento <input> possui o atributo
type com o valor “image”, o botão pode ser uma
imagem que será utilizada para submeter o
formulário.
 Atributo “scr” – o nome do arquivo que contém a
image.
 Atributo “alt” – define o rótulo de texto para o
botão que será exibido a imagem.
<p>< input type=“image” src=“botao.jpg”
alt=“botão”>
</p>
25

BOTÃO DO TIPO RÁDIO
 Campos radio (radio buttons) servem para
permitir que o usuário selecione uma (e somente
uma) dentre muitas opções de escolha
disponibilizadas em um formulário.
 Campos radio são criados pelo elemento <input>
contendo o atributo type com o valor “radio”.
 Para fazer os botões trabalharem como em um
grupo, eles recebem o mesmo nome no atributo
name.
 Para agrupar um conjunto de controles, pode-se
usar o elemento <fieldset>
26

EXEMPLO – BOTÃO TIPO RADIO
<fieldset>
<legend> Estado civil: </legend>
<p><input type=“radio” name=“est_civ”
value=“casado”> Casado </p>
<p> input type=“radio” name=“est_civ”
value=“solteiro”> Solteiro </p>
<p> input type=“radio” name=“est_civ”
value=“divorciado”> Divorciado </p>
</fieldset>
27

BOTÃO DO TIPO CHECKBOX
 Para permitir que o usuário selecione várias das
muitas opções disponíveis em uma sequencia de
itens.
 Ao contrário dos campos radio, os campos do tipo
checkbox permitem seleções múltiplas.
 Para nomear cada elemento da lista, o atributo
name deve conter valores diferentes, já que
vários checkboxes podem ser selecionados.
28

EXEMPLO – BOTÃO TIPO CHECKBOX
<fieldset>
<legend> Produtos: </legend>
<p><input type=“checkbox” name=“computador”
value=“computador”> Computador </p>
<p> <input type=“checkbox” name=“Impressora”
value=“impressora”> Impressora </p>
<p> <input type=“checkbox” name=“monitor”
value=“monitor”> Monitor </p>
</fieldset>
29

TEXTAREA
 Permite a digitação de um texto com múltiplas
linhas.
 Os atributos cols e rows definem,
respectivamente, o número de colunas e linhas
visíveis na tela.
 Se ultrapassar o número de linhas visíveis na
tela, uma barra de rolagem será exibida do lado
direito do campo.
30

EXEMPLO COM TEXTAREA
<p>
Deixe sua sugestão:<br>
<textarea cols=“30” rows=“5”></textarea>
</p>
31

<SELECT>, <OPTION> E <OPTGROUP>
 O elemento <SELECT> permite a criação de uma
lista de opções em que é possível selecionar um
ou mais elementos.
 Atributo multiple – permite selecionar zero ou
mais elementos na lista de opções.
 Atributo size – indica o número de opções que
estarão visíveis.
 O elemento <optgroup> é utilizado para agrupar
elementos <option>
32

EXEMPLO
<p> Carro
<select name=“carros” required=“required”>
<optgroup label=“1 Esportivos”>
<option value=“1.1”> Ferrari
<option value=“1.2”>Porsche
<optgroup label=“2 Popular”>
<option value=“2.1”> Corsa
<option value=“2.2”> Uno
<option value=“2.3”> Gol
</select>
</p>
33

O ATRIBUTO AUTOCOMPLETE
 O atributo autocomplete liga ou desliga o recurso
para autocompletar durante a digitação de um
valor no campo.
 Os valores permitidos para esse atributo são on e
off.
 Se estiver on, conforme o usuário vai digitando um
valor em um campo, uma lista de valores já
digitados anteriormente vai sendo mostrada.
<p> Nome: < input type=“text” name=“nome”
autocomplete=“on”>
34

O ATRIBUTO AUTOFOCUS
 Esse atributo coloca o cursor em um campo
automaticamente quando a página é carregada.
<p> Nome: < input type=“text” name=“nome”
autofocus>
<p>
35

LAPIDANDO O FRONT-END
Front-End refere-se a interface de uma página,
os elementos que são visíveis pelo usuário.
Para tornar o Front-End agradável, algumas técnicas
e ferramentas podem facilitar o processo. São elas:
 Bootstrap;
 Templates;
 CSS 3;
 Frameworks.
36

EXERCÍCIO
 Crie em uma página HTML um formulário para
cadastrar os clientes de uma loja;
 Utilize os recursos do HTML 5;
 Implemente os botões para:
 Enviar (submit);
 Limpar (reset);
 Validar o preenchimento dos campos (com
JavaScript);
37

REFERÊNCIA
 Teruel, Evandro Carlos. HTML 5 – Guia Prático.
1ª Edição. Editora: Érica,2011.
38

4 - html_parte_4_formularios_Fatec00.pdf

Mais conteúdo relacionado

Semelhante a 4 - html_parte_4_formularios_Fatec00.pdf

Mais de carloseduardogonalve36

4 - html_parte_4_formularios_Fatec00.pdf