○● Formulários HTML

(2.0) Formulários: Resumidamente, os formulários são conhecidos por estabelecerem um contato que carrega em si, elementos informativos de um determinado usuário na internet. E os dados contidos nesses formulários são enviados para o contatante. Normalmente nas páginas da web esses formulários encontram-se em grande parte nos links "Fale Conosco" e "Contato", dentre outros.  

(2.1) Elemento form e seus atributos: Os formulários no HTML5 são utilizados com a tag: <form> </form>, dentro desta tag estão contidos todos os elementos de um ou mais formulários, como por exemplo: áreas de texto, caixas de opções, listas, etc.   Sendo assim, podemos inserir diversos elementos HTML em um conjunto de um FORM.  Para isso, temos três principais elementos interativos: 
Input: Conjunto de botões e campos de apreensão. 
TextArea: Zona de apreensão.
Select: Apresenta uma lista de escolhas múltiplas.

__________________________________________________________________________________________

(2.2) Elemento input e seus atributos: O elemento Input é considerado essencial nos formulários, pois é caracterizado por criar diversos elementos interativos. Sendo assim, existem outras ações do tipo: envio de dados, redefinição de dados, etc.  Confira agora, alguns comandos:

Type: Serve para informar o tipo de controle que desejamos criar. 

Name: Usado para identificarmos o nome do nossos comando de controle.

Text:  Contém em si, uma linha de texto, e suas dimensões podem ser definidas com o comando "size" e o limite de texto com o comando "maxlength".

Password: Armazena em si, um campo de senha, que por escolha do criador do site, pode ocultar ou não, os caracteres digitados pelo usuário.  Exemplo:

O código no bloco de notas:

O código visualizado em um navegador:

       __________________________________________________________________________________________

Checkbox: Conceituado por permitem múltiplas seleções, e admitir dois estados: checked ou unchecked, ou seja, assinalado e não assinalado.  Basicamente, uma pequena caixa se seleção.              

Radio: Conceituado por apresentar um pequeno botão, que permite uma seleção entre vários propostos.  Normalmente este comando é usado em formulários de "Sexo", por exemplo, uma escolha como: Masculino ou Feminino (M ou F). Segue o exemplo:

O código no bloco de notas:

O código visualizado em um navegador:

__________________________________________________________________________________________

Submit: Conceituado por ser uma definição de envio de dados para um servidor, ou seja, ocorre uma ação, aonde os dados são enviados e há um redirecionamento da página. 

Reset: Conceituado por realizar uma redefinição da própria página, ou seja, apaga o conteúdo do formulário, possibilitando ao usuário refazê-los.  Segue o exemplo:

O código no bloco de notas:

O código visualizado em um navegador:

__________________________________________________________________________________________

*OBS: Estou alterando o editor para o Notepad++, para facilitar a identificação dos comandos HTML.

File: Conceituado por permitir ao usuário realizar downloads de arquivos, porém necessitamos de um programa específico para gerenciar o uso destes arquivos.

O código feito no editor: Notepad++:

Observe que, mudamos o campo enctype, isto ocorre pois estamos enviando arquivos diversos, e não textos em formatações, por exemplo.  Outro detalhe importante,  você perceberá que o próprio navegador criará um botão para seleção.  Observe o resultado:

O código visualizado em um navegador:

__________________________________________________________________________________________

Hidden: Caracterizado por ser um arquivo oculto, que torna-se escondido na página. Nesta tag ocorre a troca de dados pré estabelecidos pelo desenvolvedor, sem que o usuário perceba. Além disso, este atributo é responsável por comunicar ao servidor determinadas informações, de modo que, os dados ocultos devam ser exibidos aos usuários. Exemplo:

O código feito no editor: Notepad++:

O código visualizado em um navegador:

__________________________________________________________________________________________

Image: Caracteriza uma personalização de um botão, ou seja, apresenta um botão em uma imagem. Segue o exemplo, incrementando pequenas alterações no código anterior.

O código feito no editor: Notepad++:

O código visualizado em um navegador:

__________________________________________________________________________________________

Button: Este elemento cria um botão na página, que pode definir funções tais como: submit ou reset, (enviar e resetar). Conceituando então, o envio ou redefinição dos dados preenchidos no formulário, através de um clique.

Button-Color: Elemento artístico para os botões, porém, não é utilizado mais nos padrões HTML5, pois todas as articulações a respeito de definições de cores em elementos do HTML, estão relacionadas ao CSS.

Imprimir Páginas: Sem dúvida, este é um dos elementos mais interessantes e mais usados na internet, na impressão de boletos, informações importantes, dentre outras funcionalidades, esta função trata-se de um botão que irá ativar a função de impressão do seu sistema operacional. Veja o exemplo dessas três perspectivas mencionadas anteriormente:

O código feito no editor: Notepad++:

Observe que a tag "<!DOCTYPE>", não foi utilizada, por este motivo proposital a tag <"meta charset="UTF-8"> não foi interpretada pelo navegador, pois trata-se de um padrão do HTML, porém como foi citado a cima, o comando "style=color", não é mais utilizado no HTML5, este comando foi apenas demonstrado para conhecimento, em breve no próximo post você poderá utilizar esta mesma função com CSS.

O código visualizado em um navegador:

__________________________________________________________________________________________

Elementos de entrada

Color: Elemento que permite ao usuário interagir com o website, possibilitando uma escolha de cor favorita, em uma caixa de seleção de cores, por exemplo.

Date: Elemento que permite ao usuário selecionar uma data no website, seja ela caracterizada por: dia, mês e ano, ou seja no formato dd/mm/aaaa, possibilitando ao usuário facilidade.

DateTime: Elemento disponibiliza ao usuário selecionar uma data, com formato: dia, mês e ano, além de proporcionar uma seleção de tempo: horário.

DateTime-Local: Elemento semelhante ao anterior, porém, sua diferenciação encontra-se na possibilidade de proporcionar uma seleção de tempo sem fuso-horário.

Month: Elemento que possibilita ao usuário uma caixa de seleção, que apresenta as seguintes características: Seleção de um mês por escrito, exemplo: Janeiro, e a seleção de um ano, proporcionando facilidade ao usuário.

Number: Elemento que disponibiliza ao usuário uma caixa de seleção de numerais, que são pré-estabelecidos pelo desenvolvedor de site, informando um valor mínimo e um valor máximo.

E-mail: Elemento já mencionado neste post, porém agora com uma novidade. Com o código que será descrito logo abaixo, você observará que ao enviar os dados preenchidos no campo e-mail, caso estiver faltando o caractere "@", o navegador alerta o usuário a refazer o campo. Confira os exemplos das tags mencionadas:

O código feito no editor: Notepad++:

O código visualizado em um navegador:

 *OBS: Existem comandos do HTML5 que possam apresentar falhas em sua apresentação na web, devido a falta de atualizações dos navegadores em geral.

__________________________________________________________________________________________

Range: Elemento caracterizado por apresentar valores em forma de barra de rolagem, sem preocupar-se com o número exato (valor), e sim com a representação da barra de rolagem.

Search: Como o próprio nome já sugere, é um elemento de busca dentro de um conteúdo como um todo, exemplo: uma busca de uma palavra-chave no Google.

Tel: Elemento que carrega em si, dados de preenchimento do tipo: números de telefone.

Time: Elemento que apresenta ao usuário, uma seleção de um determinado tempo, seja ele por exemplo: um período inicial ou período final, permite resumidamente selecionar um horário.

URL: Elemento caracterizado por ser validado no ato do envio do formulário, ou seja, ocorre um redirecionamento da página, encaminhando os dados preenchidos para a URL.

Week: Elemento que apresenta uma simples caixa de seleção, representando o número da semana de um determinado ano.  Exemplo: Semana 38 do ano de 2014. Confira a apresentação na web, das tags mencionadas:

O código feito no editor: Notepad++:

O código visualizado em um navegador:

__________________________________________________________________________________________

(2.3) Elementos diversos: 

Textarea: Elemento caracterizado por apresentar uma área de texto para o usuário digitar determinadas informações, este elemento pode conter uma quantidade de caracteres ilimitada, e apresenta seu conteúdo como uma entrada de texto multi-linha.

Select: Este elemento é caracterizado por criar uma lista drop-down, contendo em si uma caixa de seleção para uma única opção, normalmente este elemento é usado em formulários nas seleções de "Estado-UF", por exemplo.  Dentro do elemento "<select>" é encontrado a tag "<option>", que caracteriza as opções da caixa de seleção.

Label: Este elemento é responsável por definir a descrição, ou mesmo um "rótulo", para o elemento "input", ou seja, esta tag retorna usabilidade para o website, tornando possível outras características, por exemplo: ranqueamento do site, possibilidade de leitura de mecanismos do Google.

Fieldset: Elemento conceituado por agrupar diversos elementos do formulário, além de destacar um visual na página, sua principal característica é desenhar uma espécie de caixa em torno dos elementos do formulário que estejam dentro da tag "<fieldset>" .

Legend: Este elemento encontra-se dentro do elemento anterior, "<fieldset>", caracterizado por criar uma legenda, ou seja, uma espécie de título para o formulário dentro do fieldset. Observe abaixo os elementos mencionados em uma única página:

O código feito no editor: Notepad++:

O código visualizado em um navegador:

__________________________________________________________________________________________

Optgroup: Elemento conceituado por apresentar sub-divisões em uma lista drop-down, ou seja, ele cria títulos para as opções, gerando assim facilidade ao usuário na localização de uma opção da lista.

Option: Elemento que gera ao usuário opções sobre uma determinada seleção, seja ela uma caixa de seleções, ou botões "radio", são opções acompanhadas de valores. O elemento "value" é o elemento que será enviado ao endereço informado no formulário ao clicar em "Enviar".

Keygen: Este elemento é caracterizado por criar um par de chaves usado para formulários, e funciona quando ocorre o envio de dados, a chave de dados é armazenada localmente, e a chave pública é enviada para o servidor, ou seja, realiza maiores índices de segurança. 

Datalist: Elemento que cria uma pré-definição de um contexto da tag "input", ou seja, oferece um recurso de "auto completar" uma caixa de informação, por exemplo: O usuário digita a letra "F", logo abaixo aparecem todas as opções da caixa de seleção com a letra inicial "F".  Confira abaixo o exemplo das tags:

O código feito no editor: Notepad++:

O código visualizado em um navegador:

__________________________________________________________________________________________

Output e seus atributos: Este elemento carrega em si, a representação do resultado de um cálculo com uma barra de rolagem, tal como um cálculo realizado por "scripts".  Porém por falta de atualização, os navegadores: Internet Explorer e Safari ainda não suportam totalmente este comando. O comando output pode conter como seus atributos: for (elemento_id), form (form_id), name (nome), além de aceitar atributos de eventos globais, tais como: scripts diversos.  Observe o código abaixo, junto a sua visualização na web:

O código feito no editor: Notepad++:

O código visualizado em um navegador:

__________________________________________________________________________________________

Pratique os comandos vistos neste post, e qualquer dúvida entre em contato, basta apenas deixar um comentário neste post. Até a próxima.