HTML5 atributo type
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="estilo.css"/>
<title>HTML 5</title>
</head>
<body>
<form name="frmFormulario">
Telefone: <input type="tel" /><br>
Pesquisa: <input type="search" placeholder="Digite sua pesquisa.."/><br>
E-mail: <input type="email" placeholder="Digite seu email"/><br>
Url: <input type="url" placeholder="Digite uma URL"/><br>
DateTime: <input type="datetime-local"/><br>
Date <input type="date"/><br>
Mes: <input type="month"/><br>
Semana: <input type="week"/><br>
Tempo: <input type="time"/><br>
Numero: <input type="number" name="nomeNumber" min="0" max="20"/><br>
Range: <input type="range" name="nomeRanger" min="0" max="20" step="0.2" value="13.1"/><br>
Cores: <input type="color"/>
<input type="submit" value="Enviar"/>
<input type="reset" value="Limpar"/>
</form>
</body>
</html>
|
Para obter uma melhor compatibilidade com o código acima recomendo usar o Chrome ou o Opera, dentre os navegadores testados esses dois foram os que executaram todos os atributos do type utilizados acima.
Type=”tel” atributo utilizado para um campo que recebera o número
de um telefone. Note que não há máscara de formatação ou validação, isto foi
feito de forma proposital, visto não há no mundo um padrão bem definido para
números de telefones. Entretanto recomento você ler o post que fala um pouco
sobre o pattern, este
atributo que é muito utilizado para expressões de validação.
Type=”search” atributo utilizado para campos de busca. Sua
aparência muda no decorrer da sua utilização teste o código e comprove o que digo.
Type=”email” atributo utilizado para campos de E-mail, com
formatação e validação. O agente de usuário pode inclusive promover a
integração com sua agenda de contatos.
Type=”url” atributo utilizado para campos que tenham com
objetivo a entrada de url, esse atributo possui formatação e validação.
O campo de data pode conter qualquer um dos valores no atributo
type: date, month, week, time, datetime-local.
Todos devem ser validados e formatados pelo agente
de usuário, que pode inclusive mostrar um calendário, um seletor de horário ou
outro auxílio ao preenchimento que estiver disponível no sistema do usuário.
Type=”number” atributo cuja finalidade é a manipulação de
números.
Type=”color” transforma o input em um seletor de cores.
Exemplo de retorno #ff6600.
Bom mais uma vez espero ter ajudado, essa é a intenção pelo qual
criei esse blog, ajudar iniciantes não importando área de conhecimento, somente
a divulgação do saber.
Para dar continuidade aos posts sobre HTML5, escolha um dos links abaixo:
- HTML5 Parte I - Doctype, Html, head, body
- HTML5 Parte II Atributo Type: tel, search, email, url, number, color
- HTML5 Parte III - Validadores: autofocos, placeholder, required, pattern etc.
- HTML5 Parte IV motores de Renderização, utilização de Modernizr e muito mais.
- HTML5 Parte V - details, summary, Drag and Drop e spellcheck
- HTML5 Parte VI - Audio, Video e Codec.
“Um homem
torna-se sábio somente quando adquire três qualidades: não desprezar quem
estiver abaixo dele; não invejar quem estiver acima dele; e não comercializar o
seu saber.”
(Da sabedoria oriental)
0 comentários:
Postar um comentário