Como colocar a senha de entrada em HTML5

Atributo senha cria uma entrada para entrada de dados que, quando o usuário os inserir, será representada como pontos ou asteriscos ("*") na tela, o que torna difícil ou impossível para terceiros lerem como os dados são inseridos no formulário.
Este atributo funciona em conjunto com outros atributos que também compartilha com o elemento Entrada de textoVamos lembrar e ver quais são compartilhados por este.

• [cor = # 808080]Comprimento máximo: [/ color] Este elemento não é novo no HTML5, porém é muito útil, pois nos permite limitar o número máximo de caracteres que a entrada aceita, um exemplo é quando nossas senhas devem conter no máximo caracteres, por exemplo 6 alfanuméricos caracteres, colocamos este atributo com o valor 6 e ao tentar inserir um sétimo, ele simplesmente não seria escrito.

• [cor = # 808080]Padrão: [/ color] Novo em HTML5 nos permite inserir padrões de expressão regular para que possamos adicionar um novo nível de validação sem usar linguagens adicionais.

• [cor = # 808080]Marcador de posição: [/ color] Novo em HTML5, é um auxílio visual que nos permite inserir um texto que aparecerá dentro do texto de entrada mostrando uma pequena ajuda para o usuário, por exemplo, se uma entrada for para inserir a senha, poderíamos colocar como um placeholder “digite sua senha”, é claro, ajustando os estilos para que tudo pareça esteticamente correto.

• [cor = # 808080]Somente leitura: [/ color] Este atributo não é novo no HTML5, ele permite que o usuário não consiga inserir dados ou editar o conteúdo do campo que possui este atributo.

• [cor = # 808080]Requeridos: [/ color] Novo no HTML5, este atributo permite indicar que se o input estiver vazio, o formulário ainda não deve ser submetido, obrigando assim a obrigatoriedade do seu preenchimento, desta forma elevamos outro nível de validação.

• [cor = # 808080]Tamanho: [/ color] Nos ajuda a especificar a largura do elemento de entrada, este atributo não é novo, porém é muito importante já que nos ajuda a dar um melhor visual do texto que o usuário deve inserir, além de nos ajudar esteticamente para criar campos de entrada homogêneos, já que todos podem ser colocados com uma largura maior do que o padrão.

• [cor = # 808080]Valor: [/ color] Não é novo no HTML5, este atributo nos permite colocar valores para uma entrada, é diferente do placeholder, pois o que está no valor atribuído ao enviar se ele seria enviado como o conteúdo do elemento, é bastante utilizado para preencher um formulário com conteúdo que é trazido do banco de dados quando usamos uma linguagem de servidor.

Depois de ver a teoria, vamos ver um exemplo prático dela:

 Exemplo
Inhame:

Senha:
Fruta:
Enviar voto 

Como vemos, neste caso, usamos o atributo marcador de posição para indicar que tipo de senha esperamos, desta forma orientamos o usuário e reduzimos os erros, uma vez que o elemento comece a ser escrito, o texto do placeholder é substituído por asteriscos ou por outros elementos que não permitem que se saiba que ele está sendo escrito.

PROLONGAR

Outro cuidado importante que devemos ter é que embora não possamos ler o que escrevemos no campo senha, ao recebê-lo na página que irá processar o referido formulário, o conteúdo chegará sem qualquer tipo de criptografia, portanto sabemos que os dados viaja sem proteção, por exemplo, se processarmos o formulário anterior, receberemos o seguinte:

Se quisermos mais segurança, devemos considerar o uso de servidores com protocolos seguros, como SSL / HTTPS Eles criptografam as informações que enviam ou usam linguagens como Javascript para criptografar as informações antes de serem enviadas.
Com isso concluímos este tutorial percorrendo o processo de criação de formulários para entrada de dados confidenciais e sabemos as implicações e medidas de segurança que devemos tomar para preservar a integridade dos dados que trafegam de um formulário quando queremos que ele não seja legível com a olho nu.