Artigos HTML e CSS HTML Input: construindo formulários com HTML

<input>

Nesta documentação de HTML veremos como a tag <input> pode ser utilizada para criar alguns tipos bem comuns de formulários em HTML.

Apresentaremos aqui como utilizar a tag <input>.

<input>: na prática


  <form>
      <input type="text" placeholder="Nome" name="nome"/>
      <input type="email" placeholder="Email" name="email"/>
      <input type="date" name="aniversario"/>
      <input type="tel" placeholder="Celular" name="celular"/>
      <input type="password" placeholder="Senha" name="senha" />
      <button type="submit">Cadastrar</button>
  </form>
Código 1. Exemplo de formulário de cadastro fictício utilizando diversos tipos de input

<input>: tipos

Existem diversos tipos de input no HTML e neste artigo veremos os mais utilizados, começando pelo text.

Text

De longe o tipo mais utilizado no HTML, o input text é utilizado para receber textos de qualquer tipo, tais como: nomes, telefones, emails etc.

Confira um exemplo do input text no Código 2.

<input type="text"/>
Código 2. Exemplo de input text

Veja um exemplo de texto para o input text na Figura 1.

Exemplo de texto para o input text
Figura 1. exemplo de texto para o input text

Email

O tipo email, como o nome sugere, é um campo de texto que tem como único objetivo receber e-mails. Confira um exemplo do input email no Código 3. 

<input type="email"/>
Código 3. Exemplo de input email

Veja na Figura 2 um exemplo de texto para o input email.

Exemplo de texto para o input email
Figura 2. Exemplo de texto para o input email

Date

O tipo date é um input que permite ao usuário selecionar uma data a partir de um calendário. Confira um exemplo do input date no Código 4. 

<input type="date"/>
Código 4. Exemplo de input date

Veja na Figura 3 um exemplo de valor para o input date.

Exemplo de valor para o input date
Figura 3. Exemplo de valor para o input date

Tel

O tipo tel é um input que tem como objetivo receber textos com formatos de telefone. Confira um exemplo do input tel no Código 5. 

<input type="date"/>
Código 5. Exemplo de input tel

Veja na Figura 4 um exemplo de valor para o input tel.

Exemplo de valor para o input tel
Figura 4. Exemplo de valor para o input tel

Password

O tipo password é um input utilizado exclusivamente para a digitação de senhas. Esse tipo de input oculta o conteúdo que está sendo digitado pelo usuário.

Confira um exemplo do input password no Código 6.

<input type="password"/>
Código 6. Exemplo de input password

Veja como dados são exibidos no tipo password na Figura 5.

Dados são exibidos no tipo password
Figura 5. Dados são exibidos no tipo password

Onde utilizar a tag <input>

A tag input é, na maioria das vezes, utilizada para a construção de formulários HTML para algum tipo de cadastro, formulários de contato, entre outros.

Um formulário pode conter um ou mais tipos de input diferentes nele.

Veja um exemplo de formulário utilizando múltiplos inputs no Código 7. 


  <form>
      <input type="text" name="nome" placeholder="Nome"/>
      <input type="email" name="email" placeholder="Email"/>
      <input type="password" name="senha" placeholder="Senha"/>
      <button type="submit">Cadastrar</button>
  </form>
Código 7. Formulário fictício com 3 tipos de input

See the Pen Untitled by Eduardo Soares (@eduscxbox) on CodePen.

Exemplos de formulários com diferentes inputs

Exemplo 1

No exemplo a seguir demonstramos um formulário de cadastro com quatro campos:

See the Pen Formulário de cadastro by Eduardo Soares (@eduscxbox) on CodePen.

Exemplo 2

Agora você pode conferir um simples formulário de login com dois campos:

See the Pen Formulário de Login by Eduardo Soares (@eduscxbox) on CodePen.

Exemplo 3

Também é possível criar formulários mais longos, como nesse exemplo com cinco inputs:

See the Pen Formulário longo by Eduardo Soares (@eduscxbox) on CodePen.

Através da tag <input> você poderá construir os mais diversos tipos de campos para formulários.