FORMULÁRIOS HTML

Post 3 - PPSI 1 e 2

Os Formulários em HTML são usados para selecionar diferentes tipos de entradas do usuário. Um formulário é uma área que pode conter elementos de formulário.

Os elementos de formulário são elementos que permitem o usuário entrar informação (como campos de texto, campos de área de texto, menus drop-down, botões radiais, caixas de seleção, etc.) em um formulário.

Um formulário é definido pela tag <form>.

ELEMENTO	ATRIBUTO	VALOR	DEFINIÇÃO/DESCRIÇÃO
form - Cria um campo de formulário	id		Atribui um identificador para o elemento associado
	action		Especifica para onde enviar o formulário de dados, quando um formulário é submetido
	method	get | post	Método utilizado para envio do formulário
	enctype	application/x-www-form- urlencoded | multipart/form-data | text/plain	Especifica como o conteúdo do formulário será codificado para seu posterior envio. Somente funciona com method="post".
	oninput (*1)		O novo evento oninput é disparado quando algo é modificado no valor de um campo de formulário. Diferente de onchange, que é disparado ao final da edição, oninput é disparado ao editar. É diferente também de onkeyup e onkeypress, porque vai capturar qualquer modificação no valor do campo, feita com mouse, teclado ou outra interface qualquer. Com isso, você pode inserir suas validações no campo de formulário e deixar o navegador fazer o resto. Não é mais preciso capturar o evento submit e tratá-lo.
	autocomplete		Determina se os elementos do formulário vão ter a função de autocompletar ou não por padrão.
	novalidate		Indica que o formulário não será validado por ocasião do seu envio

ELEMENTO	ATRIBUTO	VALOR	DEFINIÇÃO/DESCRIÇÃO
label - Associa um rótulo a textos dentro de um formulário definido por<form>	accesskey		Especifica uma tecla de atalho para acessar um elemento
	for		Indica qual elemento do formulário faz referência
input - Cria um campo de entrada de texto	type	text | password | email | search | url | hidden | number | range | tel | date | datetime | datetime-local | time | month | week | checkbox | radio | file | color | button | image | reset | submit	Tipo de dado do input O padrão é “text”
	id		Atribui um identificador para o elemento associado
	name		Nome do input
	accesskey		Especifica uma tecla de atalho para acessar um elemento
	alt		Providencia um texto alternativo, caso o input não seja carregado. Funciona somente com type=”image”
	checked (*1)		Determina que alguma opção do input seja pre selecionada ao carregar a página. Funciona somente com type=”radio” ou type=”checkbox”
	disabled		Previne que os dados do input sejam enviados
	maxlength (*2)		Estipula o máximo de letras a ser colocado no input
	readonly		Especifica que o input é somente para leitura
	size (*2)		Especifica a largura do input em caracteres
	src (*3)		URL da imagem do input image. Funciona somente com type=”image”
	tabindex		Ordem de navegação na página quando se utiliza a tecla TAB
	value (*4)		Define os valores possíveis dos elementos. Obrigatório para type=”checkbox” e type=”radio”
	max (*5)		Indica o máximo valor numérico a ser colocado no input
	min (*5)		Indica o mínimo valor numérico a ser colocado no input
	step (*5)		Indica o intervalo entre os números válidos para o input
	list (*6)		Usado para predefinir um elemento no <datalist> no momento que a página é carregada
	autocomplete		Habilita o recurso de autocompletar
	autofocus		Determina se o focus da página vai para o input no momento que a página é carregada
	form	form_id	Usado para associar o input a um formulário
	formenctype (*7)	application/x-www-form-urlencoded  | multipart/form-data  |  text/plain	Especifica o tipo de conteúdo do elemento
	formaction (*7)		URL do arquivo que irá processar o controle, quando submetido. Funciona somente com type=”submit” e type=”image”
	formmethod (*7)	get | post	Indica o método HTTP a ser usado para enviar os dados do formulário
	formnovalidate (*7)		Determina que o formulário não seja submetido, ao ser enviado
	formtarget (*7)	blank | parent | self | top	Indica o comportamento do navegador por ocasião do envio dos dados do formulário
	height (*8)		Altura do input em pixels
	width (*8)		Largura do input em pixels
	multiple (*9)		Indica que o usuário pode entrar com mais de 1 valor no input
	pattern		Especifica uma expressão regular contra o qual o valor do input é verificado
	placeholder		Uma pequena dica dentro do input que se refere ao tipo de dado que o usuário deve colocar
	required		Determina que o formulário somente poderá ser enviado após o usuário preencher o campo

ELEMENTO	ATRIBUTO	VALOR	DEFINIÇÃO/DESCRIÇÃO
select - Cria um controle para selecionar uma série de opções com a tag<option>	Id		Atribui um identificador para o elemento associado
	Multiple		Permite selecionar múltiplos itens
	disable		Desabilita o seletor
	size		Especifica o número de opções mostradas pelo controle ao mesmo tempo
	tabindex		Ordem de navegação na página quando se utiliza a tecla TAB
option - Gera opções que ficarão disponíveis para o usuário dentro da tag <select> ou <datalist>	value		Providencia um valor para o elemento a ser enviado para o servidor
	selected		Determina que 1 opção já apareça selecionada ao ser carregado a página
	label		Providencia um nome a ser mostrado para o usuário
	disabled		Desabilita todas as opções
optgroup - Especifica um grupo de<option> com a mesma legenda	disabled		Desabilita todos os <option> do grupo
	label		Mostra para o usuário uma legenda
datalist - Cria uma lista predefinida de opções para um elemento <input>	id		Atribui um identificador para o elemento associado
keygen - Cria um campo gerador de par de chaves	id		Atribui um identificador para o elemento associado
output - Define a saída de diferentes tipos de dados, por exemplo, o cálculo efetuado por algum script	id		Atribui um identificador para o elemento associado
	for		Permite uma relação explícita a ser feita entre o resultado de um cálculo e os elementos que representam os valores que entraram no cálculo ou que de outra forma influenciaram o cálculo. O valor deve ser um ou mais ids (separadas por um espaço) de elementos dentro do mesmo documento.
textarea - Gera um campo de texto a ser preenchido pelo usuário	id		Atribui um identificador para o elemento associado
	tabindex		Ordem de navegação na página quando se utiliza a tecla TAB
	accesskey		Especifica uma tecla de atalho para acessar um elemento
	cols		Especifica o número de caracteres serão apresentados na mesma linha
	rows		Especifica o número de linhas mostradas
	readonly		Especifica que o textarea é somente para leitura
button - Cria um botão clicável	id		Atribui um identificador para o elemento associado
	accesskey		Especifica uma tecla de atalho para acessar um elemento
	disabled		Indica que o botão está desabilitado
	tabindex		Ordem de navegação na página quando se utiliza a tecla TAB
	type	submit | reset | button	Indica o comportamento do botão ao ser clicado
	value		Especifica o valor do botão
Fieldset	Define um grupo de elementos relacionados com o formulário
legend - Define um título em um fieldset	accesskey		Especifica uma tecla de atalho para acessar um elemento

Exemplo de um formulário com alguns atributos e valores correspondentes:

<html lang="pt-br">

<body>

<form action="http://somesite.com/prog/adduser" method="post">

    <p>

    <label for="firstname">Primeiro nome: </label>

              <input type="text" id="firstname"><br>

    <label for="lastname">Último nome: </label>

              <input type="text" id="lastname"><br>

Data de Nascimento: <input type="datetime-local" name="bdaytime"><br>

Telefone: <input type="tel" name="usrtel"><br>

    <label for="email">Email: </label>

            <input type="text" id="email"><br>

<label for="pwd"> Senha: </label>

<input type="password" name="pwd"><br>

    <input type="radio" name="sex" value="Male"> Masculino<br>

    <input type="radio" name="sex" value="Female"> Feminino<br>

    <input type="submit" value="Enviar"> <input type="reset">

    </p>

 </form>

 </body>

 </html>

LINKS: http://www.livrohtml5.com.br/livroHTML5MaujorTodos.zip
              http://www.w3schools.com/