Formulário

Todo formulário começa com a tag pai "form", dentro dessa tag existem vários itens que vão formar esses formulários, o primeiro que veremos é o "input".
Nesse atributo input existem vários tipos, que seria o atributo type. Nele existem os tipos (text, password(senha), email



Placeholder

Temos uma outra propriedade que podemos colcar que é o placeholder. Essa função vai colocar um texto dentro da caixa de entrada, é usada para indicar o que o usuário deverá colocar ali



Label

Também temos o atributo "label" que é utilizado como legenda para o input (caixa de entrada).
Podemos colocar uma função de caso o usuário clique em cima da tag label, ela vá direto para a caixa de texto utilizando. Para isso nós devemos acrescentar uma id na tag input e colocamos a o atributo "for" dentro da tag de abertura label.



Type Password

Mudando o tipo do atributo type para password, faz com que o que for digitado dentro do campo fique censurado



Type Email

Outro tipo que nós utilizamos no atributo type, é o tipo Email. Com essa característica do tipo email, ele reconhece se o que o usuário digitou no campo é um email ou não.



Type Submit

Um tipo que utilizamos também é o tipo submit(enviar). Esse tipo faz que seja criado um botão para que seja confirmado o envio de todo aquele formulário.
Para esse tipo, nós precisamos acrescentar o atributo "value" para dizer qual o texto dentro da caixa.







Atributos para tag Form

Nós colocamos alguns atributos para indicar para onde esse formulário vai ir assim que for utilizado o botão submit.

Action

Temos o atributo "action" que vai indicar para onde que vai aquela informção, normalmente é um arquivo do tipo php






Required

Nós podemos adicionar atributos nos campos de inserir dados, para que aquele campo seja obrigatoriamente inserido para que seja enviado.
Para isso nós utilizamos o atributo "required" dentro da tag "input".






Type Radio

O tipo "radio" é o tipo de entrada questões de alternativas, onde só podemos selecionar uma opção.
Para esse tipo nós precisamos adicionar um atributo "name" para identificarmos aquele grupo, ela deve ser utilizada para todas as opções que tiver naquele grupo e um atributo "valeu" para cada um dos itens para que possamos adicionar um valor para aquela opção
(esse valor não vai aparecer para nós, mas ele vai estar no formulario quando enviarmos).

Animais de Estimação








Type Checkbox

O tipo "Checkbox" tem a mesma função que o tipo "Radio", a diferença é que no "Checkbox" nós temos a função de múltipla escolha.
Diferente do tipo "radio", aqui nóa temos que adicionar um atributo "name" para identificar cada elemento, ela deve ser usada apenas para ela e também um atributo "value" para cada um dos itens para que possamos adicionar uma valor para aquela opção.
(esse valor não vai aparecer para nós, mas ele vai estar no formulario quando enviarmos).

Itens de Casa








Campo Select

O campo select tem a função de dar ao usuário várias opções dentro de uma caixa para que o mesmo selecione. Como por exemplo: Forma de pagamento.
Nessa opção nós começamos com a tag "select" e dentro dela adicionamos uma subclasse "option", que como o próprio nome diz, vai ser as opções dentro da caixa de seleção. Para cada opção nós devemos colocar um atributo "value" que vai ser o dado que ela vai amarzenar e entre a abertura e o fechamento colocamos qual vai ser o nome daquela opção.



nós podemos colocar uma opçãos como se fosse um placeholder, apenas adicionando um novo "option" com o "value" nulo e com os atributos "selected" e "disabled"


Campo Textarea

Aqui nós colocamos uma caixa de texto, onde o usuário pode escrever algo. Para isso nós usamos a tag "textarea".
Nós podemos adicionar algumas propriedades nesse campo, como o "rows" que significa o número de linhas que vai ter essa caixa e o "cols" que significa as colunas ou a espessura da caixa.
Entre a abertura e o fechamento da tag.


Nós podemos digitar algo para que fique escrito algo dentro dessa caixa, podemos utilizar o "placeholder" para que fique algo dentro da caixa mas que não afete ela.


Tag Button

A tag button serve para criar um botão parecido com o botão do "input" do tipo "submit", a diferença é que esse vai ser um botão mais genérico


Input Types

No total são 21 (vou colocar os mesmos que já foram citados a cima)

Input padrão. Define um campo de texto de linha única-->

Define um campo para selecionar um número inteiro-->

Define um campo para senha-->

Define um botão de opção para seleção única-->

Define uma caixa de seleção para seleção de várias opções-->

Define um botão clicável (usado principalmente com um JavaScript para ativar um script)-->

Define um seletor de cores em hexadecimal-->

Define um campo para entrar com endereço de e-mail-->

Define um campo para selecionar um arquivo e um botão "Procurar" (para uploads de arquivo)-->

Define um campo oculto-->

Define uma imagem como o botão de envio-->

Define um controle de intervalo (como um controle deslizante)-->

Define um campo de texto para inserir uma string de pesquisa-->

Define um campo para inserir um número de telefone-->

Define um controle para inserir um horário (sem fuso horário)-->

Define um controle para selecionar data (ano, mês, dia (sem hora))-->

Define um controle para selecionar semana e ano (sem fuso horário)-->

Define um controle para selecionar mês e ano (sem fuso horário)-->

Define um campo para inserir uma URL-->

Define um botão para enviar os dados do formulário-->

Define um botão para reinicar o preenchimento do formulário-->

Voltar para a principal