Gostou do nosso conteúdo? Te ajudou?
Nos ajude também! Faça um PIX, de qualquer valor:
programacao.progressiva@gmail.com

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:

14 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"

Anônimo disse...

muito útil, bom trabalho!
Que continue assim

Unknown disse...

Mano eu to na merda preciso passar de ano, Crie uma página web que contenha uma caixa de texto e um botão. Nesta caixa de texto será informada a quantidade de números que serão informados. Quando o usuário clicar no botão, uma função criará: a quantidade de caixas de texto informada e outro botão que, ao ser clicado, armazene os valores informados em um vetor e em seguida percorra o vetor mostrando a raiz quadrada dos valores positivos e o quadrado dos números negativos.

Mary Mata disse...

Oi Boa tarde, estou fazendo um formulário e no campo data de nascimento, eu coloquei os código, mais as (boxs) estão distante uma da outra, como consigo aproximá-las?
Att Mary

Bruno R. disse...

Boa Noite. Eu gostaria de saber se há como uma palavra na caixa de texto servir de link para uma página. Exemplo, quero fazer um jogo onde para a pessoas salvar seu progresso, ela terá de digitar o nome da aba na caixa de texto e clicar ´´enter`` para ser transportado até a página em que parou, isso é possível? Agradeço a ajuda.

ninho das cobras disse...

Estou começando agora Programação, gostei muito dessa pagina

Unknown disse...

Como faço para inserir vários campos/parâmetros/textos (cada campo é um parâmetro a ser digitado pelo usuário) em uma caixa de texto?
Por exemplo:
Na primeira linha, faço um comando para fazer assim: Nome: (Campo - o usuário digita)
Na segunda linha, farei assim: Idade: (Campo - o usuário digita)
Na terceira, Nome da escola: (Campo - o usuário digita)
Daí no final, haverá uma caixa de texto que aparecerá preenchida automaticamente ao pegar parâmetros digitados acima assim:
Nome: Fulano
Idade: 20
Escola: Escola Rei Pelé
Entendeu? Pois necessito da caixa de texto para copiar valores já preenchidos para facilitar meu serviço aqui.

Luciano disse...

Muito bom! Me ajudou Muito...Obrigado

Unknown disse...

Alguém me sabe dizer como eu faço um formulário em que tenho um input com o primeiro nome e um com o segundo e depois um Botão pra juntar o primeiro e último nome num outro campo de texto? Preciso muito pra um trabalho em programação na escola

nikolas daltro disse...

Oi preciso adicionar uma caixa de sugestão e não estou conseguindo. Como faço?

Tutoriais de HTML e CSS