Aula 3

Data de publicação: Feb 14, 2013 9:55:33 PM

Utilização de formulários (continuação)

DROPBOX

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 3_1). 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 3_1

(...)

<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 3_1 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 o 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_2

(...)

<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

EXERCÍCIOS PRÁTICOS

Faça os dois exemplos desta aula:

1) Exemplo 3_1

2) Exemplo 3_2