HTML BÁSICO – PARTE 5 – FORMULÁRIO

HTML Básico – Parte 5 – Formulário

Introdução a Formulário em HTML

Olá pessoal, bom dia!
Hoje iremos falar sobre formulários em HTML, a necessidade, variações de elementos e definições da estrutura.
Espero que gostem!

Conheça os outros artigos

FORMULÁRIO

Os formulários são utilizados para entrada de dados e são uma das formas de maior interação entre o usuário e o web site.
Caso o usuário queira entrar em contato pelo próprio site, por exemplo, nós temos o formulário de contato para que ele digite suas dúvidas e nos envie para que possamos responder e interagir com ele.
Muito importantes no meio web.

CONSTRUÇÃO

O formulário é definido pela tag <form>. Essa tag indica o começo de um formulário e tudo que estiver dentro dela será compreendido como elementos de formulário.

 

 

LABEL

<label> é o título, rótulo do campo. Com ele sinalizamos ao usuário o que gostaríamos que ele informasse no campo.

Sua sintaxe é muito simples:

 

 

 

 

INPUT

Como eu disse anteriormente, o formulário é utilizado para inserção de dados, portanto precisamos de campos (inputs) para que o usuário possa digitar tais informações.

Os campos mais utilizados são os famosos (inputs) que são definidos pela tag <input>. Com eles podemos construir campos de texto, campos para seleção e até mesmo botões de ação.

Para definirmos qual o tipo do campo que queremos, precisamos informar o atributo (type). Com esse atributo do input nós dizemos ao HTML qual o tipo de campo vai ser construído.

Os tipos de <input> mais utilizados são:

Tipos de input

TipoFinalidadeExemplo
text Inserção de texto
checkbox Caixa de seleção. Muito utilizado para que o usuário possa selecionar mais de uma opção    
radio Campo radial de opção. Muito utilizado para restringir o usuário a somente uma seleção de opção.    
password Campo para inserção de senhas. Idêntico ao “text”, mas os dados informados são apresentados são omitidos por uma série de asterísticos (*).
email Campo para inserção de email.
submit Cria um botão que é utilizado para enviar as informações do formulário. Necessita do atributo “value” para definir o nome do botão.
button Cria um simples botão. Necessita do atributo “value” para definir o nome do botão.
reset Cria um botão, que ao ser clicado, elimina todos os dados informados nos campos do formulário. Necessita do atributo “value” para definir o nome do botão.
file Cria campo para seleção de arquivos.

Além dos (inputs) nós temos outros elementos de formulário para seleção e inserção de texto.

ESTÁ GOSTANDO DESTE ARTIGO?

Então não deixe de compartilhar com seus amigos. Ajude a Tutorial Web Design a crescer ainda mais.

 

TEXTAREA

O textarea é utilizado para a inserção de uma grande quantidade de texto.
Muito utilizado para inserção de comentários e especificações de produto.

Obs: observe que este elemento necessidade da tag inicial e do fechamento, diferente da tag input, que somente necessita da tag de abertura.

 

Este elemento possui alguns atributos importantes: ‘rows=””‘ e ‘cols=””‘.

rows: Defini a quantidade de linhas que o textarea terá como default;
cols: Defini a quantidade de colunas que o textarea terá como default;

Se aplicarmos ao textarea os atributos acima com os valores “cols=’100′ e rows=’5′”, nós teremos o seguinte resultado.

 

SELECT

O select é um menu suspenso que permite a seleção de um ou mais itens.
Muito utilizado para seleção de localidade, quantidade e etc.

Este elemento possui alguns atributos importantes: multiple e size.

multiple: Defini que o campo será de seleção múltipla;
size: Defini quantos itens serão apresentados inicialmente. Por default o campo já vem com 4 itens a amostra;

Aplicando os atributos acima, temos:

CONSTRUINDO O FORMULÁRIO

Agora que vocês já aprenderam sobre alguns elemento de formulário em HTML, vamos construir nosso primeiro formulário.





 Aceita receber nossas novidades

FINALIZANDO

Esse tutorial foi uma introdução sobre formulários em HTML. Existem outras tags e formas de se construir formulários.

Na próxima aula irei apresentar mais informações. Esse tema é bastante delicado e precisamos estudar mais aprofundadamente.

Qualquer dúvida estou a disposição para responder.

Se gostram do tutorial, não deixem de comentar. ok?!

Muito obrigado e até a próxima

Envie um Comentário

Comentários

Seja o primeiro a comentar

Artigos Relacionados