Aula 2

Data de publicação: Feb 04, 2013 12:48:14 AM

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:

<input type="Text">

<input type="Submit">

<input type="Reset">

<button> Button </button>

<input type="Radio">

<input type="Checkbox">

<select name="List">

<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="nome"><br>

Morada: <input type="text" name="morada"><br>

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

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

</form>

</body>

(...)

Resultado

O exemplo anterior conta com um formulário de quatro elementos. Duas caixas 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.

EXERCÍCIO Aula2_1

Crie um formulário com os dados pessoais do aluno.

Deverá conter o logotipo do Colégio (ver ficheiro anexo) e um título (<h1>)

No final 2 botões: Um para gravra os dados e outro para limpar o formulário.