Trabalhando com Fomulários

- Formulários -

Formulários são meios usados para a interação do usuário com um site. Eles permitem que os usuário envie seus dados para uma página.
Para criar um formulário utilizamos a TAG <form>. Outros elementos que vamos utilizar são:

• Label: É um rótulo para o input.
• Input: É uma caixa onde podemos informar diferentes dados. Ele precisa vir acompanhado de uma informação sobre o que deve ser digitado nele.
  • type:
    • text
    • email
    • password
    • date
    • number: min="" ou max=""
    • radio: value="", label, name="" (definir valores do mesmo grupo), e checked (define valor padrão)
    • month
    • range
    • search
    • file: Com o atributo accept, é possível definir os tipo de arquivos permitidos.
    • image
    • checkbox: pode ser usado com o checked, para já vir marcado.
    • etc.
  • placeholder: Apelido ou dica para o campo.
  • name: É o campo usado pelo servidor para identificar de onde está recebendo a informação.
• Select: cria uma caixa de seleção. Utilizamos o elemento option + value="".
• Textarea: Permite inserir mais de uma linha de texto no formulário.
  • maxlength="": máximo de caracteres permitido no campo.
  • minlength="": mínimo de caracteres permitido no campo.
  • name=""
  • id=""
  • cols="30"
  • rows="10"
• Button: podemos criar um botão usando o Input com o atrubito submit ou o button, com o atributo submit:
  • submit: envia os dados do formulário para a página de web definida pelo atributo action do elemento <form>
  • reset: redefine imediatamente todos os campos do formulário para o seu valor padrão.
  • button: ele pode assumir qualquer comportamento através linguagem JavaScript, por exemplo.
  • fieldset: Agrupa elementos dentro de um campo. É usado junto com o atributo legend.
• Required: Torna o campo com este atrubito de preenchimento obrigatório.

• Action: define o endereço (uma URL) para o qual os dados recolhidos do formulário devem ser enviados.
• Method: define qual o método HTTP para enviar os dados (ele pode ser:
  • "GET": Envia os dados do formulário através da URL, deixando-os visíveis no endereço da requisição, como acontece na busca do Google.
  • "POST": Envia os dados em um bloco separado da URL, sendo considerado mais seguro por isso. Normalmente é usado para enviar dados sensíveis, como a senha de um usuário, por exemplo.

Exemplo de formulário:

        <form action="" method="GET">
            <fieldset>
                <legend>Conta</legend>
                <div>
                    <label>E-mail:</label>
                    <input type="email" placeholder="email@email.com.br" name="contaEmail" required minlength="10" maxlength="100">
                </div>
                <div>
                    <label>Senha:</label>
                    <input type="password" name="contaSenha">
                </div>
            </fieldset>
            <fieldset>
                <legend>Dados Pessoais</legend>
                <div>
                    <label>Nome:</label>
                    <input type="text" placeholder="Ex: Lívia Sales" name="dadosNome">
                </div>
                <div>
                    <label>Sexo:</label>
                    <input type="radio" value="masculino" name="sexo" checked>
                    <label>Masculino</Label>
                    <input type="radio" value="feminino" name="sexo">
                    <label>Feminino</label>
                </div>
                <div>
                    <label>Data de Nascimento:</label>
                    <input type="date" name="dadosDataNascimento">
                </div>
                <div>
                    <label>Foto de Perfil</label>
                    <input type="file" accept="image/*" name="dadosFoto">
                </div>
            </fieldset>
            <fieldset>
                <legend>Endereço</legend>
                <div>
                    <label>Número:
                    <input type="number" min="0" max="999" placeholder="111" name="enderecoNumero">
                </div>
                <div>
                    <label>Estado:
                    <select name="enderecoEstado">
                        <option value="RJ">Rio de Janeiro</option>
                        <option value="SP">São Paulo</option>
                        <option value="MG">Minas Gerais</option>
                        <option value="BA">Bahia</option>
                    </select>
                </div>
            </fieldset>
            <fieldset>
                <legend>Anúncio</legend>
                <div>
                    <label>Como você conheceu a DevMedia</label>
                    <textarea maxlength="256" placeholder="Explique como você chegou aqui..." name="comoChegouAqui"</textarea>
                </div>
                <div>
                    <input type="checkbox" checked name="receberAnuncio">
                    <label>Deseja receber ofertas por e-mail?</label>
                </div>
            </fieldset>
            <input type="submit" value="EnviarInput" name="enviar">
            <button type="submit" name="enviar">EnviarButton</button>
        </form>
    

Expressões Regulares - RegEx

        <input type="text" placeholder="Ex: (99) 99999-9999" pattern="\([0-9]{2}\)[\s][0-9]{5}-[0-9]{4}" name="dadosTelefone">