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.