Formulários / Form

<form></form> Utilizada, pra definir o inínio e o final de um formulário, tag form
possui um atributo importante chamado action, ela atribui e define pra onde a url vai
receber os dados do formulário, que deve se apontada um uma pagina no back-end.

Formulário precisa pelo menos ter dois elementos um campo e um botão.

<textarea>: onde o texto sera escrito pelo usuario </textarea>
<textarea name="sugestão"> dentro da tag textarea, colocamos o name, pra definir
um nome pra este campo. E por esse name que o back-end tem acesso ao conteúdo digitado
na textarea.
Existe uma forma mais segura de enviar esses dados através do atributo method.
o method pode ter dois valores get e post
<form method="get"> Mostra os dados enviados do formulário.
<form method="post"> É mais seguro pois nao mostra os dados enviados do formulário.
<button>: onde sera o botão de envio do que foi escrito. </button>
<button type="submit"> dentro da tag button, inserimos o type e definimos o valor submit
isso faz com que o botão envie os dados do formulário para o back-end, quando clicado.
Entre as TAGS colocamos o texto que vai aparecer dentro do botão (ex: Eviar Sugestão)
INPUT: Tag que permite que o usuario faça uma curta digitação no campo
Ex: <form action="<https://www.devmedia.com.br/codigos/formularios/aula3/>">
			<input type="text" name="nome" />
			<button type="submit">Enviar formulario</button>
		</form>
input nao recebe tag de fechamento com o / é uma tag única, adcionamos o atributo name
para que o back-end receba as informações digitadas através do campo.

Untitled

Tipos de Input

<input type="text"> : "text" serve pra digitação de texto.
<input type="password">: "password" serve pra digitação de senhas.
<input type="date">: "date" serve pra aparecer o calendario e colocar datas
<input type="number">: "number" serve pra colocar numeros.
<input type="email">: "email"  serve pra digitar o email no campo.
<input type="tel">: "tel" serve pra colocar telefone no campo.
No HTML pode ter varios inputs porem fica difícil saber onde vai ser digitado cada campo
sem a informação de um label pra informar cada campo. Melhor forma de identificar é colo-
canto a tag <label>nome</label> em cima de cada input pra identificar os campos.

Atributos dos Inputs:

*** Placeholder: server pra colocar ume ex: dentro do campo pro usuário saber como fazer.
OBS: o placeholder não é compatível com o input do tipo date.**
<label>Nome:</label>
<input placeholder="Digite seu nome completo" type="text" name="nome"/>
*** Required: Deixa claro pro usuário que o campo que tem esse atributo é obrigatorio
o preenchimento dele pra que o formulario seja enviado.**
<label>Email:</label>
<input placeholder="[email protected]" required type="email" name="email"/>
*** Minlength e Maxlength: Atibruto que que limita a quantidade de caracteres usado.**
<label>Senha:</label>
<input type="password" name="senha" minlength="4" maxlength="6"/>
*** min e max: São usados pra number e date, define o menor e o maior valor pode ser incluso**
<label>Idade:</label>
<input type="number" name="idade" min="18" max="90"/>
<label>Data de Nascimento</label>
<input type="date" name="data" min="2022-03-01" max="2022-03-15"/>

Checkbox: Checkbox é uma forma de resolver opções de múltipla escolha pro usuário

**Nesse exemplo: vemos que o check ser dado dentro da checkbox do lado do label**
<input type="checkbox" name="esportes[]" value="futebol"/>
   <label>Futebol</label>
**Tambem podemos utilizar a propria label pra marcar a checkbox colocando ID no input e no
label o for como no ex:**
<input type="checkbox" id="checkbox-futebol" name="esportes[]" value="volei"/>
   <label for="checkbod-futebol">Vôlei</label>
**Podemos tambem englobar um formulario checkbox pra facilitar a separação ex:**
<div class="categoria categoria-generos">
   <h2 class="titulo-categoria">Quais seus gêneros de jogo preferidos?</h2>
      <div class="grupo-opcao">
         <input type="checkbox" id="check-acao" name="generos[]" value="Acao">
          <label for="check-acao">Ação</label>
      </div>
</div>

Radio: Checkbox permite a marcação de múltiplas escolhas, mas nem sempre é isso que queremos, input radio, resolve isso permitindo apenas uma escolha por opção.

<input type="radio" name="resposta" id="animal-sim" value="sim"/>
	<label for="animal-sim">Sim</label>
<input type="radio" name="resposta" id="animal-nao" value="nao"/>
	<label for="animal-nao">Não</label>
**Checked: pode ser usado no radio pra que o valor ja comece marcado por padrão**
<input type="radio" name="resposta" id="animal-sim" value="sim" checked/>
	<label for="animal-sim">Sim</label>
**Requeired: tambem pode ser utilizado na categoria radio. Assim a marcação é obrigatoria.**
<input type="radio" name="resposta" id="animal-sim" value="sim" required/>
	<label for="animal-sim">Sim</label>

Select: Podemos usar checkbox e radio para muitos campos, mas o visual acaba ficando ruim e confuso.

Untitled

Select pode ser utilizado para resovler casos como esse.

Untitled

**Como fazemos pra utilizar a tag select.**
<select name="cores"> Todo select deve ter o atributo name, para que o backed receba a info
	<option value="blue">Azul</option>
	<option value="red">Vermelho</option>
	<option value="yellow">Amarelo</option>
	<option value="pink">Rosa</option>
</select>
**Valor idicial da box é utilizado selected:**
<select name="cores">
	<option value="blue">Azul</option>
	<option value="red">Vermelho</option>
	<option selected value="yellow">Amarelo</option> **vai ser o que vai aparecer no box.**
	<option value="pink">Rosa</option>
</select>
**Podemos forçar ao usuário a marcar algum valor utilizando valor vazio** 
<select name="estados" required> **Tambem pode ser utilizado a opção required. no select**
	<option value-"">--</option> **Valora vazio pra que nao apareceça algo e o usuário selecionar o estado**
	<option value="AC">Acre</option>
	<option value="AL">Alagoas</option>
	<option value="AP">Amapá</option>
	<option value="AM">Amazonas</option>
</select>

Optgroup: Agrupamento no select

<select name="jogo">
  <optgroup label="Xbox">
    <option value="gearsofwar">Gears of War</option>
    <option value="haloinfinite">Halo Infinite</option>
    <option value="forzamotorsport">Forza Motorsport</option>
    <option value="forzahorizon">Forza Horizon</option>
  </optgroup>

  <optgroup label="PlayStation">
    <option value="godofwar">God of War</option>
    <option value="uncharted">Uncharted</option>
    <option value="thelastofus">The Last of Us</option>
    <option value="granturismo">Gran Turismo</option>
  </optgroup>

  <optgroup label="Nintendo">
    <option value="mariokart">Mario Kart 8 Deluxe</option>
    <option value="zelda">The Legend of Zelda</option>
    <option value="mario">Super Mario Odyssey</option>
  </optgroup>
</select>
**Em alguns casos pode ser utilizado o select múltiplo**
**ex:** <select name="jogos[]" multiple>
**Quando selecionado a opções [] no name será indentificado no back-end
Pra fazer a seleção de varias opções basta segurar o CTRL e selecionar varias opções**
<select name="jogo[]" multiple>
  <optgroup label="Xbox"> **optgroup tem um atributo label pra identificar o englobamento.**
    <option value="gearsofwar">Gears of War</option>
    <option value="haloinfinite">Halo Infinite</option>
    <option value="forzamotorsport">Forza Motorsport</option>
    <option value="forzahorizon">Forza Horizon</option>
  </optgroup>

  <optgroup label="PlayStation">
    <option value="godofwar">God of War</option>
    <option value="uncharted">Uncharted</option>
    <option value="thelastofus">The Last of Us</option>
    <option value="granturismo">Gran Turismo</option>
  </optgroup>

  <optgroup label="Nintendo">
    <option value="mariokart">Mario Kart 8 Deluxe</option>
    <option value="zelda">The Legend of Zelda</option>
    <option value="mario">Super Mario Odyssey</option>
  </optgroup>
</select>
**Tamanho do select
ex:** <select name="jogo" size="8" multiples>
a lista vai aparecer 8 itens da lista

Fieldset: é uma sixtaxe pra agrupamento de informações.