Aula 06

Data de publicação: Nov 01, 2012 4:0:53 PM

4. Utilização de formulários

Os formulários são o meio de interacção mais importante entre o utilizador e uma página web. Há alguns anos a esta parte, a www tem vindo a mudar radicalmente. Hoje em dia, raramente se encontram páginas em não possa existir a intervenção do utilizador (estáticas), seja em fóruns,wikis ou blogs. A esta "nova" www chama-se Web 2.0.

Os formulários em HTML servem apenas para construir a parte visual, isto é, os dados não são submetidos através de código HTML. Após a construção de um formulário, o utilizador preenche os campos com os dados solicitados. Porém, o botão de submissão (geralmente colocado no final do formulário) não irá funcionar até que se envolva no código outra linguagem para além do HTML (ex: PHP, ASP). Uma destas linguagens será abordada no módulo 5.

Os formulários são inseridos através da tag <form>. Todos os elementos de um formulário devem constar no código antes da tag de fecho do formulário </form>. Esta tag aceita os seguintes atributos:

action - url para onde devem ser enviados os dados do formulário, quando o botão Submit é pressionado (normalmente para um ficheiro

php ou asp);

method - forma como os dados do formulário são enviados para o servidor. Opções - GET ou POST;

name - nome atribuído a cada elemento do formulário (muito importante para aceder a elementos de um formulário específico);

target - onde o url do atributo action será mostrado. As opções são: _self, _parent, _blank e _top

Entre a tag de abertura e fecho de um formulário, ficarão os elementos de interação com o utilizador. Esses elementos podem ser introduzidos através das seguintes tags:

<input> tag que indica o tipo de elemento a ser inserido (checkbox, radio button, text, button, reset, etc.)

<select> tag para criar uma dropbox

<textarea> tag para criar uma textbox com medidas mais alargadas

<button> tag responsável por inserir um botão

A tag <input> é de longe a mais importante de todas as anteriores, devido à variedade de elementos que pode inserir. Essa variedade é definida pelo atributo Type (ver exemplo seguinte). Vejamos:

type - define o tipo de elemento a inserir. Ex: type="text". Outros valores aceites por type - button, radio button, checkbox, file, hidden, image,

password, reset e submit

A tag <input> aceita outros atributos para além do anterior. São eles:

name - nome atribuido a cad elemento do formulário (muito importante para aceder a elementos específicos de um formulário);

value - valor por defeito de elementos e forma de captar dados pelo programador;

size - define o tamanho do elemento inserido.

Os elementos anteriores encontram-se apresentados na seguinte tabela:

<button> Button </button>

<option value="op1"> Dropbox </option>

<option value="op2"> Opção 2 </option>

<option value="op3"> Opção 3 </option>

</select>

Exemplo 1

(...)

<body>

<form>

Nome: <input type="text" name="nomeproprio"><br>

</form>

</body>

(...)

Resultado

O exemplo anterior conta com um formulário de três elementos. Uma caixa de texto e dois botões. O botão confirmar é do tipo Submit e servirá mais tarde para submeter os dados preenchidos no formulário. O outro botão é do tipo Reset, que serve para apagar o conteúdo das caixas de texto quando pressionado.

Todos os elementos foram inseridos com a tag Input. Contudo, esta tag não permite inserir todos os tipos de elementos de um formulário, daí as restantes tags apresentadas anteriormente.

A tag <select> insere uma dropbox no formulário. Para que se possa inserir as diversas opções na dropbox é necessário adicionar a subtag de nome <option> (ver exemplo 2). No final de cada opção a tag <option> tem de ser fechada e no final do conjunto de opções a tag <select> tem igualmente de ser fechada.

Os atributos mais importantes da tag <select> são as seguintes:

name - nome atribuido à dropbox

size - define o tamanho da dropbox na vertical

Os atributos mais importantes da subtag <option> são as seguintes:

value - valor das opções que posteriormente serão captadas pelo botão submit

selected - colocar na opção que se pretende que esteja seleccionada por defeito

Exemplo 2

(...)

<body>

<form>

Nome: <input type="text" name="nomeproprio"><br>

Frequentar: <input type="radio" name="ensino" value="B"> Básico

<input type="radio" name="ensino" value="S"> Secundário <br>

Jogo preferido: <input type="checkbox" name="jogo1" value="WoW"> WoW

<input type="checkbox" name="jogo2" value="CS"> CS

Quantas horas jogas por dia: <select name="lista">

</select> <br><br>

</form>

</body>

(...)

Resultado:

No exemplo 2 existe um pormenor que não pode ser ignorado. Enquanto nas checkboxes o atributo name tem nomes diferentes (Jogo1, Jogo2 e Jogo3), nos radiobuttons os nomes têm de ser iguais (neste caso "ensino"). Isto deve-se ao facto de apenas podermos seleccionar uma das opções. Sem que seleccionamos uma delas, a outra deixa de estar seleccionada, No exemplo anterior, o aluno ou se encontra a frequentar o ensino básico ou o ensino secundário, mas nunca os dois simultaneamente.

A tag <textarea> (ver exemplo seguinte) serve para criar uma área de texto com dimensões mais alargadas que a caixa de texto convencional (textbox). Os atributos principais aceites por esta tag são os seguintes:

cols - valor, em caracteres, da largura da caixa de texto

rows - valor, em caracteres, da altura da caixa de texto

name - nome atribuido à caixa de texto

readonly - para não permitir que o utilizador altere o conteúdo da caixa de texto

Finalmente, a tag <button> (ver exemplo 3) tem o mesmo efeito que a tag <input type="button">, contudo, um botão poderá ser incluído sem fazer parte necessariamente de um formulário. Nessas ocasiões, o botão funciona como um botão para uma hiperligação e não como um botão de submit ou reset. A tag <button> aceita os seguintes atributos:

type - define o tipo de botão a inserir (button, submit ou reset)

name - nome atribuído ao botão (para programador)

disabled - desabilita o botão

Entre a tag de abertura e fecho do botão, escreve-se o nome que se pretende que apareça por cima do botão.

Outra tag um pouco menos importante, mas ainda de referir, é a <fieldset>. Esta tag permite agrupar elementos de um formulário em caixas, que podem ser legendadas através da subtag <legend>. Tanto <legend> como <fieldset> tem de ser fechadas.

Vejamos o exemplo.

Exemplo 3

(...)

<body>

<form>

<legend align="left"> Dados do utilizador </legend>

Username: <input type="text" name="user"> <br>

Password: <input type="text" name="pass"> <br>

</fieldset>

<legend align="left"> Mensagem </legend>

<textarea cols="40" rows="5"> Deixe aqui a sua mensagem... </textarea>

</fieldset>

<legend align="left"> Botões </legend>

<button type="submit"> Enviar </button>

</fieldset>

</form>

</body>

(...)

Resultado

Neste caso particular o botão "Enviar" é do tipo submit, embora tenha sido criado com a tag <button> e não com a tag <input>. No entanto, estes dois tipos de botões originam a mesma acção quando pressionados.

EXERCÍCIO PRÁTICO

Construa o seguinte formulário em HTML, de acordo com as seguinte características:

Imagem:

Logotipo do colégio (ver ficheiro em anexo logotipo.png)

Cabeçalho do tipo <h3>

FICHA DE INSCRIÇÃO DE ALUNOS EM MÓDULOS ATRASADOS

Dados do aluno

Nome (tamanho 50)

Morada (tamanho 50)

Código Postal (Tamanho 4 + tamanho 3)

Localidade (Tamanho 20)

Data de Nascimento (Tamanho 10)

Disciplinas para inscrição nos exames:

PSI - 7 Módulos

Redes de Comunicação - 3 Módulos

Sistemas Operativos - 3 Módulos

Observações:

Tamanho 50 colunas x 8 linhas