Tradução em progresso.

Elementos <input> do tipo "password" são uma maneira do usuário digitar senhas com segurança. O elemento é mostrado como um controle de edição de texto de uma linha, no qual o texto é omitido para que não possa ser lido, geralmente substituindo cada caractere por um símbolo como o astesrisco ("*") ou um ponto ("•"). Esse caracter varia dependendo do agente de usuário e do OS.

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.

Todo formulário que envolve informações sensíveis tais como senhas (ex.: formulários de login) deve ser servido usando HTTPS. Vários navegadores implementam mecanismos que avisam sobre formulários não protegidos - veja Senhas não Protegidas.

Value Uma DOMString representando uma senha, ou vazia
Eventos change e input
Atributos comuns suportados autocomplete, inputmode, maxlength, minlength, pattern, placeholder, readonly, required, e size
Atributos IDL  selectionStart, selectionEnd, selectionDirection, e value
Métodos select(), setRangeText(), e setSelectionRange()

Valor

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.

Os caracteres de quebra de linha line feed (U+000A) e carriage return (U+000D) não são permitidos em valores de "password". Quando o valor de um campo de senha é definido, os caracteres acima são removidos do valor. 

Usando campos de senha

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.

Um campo de senha simples

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">

Permitindo preenchimento automático

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">

Tornando a senha obrigatória

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">

Especificando um modo de inserção

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">

Definindo restrições de tamanho

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">

Selecionando o texto

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 selectionStartselectionEnd 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.

Validação

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.

Exemplos

Pedindo por um CPF

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 minlengthmaxlength 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

Especificações

Especificação Status Comentário
HTML Living Standard
The definition of '<input type="password">' in that specification.
Padrão em tempo real Definição inicial
HTML 5.1
The definition of '<input type="password">' in that specification.
Recomendação Definição inicial

Compatibilidade de navegadores

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support1 ?1221
Special handling of password inputs in insecure login pages No ?52 No No No
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support ? Yes ?4 Yes Yes ?
Special handling of password inputs in insecure login pages No No ?52 No No ?

Etiquetas do documento e colaboradores

Etiquetas: 
Colaboradores desta página: liddack
Última atualização por: liddack,