path: root/files/pt-br/web/html/element/input/password/index.html

---
title: <input type="password">
slug: Web/HTML/Element/Input/password
tags:
  - Formulário
  - campo
  - senha
translation_of: Web/HTML/Element/input/password
---
<div>{{HTMLRef}}</div>

<p><span class="seoSummary">Elementos <code>&lt;input&gt;</code> do tipo <strong><code>"password"</code></strong> são uma maneira do usuário digitar senhas com segurança.</span> 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")}}.</p>

<div>{{EmbedInteractiveExample("pages/tabbed/input-password.html", "tabbed-standard")}}</div>

<p class="hidden">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 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> e nos mande uma pull request.</p>

<p>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.</p>

<div class="note">
<p>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 <a href="/pt-BR/docs/Security/SenhasNãoProtegidas">Senhas não Protegidas</a>.</p>
</div>

<table class="properties">
 <tbody>
  <tr>
   <td><strong>{{anch("Value")}}</strong></td>
   <td>Uma {{domxref("DOMString")}} representando uma senha, ou vazia</td>
  </tr>
  <tr>
   <td><strong>Eventos</strong></td>
   <td>{{event("change")}} e {{event("input")}}</td>
  </tr>
  <tr>
   <td><strong>Atributos comuns suportados</strong></td>
   <td>{{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")}}</td>
  </tr>
  <tr>
   <td><strong>Atributos IDL </strong></td>
   <td><code>selectionStart</code>, <code>selectionEnd</code>, <code>selectionDirection</code>, e <code>value</code></td>
  </tr>
  <tr>
   <td><strong>Métodos</strong></td>
   <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.setRangeText", "setRangeText()")}}, e {{domxref("HTMLInputElement.setSelectionRange", "setSelectionRange()")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Valor">Valor</h2>

<p>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 (<code>""</code>). 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.</p>

<p>Se o atributo {{htmlattrxref("pattern", "input")}} for especificado, o conteúdo de um controle <code>"password"</code> só é considerado válido se o valor passar na validação; veja {{anch("Validação")}} para mais informações.</p>

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

<h2 id="Usando_campos_de_senha">Usando campos de senha</h2>

<p>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.</p>

<h3 id="Um_campo_de_senha_simples">Um campo de senha simples</h3>

<p>Aqui vemos o mais básico dos campos de senha, juntamente com um rótulo para ele usando o elemento {{HTMLElement("label")}}.</p>

<pre class="brush: html">&lt;label for="senhaUsuario"&gt;Senha: &lt;/label&gt;
&lt;input id="senhaUsuario" type="password"&gt;</pre>

<p>{{EmbedLiveSample("A_simple_password_input", 600, 40)}}</p>

<h3 id="Permitindo_preenchimento_automático">Permitindo preenchimento automático</h3>

<p>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:</p>

<dl>
 <dt><code>"on"</code></dt>
 <dd>Permite que o navegador ou um gerenciador de senhas preencha automaticamente o campo de senha. Esse valor não é tão informativo quanto <code>"current-password"</code> ou <code>"new-password"</code>.</dd>
 <dt><code>"off"</code></dt>
 <dd>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.</dd>
 <dt><code>"current-password"</code></dt>
 <dd>Permite que o navegador ou gerenciador de senhas preencha automaticamente o campo de senha. Esse valor fornece mais informações do que <code>"on"</code>, 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.</dd>
 <dt><code>"new-password"</code></dt>
 <dd>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.</dd>
</dl>

<div id="Autocomplete_sample1">
<pre class="brush: html">&lt;label for="senhaUsuario"&gt;Senha:&lt;/label&gt;
&lt;input id="senhaUsuario" type="password" autocomplete="current-password"&gt;</pre>
</div>

<p>{{EmbedLiveSample("Autocomplete_sample1", 600, 40)}}</p>

<h3 id="Tornando_a_senha_obrigatória">Tornando a senha obrigatória</h3>

<p>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")}}.</p>

<pre class="brush: html">&lt;label for="senhaUsuario"&gt;Senha: &lt;/label&gt;
&lt;input id="senhaUsuario" type="password" required&gt;
&lt;input type="submit" value="Enviar"&gt;</pre>

<p>{{EmbedLiveSample("Making_the_password_mandatory", 600, 40)}}</p>

<h3 id="Especificando_um_modo_de_inserção">Especificando um modo de inserção</h3>

<p>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.</p>

<pre class="brush: html">&lt;label for="pin"&gt;PIN: &lt;/label&gt;
&lt;input id="pin" type="password" inputmode="numeric"&gt;</pre>

<p>{{EmbedLiveSample("Specifying_an_input_mode", 600, 40)}}</p>

<h3 id="Definindo_restrições_de_tamanho">Definindo restrições de tamanho</h3>

<p>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.</p>

<pre class="brush: html">&lt;label for="pin"&gt;PIN:&lt;/label&gt;
&lt;input id="pin" type="password" inputmode="numeric" minlength="4"
       maxlength="8" size="8"&gt;</pre>

<p>{{EmbedLiveSample("Setting_length_requirements", 600, 40)}}</p>

<h3 id="Selecionando_o_texto">Selecionando o texto</h3>

<p>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.</p>

<h4 id="HTML">HTML</h4>

<pre class="brush: html">&lt;label for="senhaUsuario"&gt;Senha: &lt;/label&gt;
&lt;input id="senhaUsuario" type="password" size="12"&gt;
&lt;button id="selecionarTudo"&gt;Selecionar tudo&lt;/button&gt;
</pre>

<h4 id="JavaScript">JavaScript</h4>

<pre class="brush: js">document.getElementById("selecionarTudo").onclick = function() {
  document.getElementById("senhaUsuario").select();
}</pre>

<h4 id="Resultado">Resultado</h4>

<p>{{EmbedLiveSample("Selecting_text", 600, 40)}}</p>

<p>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.</p>

<h2 id="Validação">Validação</h2>

<p>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.</p>

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

<div id="Validation_sample1">
<pre class="brush: html">&lt;label for="hexId"&gt;Hex ID: &lt;/label&gt;
&lt;input id="hexId" type="password" pattern="[0-9a-fA-F]{4,8}"
       title="Digite um ID consistindo de 4-8 dígitos hexadecimais"&gt;</pre>
</div>

<p>{{EmbedLiveSample("Validation_sample1", 600, 40)}}</p>

<dl>
 <dt>{{htmlattrdef("disabled")}}</dt>
 <dd>
 <p>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.</p>
 </dd>
</dl>

<h2 id="Exemplos">Exemplos</h2>

<h3 id="Pedindo_por_um_CPF">Pedindo por um CPF</h3>

<p>Este exemplo aceita apenas valores que correspondam ao formato de um <a href="https://pt.wikipedia.org/wiki/Cadastro_de_pessoas_f%C3%ADsicas#N%C3%BAmero_de_inscri%C3%A7%C3%A3o_no_CPF">Cadastro de Pessoa Física</a>. Este número, usado para fins de cobrança e identificação, segue o formato "123.456.789-09". </p>

<h4 id="HTML_2">HTML</h4>

<pre class="brush: html">&lt;label for="cpf"&gt;CPF:&lt;/label&gt;
&lt;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"&gt;
&lt;br&gt;
&lt;label for="cpf"&gt;Valor:&lt;/label&gt;
&lt;span id="atual"&gt;&lt;/span&gt;</pre>

<p>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. </p>

<p>O modo de inserção em {{htmlattrxref("inputmode", "input")}} está definido como <code>"number"</code> 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 <code>"off"</code> para evitar que gerenciadores de senhas tentem usar ou definir o valor dele, já que ele não é nem mesmo uma senha.</p>

<p>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. <a href="https://www.devmedia.com.br/validar-cpf-com-javascript/23916">Confira este artigo</a> para ver exatamente como garantir um número de CPF válido.</p>

<h4 id="JavaScript_2">JavaScript</h4>

<p>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 <code>pattern</code>. </p>

<pre class="brush: js">var cpf = document.getElementById("cpf");
var atual = document.getElementById("atual");

cpf.oninput = function(event) {
  atual.innerHTML = cpf.value;
}</pre>

<h4 id="Resultado_2">Resultado</h4>

<p>{{EmbedLiveSample("Requesting_a_Social_Security_number", 600, 60)}}</p>

<h2 id="Especificações">Especificações</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Especificação</th>
   <th scope="col">Status</th>
   <th scope="col">Comentário</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'forms.html#password-state-(type=password)', '&lt;input type="password"&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td>Definição inicial</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5.1', 'forms.html#password-state-(type=password)', '&lt;input type="password"&gt;')}}</td>
   <td>{{Spec2('HTML5.1')}}</td>
   <td>Definição inicial</td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilidade_de_navegadores">Compatibilidade de navegadores</h2>



<p>{{Compat("html.elements.input.input-password")}}</p>