Elemento <input>:

Para utilizarmos o form é um bom hábito usarmos a tag semântica <form> que vai servir como um container para os nossos forms.

A seguir, dentro da nossa tag <form> nós podemos usar as tags de input para que o usuario coloque suas informações dentro da mesma.

Cada tag de input segue com um tipo e o nome desse tipo, por Exemplo: <input type="text"> que será um input de texto. Nós temos tipos variados de input.

Sendo alguns desses tipos:

Elemento <label>:

Junto dele podemos usar a tag <label></label> para darmos um nome e aumentar a area de aperto daquele input. Na verdade, também é comumente utilizado para ajudar os deficientes com a acessibilidade.

para usarmos a tag label primeiro nós damos um id ao input: <input type="checkbox" id="idcheckbox"> e em seguida abrimos uma tag label <label for="idradio">nome para o radio.</label> desta forma dando o nome ao input. O for=" " usado dentro da tag label serve para especificarmos a tag correta, tudo isso, claro, dentro da tag <form>.

Assim ficando:

Para que consigamos "submitar" nossos dados do input, devemos adicionar um atributo nome a tag de input, assim tendo o direito de extrair os dados no nosso banco de dados.

Atributo Target:

Dentro da tag de form nós temos o atributo de ações, este atributo pega os nossos dados e envia eles ao arquivo server-side extrair.

outro metodo que temos é o target=" " que é seguido de alguns valores e que também pode ser usado em links com a tag <a>.

Exemplo:

Outros metodos:

Um metodo bem útil é o autocomplete=" ", com ele o navegador pega os dados digitados pelo usuario anteriormente e demonstra recomedanções para completar o input.

Elemento <select>:

Com o elemento select nós podemos criar um dropdown com opções para formulario.

Para fazer isso, primeiro nós abrimos a tag <select> e dentro dela abrimos as tag de opções cujo nome é <option>. Para cada opção que tivermos no nosso dropdown, uma tag <option> deve ser aberta.

Exemplo:

Dentro dele temos alguns atributos como:

size="numero" para dizer quantas opções devem aparecer de uma vez.

multiple, permite que o usuario escolha mais de uma opção.

Elemento <textarea>:

A tag <textarea> define uma area de texto para que o usuario digite, comumente usado em areas de mensagens ou reclamações.

podemos definir o tamanho dele utilizando os rows="numero" que diz quantas linhas (altura) serão mostradas e o cols="numero" que diz a largura do campo de texto.

Exemplo:

Elemento <button>:

Essa é um elemento simples. <button> ele é um botão que ativa uma ação ao apertarmos nele.

usando o atributo onclick="função" podemos atribuir um evento ao botão.

Exemplo:

Elemento <fieldset> e <legend>:

<fieldset> é usado para criar um espaço, geralmente usado para formularios. <legend> se usa juntamente ao fieldset para dar um nome a aquele espaço.

Exemplo:

geralmente é utilizado em formularios e páginas de cadastro e login.

Elemento <datalist>:

É bem parecido com o uso do label, porém aqui nós utilizamos ele para adicionar seleções em campo de texto com autocomplete.

Exemplo:

Input Type text:

O input de tipo texto, como o nome diz, pega os caracteres que foram digitados pelo usuario.

Input Type password:

Este tipo é geralmente utilizado em formularios de cadastro e login. O tipo password impede que o texto digitado seja mostrado.

Input Type submit:

Tipo submit nos permite enviar os dados digitados pelo usuario no formulario.

Input Type reset:

Reset faz com que os dados digitados sejam resetados. Usado caso o usuario tenha digitado algo errado e queira apagar tudo.

Input Type radio:

Botões radio permite que o usuario escolha apenas UMA opção.

Input Type checkbox:

Diferente do tipo radio, o tipo checkbox permite que o usuario escolha diversas opções ao mesmo tempo.

Input Type button:

Cria um botão no nosso site que sendo utilizado juntamente do atributo onclick=" "> ou uma função javascript nos permite fazer com que eventos ocorram ao apertar no botão.

Input Type color:

Cria uma grade de escolhe de cores RGB.

Input Type date:

Utilizado também em formularios, o input Date permite que o usuario diga, geralmente, sua data de aniversário.

Input Type datetime-local:

Parecido com o tipo date, porém adiciona uma opção de horas.

Input Type email:

um campo de input para email que é validado automáticamente.

Input Type file:

Abre um campo de upload para arquivos.

Input Type number:

input para seleção de numeros

Input Type range:

Parecido com o tipo number, porém em um formato de slider.

Input Type search:

Tem a mesma propriedade do tipo text, este tipo é como uma semântica com um adicional de botão para apagar o conteudo escrito.

Input Type tel:

Da mesma forma que o email, esse tipo é usado para validar números de telefone.

Input Type url:

Pega e valida a url digitada pelo usuario.

Atributo value=" ":

O atributo value define um valor inicial para o input.

Atributo readonly:

Faz com que o input seja apenas legivel, mas o usuario ainda pode copiar o input.

Atributo disabled:

Sendo mais autoritario que o readonly, este atributo faz com que o atributo seja impossivel de sequer ser selecionado.

Atributo size:

Define um valor de quanto o usuario poder ver para o atributo.

Atributo maxlength:

Diz o valor máximo de caracteres que podem ser postos no input especificado.

Necessario o uso de javascript para dar um alerta.

Atributo min e max:

Define um valor minimo e máximo de caracteres que podem e devem ser colocados no input.

Necessario o uso de javascript para dar um alerta.

Atributo multiple:

Permite que o usuario selecione mais de uma opção.

Atributo placeholder:

Da uma dica ao usuario do que deve ser posto no input.

Atributo required:

Só permite que o formulario seja feito caso os input com este atributo sejam preenchidos.

Atributo autofocus:

Faz com que o input seja focado na hora que a página carregar

Atributo height e width:

Muda o x e y até o local especificado para aumentar o campo de aperto.