Formulários do tipo Caixas de Texto (text) em HTML

Agora que já explicamos o que são formulários em HTML, bem como sua importância para a interatividade da internet e a criação de sites, vamos de fato começar a criar alguns formulários.

Vamos iniciar com exemplos simples, mostrando como criar caixas de textos simples, como as que usamos para preencher nossos nomes em um cadastro ou e-mail para fazer o login.

Quer trabalhar criando sites? Obtenha seu certificado de HTML !

Tag <input> - Formulário de Caixa de Texto (Text Input Box)

Vamos começar este tutorial sobre formulário ensinando a criar o tipo mais de formulário, uma simples caixa de texto, daquela que inserimos nosso login ou nome, por exemplo.

Existem algumas características que precisamos saber antes de criarmos esse tipo de formulário em nossos sites em HTML.
Primeiro é que usaremos a tag <input> (input, em inglês, é entrada) para essa caixa.
Como queremos que esse formulário seja do tipo texto, precisamos dar o valor "text" ao tributo type.
Já que é possível criar vários formulário, é uma boa prática darmos nome aos nossos formulários, através do atributo name, que recebe o valor que quisermos (o nome que escolhermos).
E se você se lembrar bem, existem caixas de texto com diversos tamanhos, pequenas e grandes, esse tamanho é definido pelo atributo size (tamanho, em inglês).

Assim, a sintaxe para criarmos um formulário do tipo Caixa de Texto é:
<input type="text" name="NOME_DO_FORMULARIO" size="TAMANHO_DO_FORMULARIO">

Por exemplo, vamos criar uma caixa de texto de nome 'Nome' e de tamanho 40 (40 caracteres):
<input type="text" name="Nome" size="40" /> 

O resultado é:
Simples, não?

Exercício com caixas de texto

Crie dois campos "Nome" e "Sobrenome", com suas respectivas caixas de texto, alinhadas por tabela, como se fossem um formulário real.

Vamos criar uma tabela com duas linhas e duas colunas.
Na primeira linha colocamos "Nome" na primeira coluna e o código da caixa de texto na segunda coluna. Fazemos o mesmo para a segunda linha, mudando apenas "Sobrenome".

Nosso código fica:
<table>
 <tr>
   <td>Nome:</td>
   <td><input type="text" name="nome" size="40"> <br /></td>
 </tr>
 <tr>
   <td>Sobrenome:</td>
   <td><input type="text" name="sobrenome" size="40"> <br /></td>
 </tr>
</table>

E o belo resultado é:

Nome:
Sobrenome:

Atributo maxlength - Tamanho máximo da caixa de texto

O atributo size que usamos no exemplo passado serve para definir o tamanho visível deste tipo de formulário, mas experimente escrever nele.
Pode escrever o tanto que quiser,que vai caber.

Ora, as vezes vamos querer limitar o tanto de caracteres que é possível escrever.

Por exemplo, vamos supor que seja necessário pedir a idade de seu leitor, a idade dele pode ter um caractere (se for uma criança de até 9 anos), 2 caracteres (o mais comum) ou 3 (sim, pode haver pessoas com 100 ou mais anos acessando seu site, vai saber...).

Para isso, usamos o atributo maxlength que serve para dizer o tamanho MÁXIMO de caracteres que é permitido escrever. Vamos fazer o caso da idade:

<input type="text" name="idade" size="10" maxlength="3">

O resultado será:  

Tentem colocar 4 caracteres.
Não dá.
Afinal, você limitou para 3, e você é o webmaster, você que manda :)

Exercício usando o atributo maxlength  da tag <input>

Faça um site que exiba duas caixas de texto para pedir o número do CEP da rua de seu leitor.
Lembrando que o CEP tem no total de 8 caracteres, com um hífen antes dos 3 últimos dígitos.

Primeiros criamos um campo para o leitor de seu site colocar os cinco primeiros dígitos.
Mostramos um hífen, e em seguida outro formulário, outra caixa de texto, mas agora com o limite de 3 caracteres.
O código HTML desses formulários é:
CEP: <input type="text" name="cep" size="5" maxlength="5"> - <input type="text" name="cep2" size="3" maxlength="3">

E o resultado será:
CEP: -

Fantástico e simples, não?
E olha que estamos só começando a estudar formulários!



O atributo value - Valor inicial nas caixas de texto

Com certeza você já deve ter tido que preencher o seu ano de nascimento.
Vamos supor que você nasceu em 1990. Você pode preencher como '1990' ou só '90'.
Por isso é comum nós encontrarmos essa indicação, geralmente um valor já dentro da caixa de texto dizendo 'aaaa' (para 1990) ou 'aa' (para 90).

Pois bem, para colocarmos valores pré-definidos nas caixas de texto vamos usar o atributo value, que recebe como valor aquilo que você quer que apareça!

Exercício do atributo value da tag <input>

Crie um site que peça ao usuário para ele preencher a data de nascimento no formato 'dd-mm-aaa', onde 'd' representa o dia, 'm' o mês e 'a' o ano de nascimento.
Para isso, use três formulários do tipo caixa de texto, limitados quanto ao número de cada caracteres.

Se estudou direitinho este tutorial de nossa apostila HTML Progressivo, vai saber criar as três caixas de texto, dar nome a cada uma delas, definir o tamanho o tamanho de cada um dos campos e o valor inicial (ufa).

O código HTML será:
Data de nascimento: 
<input type="text" name="dia" size="2" maxlength="2" value="dd"> 
<input type="text" name="mes" size="2" maxlength="2" value="mm"> 
<input type="text" name="ano" size="4" maxlength="4" value="aaaa">

E o resultado é:

Data de nascimento:

5 comentários:

Anônimo disse...

Estão de Parabéns, belos tutorias, me ajudaram muito

Recomendado :)

Anônimo disse...

Bom dia,
Como faço para colocar o código para que fique no input assim:
/ /

Anônimo disse...

Muito bom! Me ajudou MUITO

Arrowster disse...

O atributo value é muito útil, porem como fazer para quando o usuário clicar na caixinha e a string que estiver dentro apagar automaticamente?

Anônimo disse...

placeholder="seu texto aqui"