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;

enctyp: 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=””>

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=””>

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>

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>

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=””>
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=””>

Utilizado para fazer 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>

Exibe na tela uma caixa de texto, com o tamanho definido pelos parâmetros “cols” e “rows”.

 Parâmetros:

Cols: número de colunas do campo, em caracteres;

Rowsnúmero: de linhas do campo, em caracteres;

Wrap: Maneira como são tratadas as quebras de linha automáticas. O valor soft faz com que o texto quebre” somente na tela, sendo enviado para o servidor o texto da maneira como foi digitado; O valor “hard” faz com que seja enviado para o  servidor da maneira como o texto aparece na tela, com todas as quebras de linhas inseridas automaticamente; o valor “off” faz com que o texto não quebre na tela e nem quando enviado ao servidor.

Value: O elemento do tipo textarea não possui o parâmetro “value”. O valor pré-definido do campo é o texto que fica entre as tags <textarea>  e </textarea>.

Select

<select name=”” size=”” multiple>
<option value=””>texto</option>
</select>

Se o parâmetro “size” tiver o valor 1 e não houver o parâmetro “multiple”, exibe na tela uma “combo box”. Caso contrário, exibe na tela uma “select list”

 Parâmetros:

Size número de linhas exibidas. Default: 1;

Multiple parâmetro que, se presente, permite que sejam selecionadas duas ou mais linhas, através das teclas Control ou Shift;

option: Cada item do tipo “option” acrescenta uma linha ao select;

value:  Valor a ser enviado ao servidor se aquele elemento for selecionado. Default: o texto do item;

text: valor a ser exibido para aquele item. Não é definido por um parâmetro, mas pelo texto que fica entre as tags <option> e </option>

Upload de arquivos

<input type=”file” name=”” size=””>
Exibe na tela do browser um campo de texto e um botão, que ao clicado abre uma janela para localizar um arquivo no disco. Para utilizar este tipo de componente, o formulário deverá utilizar o método “POST” e ter o parâmetro “enctype” com o valor “multipart/form-data”.

 Parâmetros:

Size – O tamanho do campo de texto exibido.

Leave a Reply

Name (required)

Email Address(required)

Website

Últimos posts

• SSH Private Key Files, o livro
• Como checar e corrigir erros de disco no linux
• Períodos militares no Brasil
• Boas práticas na geração de chaves privadas (private keys)
• Orientações gerais para manter fotos com boa qualidade visual.