HTML5 & CSS3 – Formulários
Os formulários são um dos principais recursos, fornecidos pelo HTML, para a interação com o usuário. Geralmente, quando necessitamos que nossos usuários forneçam algum tipo de informação, que poderá ser armazenada, posteriormente, em um banco de dados, lhes fornecemos alguns campos de texto, onde eles poderão descrever o que lhes é solicitado.
Os formulários podem ser utilizados para várias finalidades: (i) cadastro de usuário, (ii) questionário ou pesquisa, (iii) busca por um ou vários termos e etc.
Criando um formulário:
Um formulário, em HTML, é delimitado pelas tags de abertura <form> e a de fechamento </form>; este elemento não possui representação visual, ele apenas agrupa os componentes de um formulário, funciona como um container, que determina para onde e como os dados serão enviados, geralmente para um servidor.
A seguir temos o exemplo do código de um formulário simples:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<form action="cadastro.php" method="POST"> <h4>Novo Usuário</h4> <label for="nome">Nome:</label> <input type="text" name="nome" id="nome"/> <label for="email">Email:</label> <input type="text" name="email" id="email"/> <label for="senha">Senha:</label> <input type="password" name="senha" id="senha"/> <input type="submit" value="cadastrar"/> </form> |
Dentre os atributos suportados por este elemento podemos destacar:
action: determina para onde os dados devem ser enviados quando o usuário submete/envia o formulário. O valor deste atributo sempre deve ser uma URL válida.method: define como os dados serão enviados até a URL especificada pelo atributo “action“, geralmente utilizamos um dos seguintes valores:post: utilizado quando os dados devem ser enviados no corpo da mensagem HTTP, logo serão invisíveis para o usuário;get: neste caso os dados serão enviados junto com a URL, e desta forma, estarão visíveis para os usuários, que poderão, inclusive, altera-las, o que pode gerar alguns incidentes de segurança.
autocomplete: este atributo permite desabilitar (off) o comportamento padrão, da grande maioria, dos navegadores, os quais sugerem valores para os campos baseados em preenchimentos anteriores. Ou seja, este atributo, desabilita a funcionalidade de “autocompletar” os campos/controles com dados armazenados pelos navegadores; mas sempre que necessário este comportamento pode ser habilitado (on).
Todo formulário precisa conter um
input do tipo submit, ou um button do mesmo tipo; estes elementos são os responsáveis por disparar o evento que enviará os dados contidos no formulário até a URL definida em action.
Os formulários já estavam presentes nas versões 3.2, 4.0 e 4.1 do HTML, mas eles eram um tanto quanto precários, todos os objetos precisavam estar presos dentro das tags de abertura (<form>) e fechamento (</form>); agora eles podem estar soltos pela página, basta que estejam associados ao formulário, neste caso precisamos utilizar o novo atributo “form” que deve apontar para o “id” do formulário correspondente. Com o HTML5 os formulários ganharam mais dois tipo de ação: (i) update e (ii) delete; lembrando que já tínhamos o (i) get e o (ii) post.
Elemento Input:
Com a versão 5 do HTML, ganhamos vários novos tipo (types) que podemos atribuir aos controles input. Mas, atualmente, ainda temos alguns problemas de incompatibilidade em alguns browsers. Quando um navegador não reconhece o tipo, atribuído ao elemento, ele será substituído pelo bom e velho <input type="text">, além disto, não há uma padronização na forma como estes campos serão apresentados pelo navegadores, oque pode causar certa dor de cabeça.O elemento
<input> é um coringa que permite a entrada de vários tipos de dados, seu comportamento é definido pelo valor do seu atributo “type“. Dentre os tipos de entrada de dados suportados pelos <input> podemos destacar: Tipo text
Este tipo, permite a entrada de textos curtos, no máximo uma linha, ele não apresenta restrições quanto ao conteúdo, nem possui validação.
Exemplo da Código:
|
1 2 3 4 |
<form> Nome <input type="text" name="nome" id="txtNone"> Sobrenome <input type="text" name="sobrenome" id="txtSobrenone"> </form> |
Além do atributo “
type“, sempre que possível, devemos utilizar, ao menos, mais dois atributos, o primeiro é o “name“, que determina o nome do campo, esta informação será enviada ao servidor na forma do nome de uma variável e cujo valor será igual ao conteúdo o atributo “value“. No exemplo anterior, quando o formulário fosse submetido seriam enviadas duas variáveis: (i) nome e (ii) sobrebnome. Logo, o atributo “name” é fundamental quando desejamos submeter os dados para um servidor ; o segundo é o atributo “id“, que é utilizado, por exemplo, para estilizar o elemento utilizando as regras do CSSTipo checkbox
Quando associado ao elemento
input, este tipo cria uma série de opções selecionáveis, que poderão ser escolhidas pelo usuário, sendo possível que mais de uma opção seja selecionadaExemplo de Código:
|
1 2 3 4 5 6 7 8 9 |
<from> Seleciona um ou varios gêneros: <input type="checkbox" name="generoFilme" value="1"> Ação <input type="checkbox" name="generoFilme" value="2"> Aventura <input type="checkbox" name="generoFilme" value="3"> Comédia <input type="checkbox" name="generoFilme" value="4"> Fantasia <input type="checkbox" name="generoFilme" value="5"> Ficção <input type="checkbox" name="generoFilme" value="6"> Terror </form><span style="font-size: 0.82em;"> </span> |
Observe que todos os elementos possuem o mesmo valor no atributo “
name“, neste caso “generoFilme“, mas para cada um deles está associado um valor (value) distinto.Tipo radio
Assim como o tipo anterior, este permite a construção de uma lista de opções, mas neste caso apenas uma pode ser selecionada.
Exemplo de Código:
|
1 2 3 4 5 6 7 8 |
<form> Selecione um Região <input type="radio" name="regiao" value="sul"> Sul <input type="radio" name="regiao" value="sudeste"> Sudeste <input type="radio" name="regiao" value="norte"> Norte <input type="radio" name="regiao" value="nordesre"> Nordeste <input type="radio" name="regiao" value="centroeste"> Centroesteå </form> |
ps: Lembre-se que todos os elementos do tipo
radio, que estão relacionados devem possuir o mesmo nome.Tipo password
Este tipo, pode ser utilizado na construção de campos para entrada de senhas, este elemento protege, visualmente, a senha substituindo o que é digitado por um carácter padrão. Dificultando um pouco a vida de um bisbilhoteiro.
Exemplo de Código:
|
1 2 3 4 |
<form> Senha : <input type="password" name="senha"> Confirmação : <input type="confirmação" name="senha"> </form> |
Tipo date
Este tipo de
input aceita apenas datas; em alguns navegadores quando este campo é selecionado se apresenta um calendário sobre o qual podemos selecionar uma determinada data; outras vezes o campo apresentará apenas uma mascara informando qual o formato em que a informação deve ser fornecidaExemplo de Código:
|
1 2 3 |
<form> Data de Nascimento : <input type="date" name="nascimento"> </form> |
O tipo
date nos permite determinar um intervalo de datas válidas e que poderão ser fornecidas pelos usuários:Exemplo de Código:
|
1 2 3 4 5 |
<form> Data de Nascimento : <input type="date" name="nascimento" nim="1950-01-01" max="2018-12-31"> </form> |
Observe que, as datas seguem o formato norte americano, ou seja: ano-mes-dia; sendo que o ano sempre deve ser informado com 4 dígitos.
Tipo color
Este tipo, fornece ao usuário um elemento que permite selecionar uma cor, dependendo do navegador este elemento pode ser rendirizado de várias formas. Geralmente o valor retornado está em formato hexadecimal (#AABBCC)
Exemplo de Código:
|
1 2 3 4 |
<form> Selecione uma cor : <input type="color" name="cor" value="#AABBCC"> </form> |
Tipo email
Ele permite verificar se o conteúdo do campo possui o formato de um endereço de e-mail válido; este campo pode ser enviado em branco, a não ser que possua o atributo “
required“; caso o atributo “multiple” esteja presente, podemos submeter mais de um endereço de e-mail válido, para isto devemos separar cada um deles por um vírgula (,)Exemplo de Código:
|
1 2 3 4 |
<form> E-mail: <input type="email" required multiple> </form> |
Tipo number
Esse, permite a entrada de valores numéricos, este elemento aceita os atributos
min e max, que definem o valor mínimo e o valor máximo aceitos. Outro atributo aceito é o “step” que determina o valor do incremento e decremento do campo.Exemplo de Código:
|
1 2 3 4 5 |
<form> Ano de Nascimento <input type="number" name="anoNascimento" required min="1910" max="2018" step="1> </form> |
Tipo range
Este elemento, geralmente, é renderizado como uma barra horizontal, cujos valores são limitados pelos atributos “
min” e “max“, outro atributo que podemos utilizar é o “step“.Exemplo de Código:
|
1 2 3 4 5 |
<form> Selecioe o Ano de Nascimento: <input type="range" name="qtItens" required min="1910" max="2018" step="1> </form> |
Tipo time:
Permite ao usuário fornecer um horário de 24hs no formato hh:mm:ss
Exemplo de Código:
|
1 2 3 4 |
<form> Selecioe o horário da viagem: <input type="time" name="horaViagem" required> </form> |
Tipo url:
Este tipo é utilizado quando precisamos obter uma URL válida
Exemplo de Código:
|
1 2 3 4 |
<form> Informe a URL do site: <input type="url" required> </form> |
Atributos dos elementos <input>:
Além dos novos tipos, adicionados ao elemento
<input>, o HTML5 trouxe vários atributos novos, dos quais podemos destacarplaceholder:permite fornecer ao usuário uma dica sobre como o campo deve ser preenchido; anteriormente, esta funcionalidade só poderia ser implementada com auxilio de scritps (javaScript ou jQuery). A “dica” aparece no campo até que o mesmo ganhe o foco e o usuário comece a digitar algo. As informações oferecidas peloplaceholdersomente ficam visíveis enquanto o campo está vazio, e não influenciam no conteúdo do atributo value.
Exemplo:
|
1 2 3 4 5 6 7 8 |
<form> <b>Nome Completo:</b> <input type="text" name="nome" placeholder="Digite seu nome"/> <b>Data de nascimento:</b> <input type="text" name="nasc" placeholder="dd/mm/aaaa"/> <b>Telefone:</b> <input type="text" name="nasc" placeholder="(dd)0000-0000"/> </form> |
required: quando presente, o formulário não será “submetido”/enviado caso o campo esteja vazio.
Exemplo:
|
1 2 3 4 5 6 7 |
<form action="http://www.google.com"> <div> <b>CPF:</b> <input type="text" required/> <input type="submit" value="enviar"/> </div> </form> |
autofocus: em um formulário, apenas um campo pode conter este atributo, pois sempre que o navegador carregar o formulário o campo terá o foco, ou seja o cursor aparecerá naquele campo. Este atributo garante que ao carregarmos um página, que contem um formulário, sempre seremos direcionados para o mesmo campo.
Exemplo:
|
1 2 3 4 |
<form> <b>CPF:</b> <input type="text" name="cpf" autofocus/> </form> |
minemax: estes dois atributos operam em conjunto, eles determinam o intervalo de valores que determinado campo pode conter; o atributonimdetermina o limite inferior emaxo limite superior.
Exemplo:
|
1 2 3 4 5 |
<form action=""> <b>Qual a sua idade:</b> <input type="number" min="18" max="65" required/> <input type="submit" value="enviar"/> </form><span style="font-size: 0.82em;"> </span> |
maxlength: permite limitar a quantidade máxima de caracteres que podem ser inseridos em um elementoinput.
Exemplo:
|
1 2 3 4 5 |
<form action=""> <b>Entre com um nickname:</b> <input type="text" maxlength="20" required/> <input type="submit" value="enviar"/> </form> |
autocomplete: por padrão, os navegadores oferecem a função de autocomplete em formulários, mas em determinados momentos precisamos desabilitar esta função, por exemplo, quando precisamos confirmar o endereço de e-mail, a senha e o login.
Exemplo:
|
1 2 3 4 5 6 7 |
<form action=""> <b>Digite seu email:</b> <input type="email" required /> <b>Confirme seu email:</b> <input type="email" required autocomplete="off"/> <input type="submit" value="enviar"/> </form> |
pattern: este atributo nos permite determinar, por meio de expressões regulares, o padrão de preenchimento do elementoinput.
Por exemplo, podemos utilizar o código abaixo para validar a placa de um carro ([A-Z]{3}[0-9]{4}):
|
1 2 3 4 5 6 7 |
<form action=""> <div> <b>Placa do veículo:</b> <input type="text" required pattern="[A-Z]{3}[0-9]{4}"/> <input type="submit" value="enviar"/> </div> </form> |
Neste caso, temos:
- [A-Z] – define que se aceita qualquer letra maiúscula entre A e Z.
- [A-Z]{3} – define que a letra maiúscula deverá aparecer 3 vezes no início da palavra
- [0-9] – define que aceita apenas números entre 0 e 9
- [0-9]{4} – define que o padrão finaliza com 4 dígitos.
Elemento Select:
Utilizamos elemento
select quando desejamos criar uma estrutura drop-down, que oferece ao usuário uma série de opções selecionáveis. Dependendo dos parâmetros utilizados, o usuário poderá selecionar uma ou mais opções.Exemplo:
|
1 2 3 4 5 6 7 8 |
<form> Selecione o estado: <select name="estado"> <option value="RS">Rio Grande do Sul</option> <option value="PR">Paraná</option> <option value="SC">Santa Catarina</option> </select> </form> |
O elemento textarea:
Ao contrário do elemento
input, que permite ao usuário fornecer apenas uma linha de dados, o elemento textarea permite que seja fornecido uma maior quantidade de informações; este tipo de campo permite a inserção de texto de múltiplas linhas; sendo muito útil para armazenar mensagens longas ou trechos de textos.Exemplo:
|
1 2 3 4 |
<form> Deixe sua mensagem aqui:<br> <textarea rows="5" cols="30"></textarea> </form> |
Este elemento suporta os atributos “
rows” e “cols“, o primeiro é utilizado para determinar a quantidade máxima de linhas e o segundo a quantidade máxima de colunas.Elemento button
Podemos adicionar botões aos formulários de duas formas, a primeira é utilizando o elemento
input e o segundo utilizando o elemento button. Os botões são elementos fundamentais, uma de suas principais funções é invocar o método que realiza a submissão dos formulários.Logo, podemos especificar os botões utilizando a sua tag de abertura (
<button>) e a de encerramento (</button>)Exemplo:
|
1 2 3 |
<form action=” form.php” method=”get”> <button type=”submit”>Enviar</button> </form><span style="font-size: 0.82em;"> </span> |
Assim como os demais elementos, o
button possui uma série de atributos importantes:type: determina o tipo do botão, este atributo aceita os seguintes valores: (i)button, para um botão padrão, (ii)reset, para um botão utilizado para “resetar” os campos para o valor default e (iii)submit, para criar um botão responsável por acionar a função que enviará o formulário;name: especifica o nome do botão;value: serve para definir o texto/valor do botão;formtarget: especifica onde a resposta do envio do formulário deve ser exibida (_blank,_self,_parente_top);formaction: determina a URL onde os dados submetidos serão processados;autofocus: informa que o botão deve receber o foco quando a página for carregada;disabled: faz com que o botão fique desabilitado e não responda ao eventos, como por exemplo ao click do mouse;formmethod: especifica como será realizado a submissão do formulário (get ou post);formnovalidate: determina que o formulário será submetido sem ser validado, só deve ser utilizado nos botões do tiposubmit
Estes são os principais elementos/controles que podemos utilizar na construção de um formulário HMTL, nos próximos artigos, desta série, implementaremos algumas páginas contendo formulários e exploraremos com mais detalhes cada um destes elementos.
