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 {{Glossary("agente de usuário")}} e do {{Glossary("OS")}}.
O código fonte desse exemplo interativo está armazenado em um repositóriodo GitHub. Se deseja contribuir com o projeto de exemplos interativos, faça um clone de https://github.com/mdn/interactive-examples e nos mande uma pull request.
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.
| {{anch("Value")}} | Uma {{domxref("DOMString")}} representando uma senha, ou vazia |
| Eventos | {{event("change")}} e {{event("input")}} |
| Atributos comuns suportados | {{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("inputmode", "input")}}, {{htmlattrxref("maxlength", "input")}}, {{htmlattrxref("minlength", "input")}}, {{htmlattrxref("pattern", "input")}}, {{htmlattrxref("placeholder", "input")}}, {{htmlattrxref("readonly", "input")}}, {{htmlattrxref("required", "input")}}, e {{htmlattrxref("size", "input")}} |
| Atributos IDL | selectionStart, selectionEnd, selectionDirection, e value |
| Métodos | {{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.setRangeText", "setRangeText()")}}, e {{domxref("HTMLInputElement.setSelectionRange", "setSelectionRange()")}} |
O atributo {{htmlattrxref("value", "input")}} contém uma {{domxref("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 {{htmlattrxref("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 {{htmlattrxref("pattern", "input")}} for especificado, o conteúdo de um controle "password" só é considerado válido se o valor passar na validação; veja {{anch("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.
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 {{HTMLElement("label")}}.
<label for="senhaUsuario">Senha: </label> <input id="senhaUsuario" type="password">
{{EmbedLiveSample("A_simple_password_input", 600, 40)}}
Para permitir que o gerenciador de senhas do usuário digite a senha automaticamente, especifique o atributo {{htmlattrxref("autocomplete", "input")}}. Para senhas, o valor dele deve ser geralmente um dos seguintes:
"on""current-password" ou "new-password"."off""current-password""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"<label for="senhaUsuario">Senha:</label> <input id="senhaUsuario" type="password" autocomplete="current-password">
{{EmbedLiveSample("Autocomplete_sample1", 600, 40)}}
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 {{htmlattrxref("required", "input")}}.
<label for="senhaUsuario">Senha: </label> <input id="senhaUsuario" type="password" required> <input type="submit" value="Enviar">
{{EmbedLiveSample("Making_the_password_mandatory", 600, 40)}}
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 {{htmlattrxref("inputmode", "input")}} 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">
{{EmbedLiveSample("Specifying_an_input_mode", 600, 40)}}
Como de praxe, você pode usar os atributos {{htmlattrxref("minlength", "input")}} e {{htmlattrxref("maxlength", "input")}} 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 {{htmlattrxref("size", "input")}} é 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">
{{EmbedLiveSample("Setting_length_requirements", 600, 40)}}
Assim como em outros tipos de campos de texto, você pode usar o método {{domxref("HTMLInputElement.select", "select()")}} para selecionar todo o texto no campo de senha.
<label for="senhaUsuario">Senha: </label> <input id="senhaUsuario" type="password" size="12"> <button id="selecionarTudo">Selecionar tudo</button>
document.getElementById("selecionarTudo").onclick = function() {
document.getElementById("senhaUsuario").select();
}
{{EmbedLiveSample("Selecting_text", 600, 40)}}
Você também pode usar {{domxref("HTMLInputElement.selectionStart", "selectionStart")}} e {{domxref("HTMLInputElement.selectionEnd", "selectionEnd")}} para obter (ou definir) o intervalo dos caracteres no campo que estão selecionados no momento, e {{domxref("HTMLInputElement.selectionDirection", "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 {{htmlattrxref("pattern", "input")}} 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">
{{EmbedLiveSample("Validation_sample1", 600, 40)}}
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".
<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 {{htmlattrxref("pattern", "input")}} 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 {{htmlattrxref("inputmode", "input")}} 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 {{htmlattrxref("minlength", "input")}} e {{htmlattrxref("maxlength", "input")}} 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 {{htmlattrxref("required", "input")}} é usado para indicar que este campo precisa ter um valor válido. Por fim, {{htmlattrxref("autocomplete", "input")}} 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.
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;
}
{{EmbedLiveSample("Requesting_a_Social_Security_number", 600, 60)}}
| Especificação | Status | Comentário |
|---|---|---|
| {{SpecName('HTML WHATWG', 'forms.html#password-state-(type=password)', '<input type="password">')}} | {{Spec2('HTML WHATWG')}} | Definição inicial |
| {{SpecName('HTML5.1', 'forms.html#password-state-(type=password)', '<input type="password">')}} | {{Spec2('HTML5.1')}} | Definição inicial |
{{Compat("html.elements.input.input-password")}}