Formulários HTML

Mais um post saído do forno e desta vez o tema é formulários, que por mais chato (para a maioria) que seja preenchê-los ou criá-los, eles tornam-se extremamente importantes em um site quando há a necessidade de manter contato com o cliente/a empresa, envio/recebimento de feeds e notícias do site, ofertas exclusivas, ou até mesmo opiniões e dúvidas dos clientes, desde que os formulários sejam bem estruturados. Abaixo temos um exemplo de sua utilização:

Cadastro de Participação - Concurso Logo Oficial da Conferência WWW2013

Agora veremos as marcações utilizadas para a criação de formulários na web, incluindo algumas "possíveis" tags a serem incluídas no HTML5.

<form> tag utilizada para incluir um formulário, podendo possuir os seguintes atributos:
-id: determinar uma identificação/nome ao form;
-action: endereço da aplicação para onde o formulário e seus dados serão enviados;
-method: método de envio do formulário. Pode ser get (os dados do form são incluídos na URI da página) ou post (dados enviados no corpo da mensagem);
-enctype: tipo de codificação dos dados no formulário.

<label> insere rótulo para um campo, seus atributos são:
-accesskey: tecla de atalho para acesso/foco ao campo;
-for: indica a qual campo o rótulo será associado.

<input> utilizada para incluir campos para entrada de dados no form, possui os seguintes atributos:
-type: determina o tipo de campo de entrada de dados, que podem ser:

• text: caixa de texto de linha única;
• date: data (dia, mês e ano) sem horário;
• email: campo para inserir endereço de email;
• number: campo para entrada de números;
• range: campo de controle deslizante para inserção de número entre os valores mínimo e máximo, abordados nos atributos min e max;
• password: controle para inserir senha, cuja informação será mascarada, porém não criptografada;
• hidden: define um campo oculto;
• file: campo para upload de arquivos;
• checkbox: campo utilizado para múltipla escolha;
• radio: campo onde apenas uma opção deve ser escolhida;
• button: insere um botão, no qual pode ser inserido um script para realizar determinada ação;
• image: definir uma imagem como botão "Enviar" (submit);
• submit: campo para submeter, isto é, enviar os dados preenchidos no formulário para o local determindado no atributo action do form;
• reset: utilizado para redefinir os campos do formulário.

-id: assim como no form, também é utilizado para identificação/ nomeação do campo;
-name: tem a mesma função do id, mais utilizado quando há incompatibilidade do atributo id com alguns campos/ navegadores antigos;
-accesskey: especificar uma tecla de atalho para acesso/foco ao elemento;
-alt: inserir um texto alternativo para o usuário, caso não consiga visualizar a imagem (seja por lentidão na conexão ou caso um leitor de tela esteja sendo utilizado por usuário com deficiência visual);
-checked: indica que um checkbox ou radio estará selecionado previamente;
-disabled: torna o campo desativado, de modo que o usuário não possa utilizá-lo;
-maxlength: utilizado apenas no text e password, define o número máximo de caracteres que o usuário poderá digitar;
-readonly: indica que o campo é somente para leitura, impedindo o usuário de alterá-lo;
-size: também utilizado apenas no text e password, define o tamanho inicial do campo, cujo valor pode ser expressado em pixels;
-src: inserido apenas em image, este atributo define o local onde se encontra a imagem;
-tabindex: indica a ordem de navegação quando a tecla TAB é pressionada, expressada por número, de acordo com a sequência;
-value: determina um valor pré-definido ao campo e é utilizado de diferentes formas, dependendo do tipo de input:

• button, reset, e submit: define o texto a aparecer no botão;
• text, password e hidden: define o valor padrão que aparecerá nesses campos;
• checkbox, radio e image: define o valor associado a cada opção que será enviado no submit;

-max: inserido apenas em number e range, define o valor máximo que o usuário poderá inserir/ deslizar;
-min: também exclusivo para number e range, define o valor mínimo que o usuário poderá inserir/ deslizar;
-step: assim como o min e max, é utilizado nos tipos number e range, e define qual será o incremento dos valores inseridos/deslizados;

Segue um exemplo de formulário com os elementos e atributos de input acima (Melhor visualizado no Chrome):

Text (Até 60 caracteres): Text Disabled:
Date: Date Disabled:
Email: Email Disabled:
Number: Range:
Password (Até 12 caracteres): Hidden:
File:
Checkbox: Opção 1 Opção 2 Opção 2
Radio: Opção 1 Opção 2 Opção 3

<select> diferente da tag input, não é um controle de entrada de dados, pois apresenta para o usuário uma lista de opções possíveis de seleção, sendo esta última única ou múltipla. Segue abaixo os atributos desta tag:
-id: também define uma identificação/nome para este controle;
-multiple: habilita a seleção múltipla de opções;
-disabled: assim como no input, também desabilita interação do usuário com o controle;
-size: número de linhas em que as opções serão visíveis;
-tabindex: assim como no input, também define a ordem de navegação ao ser pressionada a tecla TAB.

<option> esta tag deve ser sempre inserida entre <select> e </select>, pois define quais as opções que aparecerão para o usuário na lista de seleção, a seguir seus atributos:
-value: valor associado a opção que será atribuído ao controle;
-selected: define que a opção estará previamente selecionada;
-label: rótulo associado a opção;
-disabled

<optgroup> tag inserida dentro de select, define um agrupamento lógico das opções da lista, seus atributos são:
-disabled;
-label: define o rótulo do grupo de opções.

<textarea> este elemento é tem a mesma função do tipo text, com a exceção de poder inserir textos grandes, geralmente mensagens, por meio de múltiplas linhas. Seus atributos são os seguintes:
-id;
-tabindex;
-accesskey;
-cols: determina o número de colunas para área de inserção de textos, cada coluna tem mais ou menos o tamanho de um caractere;
-rows: determina a quantidade de linhas para inserção de texto;
-readonly: indica que campo é somente para leitura, não pode ser alterado.

<button> elemento que insere um botão clicável, cujos atributos são:
-id;
-accesskey;
-disabled;
-tabindex;
-type: indica qual o tipo de button, que pode ser: submit, reset ou button (botão genérico, sem ação);
-value: determina o valor, isto é, o texto que aparecerá no button.

<fieldset> elemento semântico utilizado para agrupar vários campos, de acordo com as informações a serem preenchidas pelo usuário.

<legend> determina a legenda do fieldset, ou seja, o título do grupo de campos. Possui apenas o atributo accesskey.

Segue um exemplo de form com: select (option e optgroup), textarea, button e fieldset (legend):

Select

Select 1: --Selecione uma opção-- Option 1 Option 2 Option 3
Select 2: --Selecionar uma opção-- Option 1 Option 2 Option 3 Option 1 Option 2 Option 3

Textarea e Button

Digite seu texto aqui

Referências

Guias Referencia
Tag Form