Olá pessoal, como sabemos a internet é basicamente formulário kkk dos seus mais variados tipos, tente me convencer do oposto, bom pensando nisso, fiz um resumo para estudo de como criar um formulário.

Form

Para aprender sobre formulários, só precisamos ter como pré-requisitos o HTML-Básico, porém se quisermos dominar precisamos entender de:

• Estilização
• Validação
• Controles Customizados
• Javascript

<form></form>

É o elemento que definirá um formulário, é também um container assim como <section> e <footer>

• Não podemos criar um <form> dentro de um <form>

Atributos básicos

• action

  • O action vai ser para onde os dados serão enviados. Se deixarmos o ele vazio, significa que os dados do formulário serão enviados para a mesma página.

  <form action="" ></form>
  

• method

  • method sempre irá definir como os dados serão enviados para o endereço do action, a princípio temos 2 valores “GET” e “POST”
    • GET ⇒ Os dados ficam expostos na URL
    • POST ⇒ Os dados ficam invisível

  por padrão caso nãos seja definido um method, ele irá definir GET como padrão.

  <form action="" method="GET" ></form>
  
  

  Fieldset legend

  Dentro de formulário é muito importante saber como agrupar as informações.

  Com essa tag podemos fazer o agrupamento de campos, que tenham o mesmo propósito, assim deixando o HTML mais semântico, e aumentando a acessibilidade.

  Atributos especiais

  • disabled ⇒ Desabilita todos os elementos internos, dentro do fieldset assim os dados do fieldset que estiverem desabilitados ****não serão enviados ao submeter o formulário.
  • form ⇒ Vai permitir que a gente link o fieldset com algum formulário da nossa página ao qual o fieldset vai pertencer, ou seja o fieldset não precisa estar dentro do formulário se a gente colocar o atributo e o ID correto.
  • name ⇒ Define o nome do grupo do fieldset. o name não aparece na tela, é mais voltado a semântica do código.
  • legend ⇒ É o nome de fato do agrupamento que vai aparecer na tela, e é o primeiro elemento dentro do fieldset

  <Label>

  O label serve para associar e identificar uma ou mais tags de entrada de dados, também serve para a acessibilidade, podemos clicar para mudar o foco da entrada e dados.

  Com o uso do atributo for podemos fazer uma conexão entre este label e a tag de entrada de dados, isso é feito via Id do input, porém só funciona com elementos específicos: button, input (not hidden), meter, output, progress, select, textarea

  <label for="nome">Nome Completo</label>
  <input id="nome" type="text">
  

  <button>

  Elemento que vai representar um botão, usado para enviar formulários, é estilizado pelo user agent

  Atributos comuns

  • Type
    • submit
    • reset
    • button
  • autofocus
  • disabled
  • name
  • value
  • form

  datalist

  Essa tag sugere para os usuários uma lista de valores.

  • Os valores são sugestivos e não obrigatórios
  • usuários poderão selecionar um dos valores, ou colocar um valor diferente da sugestão.

  List

  Recebe como valor o id de um residente no mesmo documento.

  <input
  	type="text"
  	list="frutsdata"
  	placeholder="Escolha uma fruta" />
  
  <datalist id="frutsdata">
  	<option>apple</option>
  	<option>Banana</option>
  	<option>manga</option>
  	<option>orange</option>
  </datalist>
  

  Tipos de inputs suportados

  text, search, url, tel, email, date, month, week, time, datetime-local, number, range, color

  Se os valores que estão no datalist não for suportado, ele nãos será mostrado para o usuário.

Input

Um dos mais usados em formulários, aceita os mais diversos tipos de dados, um dos mais poderosos e complexos, existe um elevado número de combinações.

Atributos do input

• Type ⇒ onde a maioria dessas combinações são pelo atributo type, onde define qual tipo de input.
• autocomplete ⇒ busca no navegador as entradas mais usadas no navegador do usuário, para sugerir o autocomplete.
• autofocus ⇒ só um por página, ele foca o cursor do mouse no atributo.
• disable ⇒ desabilita à entrada de dados.
• value ⇒ no value, deixa um valor padrão na caixa de entrada.
• readonly ⇒ parecido com o disable.
• form ⇒ serve para linkar um formulário.
• name ⇒ para usar o form, precisamos usar o name. para resgatar o valor mais tarde.
• required ⇒ quando tentar enviar um formulário, significa que o input é obrigatório.
• placeholder ⇒ na documentação fala que só pode ser usado nos campos (password, search, tel, text, url) porém podemos usar em quase todos os campos, podemos usar o placeholder, mostra um texto dentro da caixa, exemplificando como é a entrada.

Password

temos como controlar muito o campo de password

atributos do password

• minlength ⇒ tamanho mínimo de caracteres aceitos na entrada de dados do input
• maxlength ⇒ tamanho máximo de caracteres aceitos na entrada de dados do input
• size ⇒ reduz o tamanho da caixa do input
• parttern ⇒ usa expressões regulares para validar o que está sendo digitado no campo.
  • altamente recomendado o uso de um padrão de segurança de senhas, exemplo: queremos que a senha contenha caracteres: hexadecimais com o limite de no mínimo 4 e no máximo 8 caracteres.
    • pattern” [0-9a-fA-F] {4,8}”
• tittle ⇒ mostra um texto auxiliar para o usuário
• inputmode ⇒ pode alterar o uso do teclado do smartphones. exemplo: ao em vez de abrir o teclado normal, abre o numérico
• autocomplete ⇒ permite a sugestão de senhas seguras

file

usuário poderá escolher 1 ou mais arquivos para enviar no formulário

atributos

• value ⇒ contém o primeiro arquivo enviado, caso tenha mais de um arquivo anexado, então ele irá conter o primeiro da lista.
• files ⇒ contém a lista de arquivos anexado
• accept ⇒ descreve que tipos de arquivos são aceitos
  • exemplo: .doc, .docx, .pdf, audio/*, image/png, .png
• multiple ⇒ serve para enviar mais de um arquivo
• enctype ⇒ precisamos ter a seguinte estrutura

<form action="" method="post" enctype="multipart/form-data">
	<input type="file">
</form>