Página de login do tutorial HTML5 com formulários HTML5
O HTML5 traz muitos recursos e melhorias para formulários da web, existem novos atributos e tipos de entrada que foram introduzidos principalmente para facilitar a vida dos desenvolvedores web e fornecer uma melhor experiência aos usuários da web.
Então, neste post, vamos criar uma página de login usando Formulários HTML5 para ver como funcionam os novos recursos adicionados.
- Demonstração
- Fonte de download
Entrada HTML5
Vamos dar uma olhada na seguinte marcação.
Se você já trabalhou com formulários HTML antes, isso parecerá familiar. Mas você também notará diferenças. As entradas têm placeholder e requeridos atributos, que são novos atributos em HTML5.
Placeholder
o placeholder atributo nos permite dar texto inicial na entrada que irá desaparecer quando está em um foco estado ou sendo preenchido. Anteriormente, costumávamos fazer isso com JavaScript, mas agora fica muito mais fácil com esse novo atributo.
Atributo Obrigatório
o requeridos atributo irá definir o campo para ser obrigatório e, portanto, não deve ser deixado em branco antes que o formulário seja enviado, por isso, quando o usuário não preencheu o campo, o seguinte erro irá aparecer.
Novo seletor também é introduzido no CSS3, :requeridos para segmentar campos com requeridos atributo. Aqui está um exemplo;
input: required border: 1px vermelho sólido;
Tipo de Entrada de E-mail
O primeiro tipo de entrada é o email o que é realmente um novo tipo de campo adicionado em HTML5 também. o o email type dará validação básica de endereço de e-mail no campo. Quando o usuário não preencher o campo com um endereço de e-mail, o navegador mostrará a seguinte notificação;
O uso de tipos de entrada de e-mail também pode oferecer uma experiência melhor para usuários de dispositivos móveis, como usuários de iPhone e Android, onde mostrará a teclado otimizado para e-mail na tela com um dedicado “@” botão para ajudar a digitar o endereço de e-mail mais rápido.
As desvantagens
Os novos recursos de formulário oferecidos no HTML5 são poderosos e fáceis de implementar, mas ainda faltam em algumas áreas. Por exemplo;
o placeholder atributo, só é suportado em navegadores modernos - Firefox 3.7+, Safari 4+, Chrome 4+ e Opera 11+. Então, se você precisar dele para trabalhar em navegadores sem suporte, você pode usar este polyfills em conjunto com o Modernizr.
O mesmo acontece com o requeridos atributo. A notificação de erro não pode ser personalizada, o erro permanecerá “Por favor, preencha este campo” ao invés de “Por favor, preencha o seu primeiro nome”, este suporte a atributos também é limitado aos navegadores mais recentes.
Então, usar JavaScript para validar o campo obrigatório é (até agora) uma opção melhor.
função validateForm () var x = document.forms ["login"] ["nome de usuário"]. value; if (x == null || x == "") alert ("Por favor, preencha o nome de usuário"); retorna falso; Styling the Forms
Tudo bem, agora vamos decorar nosso formulário de login com CSS. Primeiro vamos dar ao fundo um padrão de madeira no html tag.
html background: url ('wood_pattern.png'); tamanho da fonte: 10pt; Então, precisamos remover o preenchimento e a margem padrão ul tag que envolve toda a insumos e flutua o li para a esquerda, então as entradas serão exibidas horizontalmente, lado a lado.
.loginform ul preenchimento: 0; margem: 0; .loginform li display: inline; flutuar: esquerda;
Desde que nós flutuamos li, os pais entrarão em colapso, então precisamos limpar as coisas em torno do pai com o clearfix hack.
label display: bloco; cor: # 999; .cf: antes, .cf: depois de content: ""; display: mesa; .cf: após clear: ambos; .cf * zoom: 1; : focus estrutura de tópicos: 0;
Em CSS3, temos o seletor de negação. Então, vamos usá-lo para segmentar insumos diferente do enviar tipo, que neste caso segmentará a entrada de e-mail e senha;
.loginform input: not ([type = submit]) preenchimento: 5px; margem direita: 10 px; borda: 1px rgba sólido (0, 0, 0, 0.3); raio de fronteira: 3px; box-shadow: inserção 0px 1px 3px 0px rgba (0, 0, 0, 0,1), 0px 1px 0px 0px rgba (250, 250, 250, 0,5);
Por fim, vamos dar um pouco de decoração de estilo para o Enviar botão, como segue.
.loginform input [type = submit] border: 1px sólido rgba (0, 0, 0, 0.3); fundo: # 64c8ef; / * Navegadores antigos * / background: -moz-linear-gradient (superior, # 64c8ef 0%, # 00a2e2 100%); / * FF3.6 + * / background: -webkit-gradiente (linear, superior esquerdo, inferior esquerdo, cor-stop (0%, # 64c8ef), cor-stop (100%, # 00a2e2)); / * Chrome, Safari4 + * / background: -webkit-linear-gradiente (superior, # 64c8ef 0%, # 00a2e2 100%); / * Chrome10 +, Safari5.1 + * / background: -o-linear-gradiente (superior, # 64c8ef 0%, # 00a2e2 100%); / * Opera 11.10+ * / background: -ms-linear-gradiente (superior, # 64c8ef 0%, # 00a2e2 100%); / * IE10 + * / background: gradiente linear (para baixo, # 64c8ef 0%, # 00a2e2 100%); / * W3C * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 64c8ef", endColorstr = "# 00a2e2", GradientType = 0); / * IE6-9 * / color: #fff; preenchimento: 5 px 15 px; margem-direita: 0; margem superior: 15px; raio de fronteira: 3px; text-shadow: 1px 1px 0px rgba (0, 0, 0, 0,3);
É isso aí, agora você pode tentar o formulário de login nos links a seguir.
- Demonstração
- Fonte de download
Palavras finais
Neste tutorial, analisamos alguns novos recursos em formulários HTML5:placeholder, requeridos e o email tipos de entrada para criar uma página de login simples. Nós também passamos pelas desvantagens dos atributos, para que possamos decidir que uma abordagem melhor seja aplicada.
Na próxima postagem, veremos outros novos recursos do formulário HTML5, portanto, fique atento.
