Caixas de password - Como criar formulário de senha em HTML

Apostila de HTML completa para downloadDepois das caixas de texto, que aprendemos no tutorial de HTML passado, provavelmente as caixas de senha sejam o tipo de formulário mais utilizados, principalmente em sistemas de Log In, onde você sempre fornece um login (através do formulário de caixa de texto) e uma senha (através de outro tipo de formulário, que estudaremos neste artigo).

Clique aqui para obter seu certificado do Curso de HTML!

Para que servem as caixas de senha em HTML

Assim como as caixas de textos simples, as caixas de senha são um tipo especial de formulário devido a sua importância, visto que usamos diversas, ao longo do dia.

Ao entrar em seu e-mail, você preenche seu login e senha. Faz o mesmo para entrar na rede social e até mesmo para usar seu celular.
Se você usa o sistema operacional Linux, então, sabe como é comum fornecer a senha para instalar, desinstalar ou fazer qualquer coisa que vá um pouco além do básico, visto que é um sistema extremamente seguro e estável.

Na verdade, as caixas de senha (password input boxes, em inglês) não muito diferentes da de texto.
A grande vantagem destas é que elas escondem a informação que está sendo digitada, seja através de um asterisco ou a figura de uma bolinha sempre que inserimos algum caractere naquele campo de um formulário de algum site em HTML.

Com este tipo de elemento de um formulário, seus usuários podem digitar a senha sem que esta seja vista por pessoas que estejam próximas. Ou seja, elas servem como uma maneira de encriptar ou esconder uma informação segura.

Em breve, quando você for aprender a programar em JavaScript e PHP, por exemplo, aprenderá como usar os dados de um formulário de senha de uma maneira bem segura, fazendo uma comunicação com um banco de dados.

Como usar o formulário de Campo de Password: type="password"

Como dissemos na explicação sobre o uso das caixas de password, elas são basicamente as mesmas das caixas de textos que vimos no tutorial passado, por isso se você já tiver estudado o artigo anterior, irá aprender este com extrema facilidade.
Aconselhamos o estudo de ambos.

De fato, a única diferença é no atributo type, que antes era "text", e agora será "password", que significa senha em inglês. E assim como nas text input box, vamos usar o atributo name para dar um nome ao nosso campo de senha, pois será necessário identificar cada elemento de um formulário (isso é primordial para tratar os formulários com uma linguagem de programação).

Assim, a sintaxe de nossa caixa de password fica:
<input type="password" name="senha">

Cujo efeito é a seguinte caixa de senha:


Fácil e interessante, não?

Tente escrever algo, verá que não vai aparecer, exatamente como ocorre nos formulário de login e senha que você usa por aí, pela internet, mas dessa você foi você que criou o seu form :)

Basicamente só fazemos mudar de "text" para "password" o atributo type da tag <input> que o HTML já reconhece e sabe que queremos usar senha naquele campo.

Além disso, o seu navegador, junto com o HTML, ao notar que aquele campo é de senha, já disponibiliza alguns recursos de segurança.
Por exemplo, escreva algo na caixa de senha e depois selecione o que escreveu e tente copiar para colar em outro lugar: não dá. O HTML é esperto e sabe que isso não deve ocorrer, afinal, senhas são coisas confidenciais.

Agora vamos aprender a usar mais atributos desta tag input.





Os atributos size e maxlength - Definido o tamanho da caixa de password

Se você usar o exemplo passado de caixa de senha, vai notar que pode escrever nele indefinidamente, bem como seu tamanho foi ajustado automaticamente.
Isso ocorrer porque não passamos nenhum valor informando o tamanho do formulário de senha nem o número máximo de caracteres permitidos, daí o HTML cria uma caixa de senha com esses valores padronizados.

Mas, obviamente, como tudo em HTML e criação de sites, podemos definir, manipular e mexer ao nosso gosto, afinal somos webmasters, e nós que decidimos esses detalhes de nossos sites.

A começar pelo tamanho da caixa de senha.
Definimos seu tamanho através do atributo size, que deve receber um valor numérico, onde esse número representa o número de caracteres visíveis.

Por exemplo, uma caixa de senha de tamanho 20, tem o seguinte código:
<input type="password" name="senha" size="20">

Que resultará no seguinte campo de password:

Alterando para 40, o resultado é:

Porém, em ambos casos, você pode escrever quantos caracteres quiser, que a caixa de senha vai continuar a receber.
Ora, sabemos que na prática não é bem assim.

Por exemplo, a sua senha deve conter no máximo 10 caracteres, devemos limitar o usuário, para que ele não possa escrever mais que 10 caracteres, do contrário isso seria uma falha grave em nosso site.

Assim, para definir o tamanho máximo de caracteres que podem ser inseridos em nosso campo de senha, devemos usar o atributo maxlength, que recebe um valor numérico (assim como o atributo size) que define o número MÁXIMO de caracteres que ele pode receber.

Por exemplo, vamos criar uma caixa de campo do tipo senha, cujo tamanho dela é 10, mas que só pode receber, no máximo, 6 caracteres.
O código HTML deste formulário é:
<input type="password" name="senha" size="10" maxlength="6">

E o resultado se torna:

Teste. Tente colocar 7, 8 ou mais caracteres.
O limite é 6, é o máximo.
Essa é uma maneira que você tem de garantir que o limite máximo não seja ultrapassado, é uma camada a mais de segurança que você pode ter.

O atributo value - Colocando um valor inicial no campo de password

E por fim, para terminar este tutorial de HTML sobre caixas de senha, vamos ensinar a usar o atributo value, que vai simplesmente colocar algo escrito nas caixas de senha.

Isso, ao ver o formulário, o usuário vai notar que ele já está parcialmente preenchido.
Esta técnica é usada geralmente, para dar um exemplo de como os campos de um formulário deve ser utilizados.

Para usarmos o atributo value com password input boxes, basta passarmos um valor entre aspas para este atributo. Obviamente, como é um campo de senha, este valor não vai ser exibido diretamente para o usuário, e sim as típicas 'bolinhas' ou asteriscos.

Vejamos um exemplo, vamos colocar "123456" como o valor inicial do exemplo passado.
Nosso código HTML será:
<input type="password" name="senha" size="10" maxlength="6" value="123456">

E o resultado é o seguinte campo:

Veja que você não digitou nada, e já apareceu algo escrito.
Serve para mostrar que aquele campo é um do tipo senha.

Exercícios de caixas de senha em formulários de HTML

Questão 01:

Agora que você já entende HTML, acesse o código-fonte desta página e descubra o que tem escrito no seguinte campo de senha:


Questão 02:

Use seus conhecimentos sobre caixas de texto e de senha e crie um formulário de login e senha, exatamente igual a que usamos na figura inicial deste tutorial de nossa apostila.
Use tabelas em seu site para alinhas os elementos.

3 comentários:

Lucas Lima disse...

Cara eu digito o código E não dá , mas quando copio e colo o código da sua page funciona ... oque devo fazer ?

Enrique Victorino disse...

Valeu brow.
Agora posso dar continuidade ao meu trabalho.

Carlos Eduardo disse...

ola, eu quero que essa caixa de password tenha um botão escrito "enter" e que se a senha estiver correta a pessoa seja redirecionada a determinada pagina.

A você pode me ajudar com caixa de pequisa ? pesquisei um monte usei a do google também mais não consigo configurar para que busque apenas o conteúdo do meu site, pode me ajudar com isso também ?