<input type="password">
=======================

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.

Experimente
-----------

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.

> 
> **Note:** 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 (en-US)` e `input (en-US)` |
| **Atributos comuns suportados** | `autocomplete`,
 `inputmode`,
 `maxlength`,
 `minlength`,
 `pattern`,
 `placeholder`,
 `readonly`,
 `required`, e
 `size` |
| **Atributos IDL** | `selectionStart`, `selectionEnd`,
 `selectionDirection`, e `value` |
| **Métodos** | `select()`,
 `setRangeText()` (en-US),
 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.

> 
> **Note:** 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>`.


```html
<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.


```html
<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`.


```html
<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.


```html
<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.


```html
<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


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


#### JavaScript


```js
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.

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.


```html
<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


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


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

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


#### Resultado

Especificações
--------------

| Specification |
| --- |
| HTML Standard # password-state-(type=password) |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.