Formulários HTML

Formulários HTML

Definindo um formulário

Por ser uma linguagem de marcação, a sintaxe do HTML na maioria dos casos exige uma "tag" de início e uma de final daquele bloco. É exatamente isso que ocorre com a definição de um formulário: uma tag no início e outra no final, sendo que todos os elementos do formulário devem estar entre as duas tags. Isto torna possível a inclusão de mais de um formulário num mesmo html. As tags citadas são:

< form name=”” action=”” method=”” enctype=”” >

Onde temos:

name: o identificador do formulário. Utilizado principalmente em Scripts client-side (JavaScript);

action: nome do script que receberá os dados do formulário ao ser submetido. Mais à frente estão abordadas as maneiras de tratar esses dados recebidos;

method: método de envio dos dados: get ou post;

enctype: formato em que os dados serão enviados. O default é urlencoded. Se for utilizado um elemento do tipo upload de arquivo (file) é preciso utilizar o tipo multipart/form-data.

Exemplo:

< form action="exemplo.php" method="post" >

(textos e elementos do form)

< /form >

Cada elemento do formulário deve possuir um nome que irá identificá-lo no momento em que o script indicado no ACTION for tratar os dados.

A tag < input >

Muitos elementos de um formulário html são definidos pela tag < input >. Cada tipo de elemento possui parâmetros próprios, mas todos possuem pelo menos dois parâmetros em comum: type que define o tipo de elemento, e name que, como já foi dito, define o nome daquele elemento.

Campo de Texto

< input type="text" name="" value="" size="" maxlength="" >

Exemplo

Nome: 

O campo mais comum em formulários. Exibe na tela um campo para entrada de texto com apenas uma linha.

 Parâmetros:

Value o valor pré-definido do elemento, que aparecerá quando a página for carregada;

Size o tamanho do elemento na tela, em caracteres;

Maxlength o tamanho máximo do texto contido no elemento, em caracteres;

Campo de Texto com Máscara

< input type="password" name="" value="" size="" maxlength="" >

Exemplo:

Senha: 

Tipo de campo semelhante ao anterior, com a diferença que neste caso os dados digitados são substituídos por asteriscos, e por isso são os mais recomendados para campos que devam conter senhas. É importante salientar que nenhuma criptografia é utilizada. Apenas não aparece na tela o que está sendo digitado.

Parâmetros:

Value o valor pré-definido do elemento, que aparecerá quando a página for carregada;

Size o tamanho do elemento na tela, em caracteres;

Maxlength o tamanho máximo do texto contido no elemento, em caracteres;

Checkbox

< input type="checkbox" name="" value="" checked >

Exemplo:

Informática: 

Utilizado para campos de múltipla escolha, onde o usuário pode marcar mais de uma opção.

Parâmetros:

Value o valor que será enviado ao servidor quando o formulário for submetido, no caso do campo estar marcado;

Checked o estado inicial do elemento. Quando presente, o elemento já aparece marcado.

 Radio Button

< input type="radio" name="" value="" checked >

Exemplo

Sexo: Masculino

Utilizado para campos de múltipla escolha, onde o usuário pode marcar apenas uma opção. Para agrupar vários elementos deste tipo, fazendo com que eles sejam exclusivos, basta atribuir o mesmo nome a todos do grupo.

Parâmetros:

Value o valor que será enviado ao servidor quando o formulário for submetido, no caso do campo estar marcado;

Checked o estado inicial do elemento. Quando presente, o elemento já aparece marcado.

Submit Button

< input type="submit" name="" value="" >

Exemplo

Utilizado para enviar os dados do formulário para o script descrito na seção “action” da definição do formulário.

Parâmetros:

Value o texto que aparecerá no corpo do botão.

Reset Button

< input type="reset" name="" value="" >

Exemplo:

Utilizado para fazer com que todos os campos do formulário retornem ao valor original, quando a página foi carregada. Bastante utilizado como botão "limpar", mas na realidade só limpa os campos se todos eles têm como valor uma string vazia.

Parâmetros:

Value – o texto que aparecerá no corpo do botão.

Button

< input type="button" name="" value="" >

Utilizado normalmente para ativar funções de scripts client-side (JavaScript, por exemplo). Sem essa utilização, não produz efeito algum

Parâmetros:

Value – o texto que aparecerá no corpo do botão.

TextArea

< textarea cols="" rows="" name="" wrap="" >texto< /textarea >

Exemplo:

Observações