Aula 05
Data de publicação: Oct 10, 2012 2:18:42 PM
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="nomeproprio"><br>
<input type="submit" value="Confirmar">
<input type="reset" value="Limpar">
</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
<input type="checkbox" name="jogo3" value="PES"> PES <br>
Quantas horas jogas por dia: <select name="lista">
<option value="op1"> -1h </option>
<option value="op2"> 1h-3h </option>
<option value="op3"> +3h </option>
</select> <br><br>
<input type="submit" value="Confirmar">
<input type="reset" value="Limpar">
</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>
<fieldset>
<legend align="left"> Dados do utilizador </legend>
Username: <input type="text" name="user"> <br>
Password: <input type="text" name="pass"> <br>
</fieldset>
<fieldset>
<legend align="left"> Mensagem </legend>
<textarea cols="40" rows="5"> Deixe aqui a sua mensagem... </textarea>
</fieldset>
<fieldset>
<legend align="left"> Botões </legend>
<button type="submit"> Enviar </button>
<input type="reset" value="Limpar">
</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.