<input type="password">

Os detalhes de como o processo de inserção do texto funciona podem variar dependendo do navegador. Dispositivos móveis, por exemplo, frequentemente mostram o caractere digitado por um breve momento antes de ser ocultado, de forma que o usuário possa verificar se realmente digitou o caractere pretendido. Isso é útil devido ao tamanho reduzido das teclas e a facilidade de se pressionar a tecla errada, principalmente em teclados virtuais.

O atributo value contém uma DOMString cujo valor é o conteúdo atual do controle de edição de texto usado para a inserção da senha. Se o usuário ainda não digitou nada, esse valor é uma string vazia (""). Se a propriedade required for especificada, então a caixa de edição de senha precisa conter um valor que não seja uma string vazia para ser válida.

Se o atributo pattern for especificado, o conteúdo de um controle "password" só é considerado válido se o valor passar na validação; veja Validação para mais informações.

Caixas de inserção de senha funcionam assim como outras caixas de inserção de texto; a principal diferença é que o conteúdo é ocultado para impedir que pessoas que estejam próximas ao usuário leiam a senha.

Aqui vemos o mais básico dos campos de senha, juntamente com um rótulo para ele usando o elemento <label>.

<label for="senhaUsuario">Senha: </label>
<input id="senhaUsuario" type="password" />

Para permitir que o gerenciador de senhas do usuário digite a senha automaticamente, especifique o atributo autocomplete. Para senhas, o valor dele deve ser geralmente um dos seguintes:

"on"

Permite que o navegador ou um gerenciador de senhas preencha automaticamente o campo de senha. Esse valor não é tão informativo quanto "current-password" ou "new-password".

"off"

Não permite que o navegador ou gerenciador de senhas preencha automaticamente o campo de senha. Vale observar que alguns softwares ignoram esse valor, já que ele costuma ser prejudicial para a capacidade dos usuários de manter senhas seguras.

"current-password"

Permite que o navegador ou gerenciador de senhas preencha automaticamente o campo de senha. Esse valor fornece mais informações do que "on", já que ele permite que o navegador ou gerenciador de senhas digite automaticamente a senha atualmente conhecida do site no campo, mas não que sugira uma nova.

"new-password"

Permite que o navegador ou gerenciador de senhas digite automaticamente uma nova senha para o site. Esse valor é usado em formulários de "mudar senha" e de "novo usuário", no campo que pede por uma nova senha. A nova senha pode ser gerada de várias maneiras, dependendo do gerenciador de senhas usado. Ele pode simplificar o preenchimento de uma sugestão de nova senha, ou mesmo pode mostrar ao usuário uma interface para criar uma.

<label for="senhaUsuario">Senha:</label>
<input id="senhaUsuario" type="password" autocomplete="current-password" />

Para dizer ao navegador do usuário que o campo de senha precisa ter um valor válido antes do formulário ser enviado, basta adicionar o atributo booleano required.

<label for="senhaUsuario">Senha: </label>
<input id="senhaUsuario" type="password" required />
<input type="submit" value="Enviar" />

Se as suas regras de sintaxe recomendadas (ou obrigatórias) para a senha poderiam obter vantagem de uma interface de digitação diferente da de um teclado padrão, você pode usar o atributo inputmode para pedir por uma interface específica. O caso de uso mais óbvio para isso é o de a senha precisar ser numérica (como um PIN). Dispositivos móveis com teclados virtuais, por exemplo, podem optar por mostrar um teclado numérico ao invés de um teclado completo, facilitando a digitação da senha.

<label for="pin">PIN: </label>
<input id="pin" type="password" inputmode="numeric" />

Como de praxe, você pode usar os atributos minlength e maxlength para estabelecer os tamanhos mínimo e máximo aceitáveis para a senha. Este exemplo continua o anterior, agora especificando que o PIN do usuário deva ter pelo menos quatro dígitos e não passe de oito dígitos. O atributo size é usado para garantir que o campo de senha aceite no máximo oito caracteres.

<label for="pin">PIN:</label>
<input
  id="pin"
  type="password"
  inputmode="numeric"
  minlength="4"
  maxlength="8"
  size="8" />

Assim como em outros tipos de campos de texto, você pode usar o método select() para selecionar todo o texto no campo de senha.

HTML

<label for="senhaUsuario">Senha: </label>
<input id="senhaUsuario" type="password" size="12" />
<button id="selecionarTudo">Selecionar tudo</button>

JavaScript

document.getElementById("selecionarTudo").onclick = function () {
  document.getElementById("senhaUsuario").select();
};

Resultado

Você também pode usar selectionStart e selectionEnd para obter (ou definir) o intervalo dos caracteres no campo que estão selecionados no momento, e selectionDirection para saber em qual direção a seleção ocorreu (ou será estendida, dependendo da sua plataforma; veja a documentação dela para saber mais). Porém, como o texto está oculto, a utilidade desses métodos fica reduzida.

Se seu aplicativo tiver restrições de conjuntos de caracteres ou qualquer outro requisito para o conteúdo da senha digitada, você pode usar o atributo pattern para estabelecer que uma expressão regular seja usada para garantir automaticamente que as senhas cumpram com esses requisitos.

Neste exemplo, são válidos apenas valores consistindo de no mínimo quatro e no máximo oito dígitos hexadecimais.

<label for="hexId">Hex ID: </label>
<input
  id="hexId"
  type="password"
  pattern="[0-9a-fA-F]{4,8}"
  title="Digite um ID consistindo de 4-8 dígitos hexadecimais" />

disabled

Esse atributo booleano indica que o campo de senha não está disponível para interação. Além disso, os valores dos campos marcados com ele não são enviados com o formulário.

Este exemplo aceita apenas valores que correspondam ao formato de um Cadastro de Pessoa Física. Este número, usado para fins de cobrança e identificação, segue o formato "123.456.789-09".

HTML

<label for="cpf">CPF:</label>
<input
  type="password"
  id="cpf"
  inputmode="number"
  minlength="11"
  maxlength="11"
  pattern="^[0-9]{3}.?[0-9]{3}.?[0-9]{3}-?[0-9]{2}"
  required
  autocomplete="off" />
<br />
<label for="cpf">Valor:</label>
<span id="atual"></span>

Ele usa um padrão pattern que limita o valor digitado a strings que representem números de CPF no formato válido. O padrão aceita tanto valores separados por pontos (".") e hífen ("-") como apenas os números.

O modo de inserção em inputmode está definido como "number" para indicar a dispositivos com teclados virtuais que eles devem mostrar um teclado numérico para uma digitação mais fácil. Os atributos minlength e maxlength foram definidos como 11 e 14, respectivamente, de forma a aceitar valores com no mínimo 11 e no máximo 14 caracteres (o primeiro para valores sem os caracteres separadores e o último para valores com esses caracteres). O atributo required é usado para indicar que este campo precisa ter um valor válido. Por fim, autocomplete foi definido como "off" para evitar que gerenciadores de senhas tentem usar ou definir o valor dele, já que ele não é nem mesmo uma senha.

Obviamente, apenas essa expressão regular não garante um CPF realmente válido, já que a validação deste tipo de número exige cálculos adicionais. Confira este artigo para ver exatamente como garantir um número de CPF válido.

JavaScript

A seguir temos um código simples para mostrar o CPF digitado na tela para que você possa vê-lo. É claro que isso vai contra o propósito de um campo de senha, mas ajuda na hora de experimentar o padrão pattern.

var cpf = document.getElementById("cpf");
var atual = document.getElementById("atual");

cpf.oninput = function (event) {
  atual.innerHTML = cpf.value;
};

Resultado