Sistemas Para Web: 4. Formulários HTML

O Formulário nos possibilita que o usuário entre com informações e possamos receber e armazenar, dentre outras vantagens.

4.1 Elementos form e seus atributos:

O elemento form é utilizado para iniciar um formulário e os elementos dentro dele é parte do formulário. No elemento form temos um atributo que define o método de envio e temos outro que define o arquivo destino, no método de envio podemos utilizar o método post ou get, mas de fato o post é melhor por determinados fatores, um deles é que o método get transfere as informações do fomurulario preenchidas pelo usuário adicionando as á url e o post faz a transferência pelo http o que é mais seguro. O elemento form pode ser inserido no corpo da página (elemento body).

4.2 Elemento input e seus atributos.

Com elemento input você especifica um campo onde o usuário pode entrar com informações. Neste elemento temos alguns atributos que especificam seu tipo e podem ser especificado com as propriedades multiple, placeholder entre outras.
Obs. tag input não precisa ser fechada.

types: é um atributo do elemento input especifica o tipo de valor de entrada no campo input.
text: define um campo de texto para o usuário digitar.
password: define campo o que for digitado não aparece apenas ***, mas não criptográfica a senha apenas mascara.
checkbox: com este você faz lista de que podem ter mais de uma opção marcada.
radio: com este você faz lista com botões que podem ter apenas uma selecionada, porem para isso acontecer é necessário que todos os ipunt desta opção tenham o mesmo name definido e estejam agrupados.
submit: este input faz com que apareça um botão para envio do formulário. Seu nome pode ser alterado com a propriedade value, mas isso impede que o navegador reenderize em um idioma diferente, pois o nome submit(aparece no botão) do input, muda dependendo do idioma do navegador.
reset: este input é um botão que limpa tudo que foi digitado no formulário. Seu nome funciona da mesma maneira que o nome do input submit mencionado acima.
file: possibilita carregar uma arquivo.
hidden: possibilita colocar um input oculto no formalário que não aparecerá no navegador.
image: com esse você consegue colocar uma imagem como botão de enviar.
button: possibilita inserir um botão clicavel pode ser usado para ativar um JavaScript.
color: traz um seletor de cores.
date: traz um campo para escolher dia, mês, e ano sem um relógio.
datetime: diferente do campo date traz além do dia, mês e ano, faz com que possamos escolher o horário, baseado no UTC.
datetime-local: este é igual ao datetime em quase todos os aspectos, porém ele é baseado no horário local.
email: traz um campo para inserirmos um email.
month: traz um campo para definirmos mês e ano.
number: este input traz um campo para a entrada de números
range: é como um controle deslizante, onde os valores são imprecisos.
search: este input define um campo de busca.
tel: este input é um campo especifico para o telefone.
time: este input é sem zona de tempo, mas possibilita escolha de um horário.
url: este campo você pode digitar endereços url http://www.site.com.br.
week: você pode escolher semana e ano.

Exemplo

No Navegador

4.3 Elementos

Existem outros elementos de formulários

textarea: o elemento texarea tem os atributos para definir linhas e colunas, mas o correto é acertar seu tamanho pelo CSS.
select: este elemento cria lista de seleção (drop-down list) o atributo value neste elemento tem função diferente, quando há value o que acontece é que ao invés de armazenar o valor mencionado no option ele amarzena o valor do value, porém quando o usuário estiver escolhendo verá o nome mencionado na option e não o do value.
label: a label é um elemento semântico de acessibilidade, pois os nomes dos inputs não devem ser escritos a frente deles e sim através de uma label, que estar ligada ao input pelo atributo for, pois este deve possuir o mesmo nome do atributo id do elemento input.
fieldset: este elemento agrupa outros elementos de um formulário e faz um caixa em volta.
legend: este elemento da uma legenda ao elemento filedset, pois o elemento da lista agrupada já tem nome é um forma semântica de nomear ao invés de escrever o nome por fora.
optgroup: este elemento é utilizado para agrupa itens de uma lista.
option: indica as opções de uma lista.
keygen: é um campo gerador de chaves quando o formulário é enviado, a chave é armazenada localmente.
datalist: é uma lista para um elemento input, esta lista não tem opções visíveis, mas quando o usuário começa a digitar as opções aparecem.
output: é utilizado para apresentar resultados de cálculos realizado por scripts seus atributos são for: onde é especificado a relação dos elementos utilizados nos cálculos e seus resultados, o atributo name onde é especificado o nome do elemento de saída e o atributo form onde especifica a que formas o elemento de saída pertence.

4.4 Propriedades

As propriedades podem ser usadas para mudar como os input se apresentam.

min: defini um número mínimo para o input.
max: defini um número máximo para o input.
step: define um valor a ser pulado na contagem, por exemplo, se step="2", então a contagem será de 2 em 2.
value: define um nome ou valor a ser armazenado em determinados elementos.
selected: deixa uma opção pré-selecionada.
placeholder: este elemento deixa um texto pré definido nos elementos, mas é como se o elemento estivesse vazio.
multiple: esta deixa possível ser selecionada mais de uma opção.