HTML Input: construindo formulários com HTML
Nesta documentação de HTML falaremos sobre a tag input e como ela pode ser utilizada para construir alguns tipos de formulários em HTML. Veremos como criar campos do tipo texto, senha, email, entre outros.
<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.
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.
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.
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.
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.
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.
Artigos relacionados
-
Artigo
-
Artigo
-
Artigo
-
Artigo
-
Artigo