T r u q u e s e D i c a s - Tutoriais de Javascript

tutoriais

Photoshop

ASP

PHP

jogos

Galerias

fóruns

Flash

TUTORIAIS DE JAVASCRIPT

Formulários (continuação)

Os botões radio

Os botões radio são utilizados para escolher uma escolha, e só uma, entre um conjunto.

PROPRIEDADES DESCRIÇÃO

name indica o nome do controlador. Todos os botões tem o mesmo nome.

index o index ou o conjunto de botões radio começando por 0.

checked indica o estado em curso do elemento radio

defaultchecked indica o estado do botão seleccionado por defeito.

value indica o valor do elemento radio.

Exemplo :

<HTML>
<HEAD>
<SCRIPT language="javascript">
function escolhaprop(form3) {
if (form3.escolha[0].checked) { alert("Escolheste a proposição " + form3.escolha[0].value) };
if (form3.escolha[1].checked) { alert("Escolheste a proposição " + form3.escolha[1].value) };
if (form3.escolha[2].checked) { alert("Escolheste a proposição " + form3.escolha[2].value) };
}
</SCRIPT>
</HEAD>
<BODY>
Escolha :
<FORM NAME="form3">
<INPUT TYPE="radio" NAME="escolha" VALUE="1">Escolha número 1<BR>
<INPUT TYPE="radio" NAME="escolha" VALUE="2">Escolha número 2<BR>
<INPUT TYPE="radio" NAME="escolha" VALUE="3">Escolha número 3<BR>
<INPUT TYPE="button"NAME="but" VALUE="Qual é vossa escolha ?" onClick="escolhaprop(form3)">
</FORM>
</BODY>
</HTML>

Clica na tua escolha :

Escolha número 1
Escolha número 2
Escolha número 3

No formulário nomeado form3, declara-se 3 botões radio. De notar que utiliza-se o mesmo nome para os três botões. De seguida temos um botão que invoca a função escolhaprop().

Esta função teste qual o botão radio é checkado. Acede-se aos botões sob a forma de índice em relação ao nome dos botões radio que seja escolha[0], escolha[1], escolha[2].
Teste-se a propriedade cheked do botão por if(form3.escolha[x].checked). Depois de escolheres e carregar no botão "Qual a vossa escolha", uma caixa de aviso aparece com a indicação do botão checkado. Esta mensagem toma o valor ligado a cada botão pelo caminho form3.escolha[x].value.

Checkbox

Os botões checkbox são úteis para escolher uma ou várias opções (relembro que os botões radio são utilizados para escolher só uma opção). Sua sintaxe e seu uso é bastante semelhante aos botões radio, excepto em relação ao atributo name.

PROPRIEDADES DESCRIÇÃO

name indica o nome do controlador. Todos os botões tem o mesmo nome.

checked indica o estado em curso do elemento radio

defaultchecked indica o estado do botão seleccionado por defeito.

value indica o valor do elemento radio.

Check as vossas escolhas :
escolha os números 1,2 e 4 para obter uma boa resposta.

Escolha número 1
Escolha número 2
Escolha número 3
Escolha número 4

<HTML>
<HEAD>
<script language="javascript">
function resposta(form4) {
if ( (form4.check1.checked) == true && (form4.check2.checked) == true && (form4.check3.checked) == false && (form4.check4.checked) == true)
{ alert("É a boa respostas! ") }
else
{alert("Errado! continua a tentar.")}
}
</SCRIPT>
</HEAD>
<BODY>

Check as vossas escolhas:
<FORM NAME="form4">
<INPUT TYPE="CHECKBOX" NAME="check1" VALUE="1">Escolha número 1<BR>
<INPUT TYPE="CHECKBOX" NAME="check2" VALUE="2">Escolha número 2<BR>
<INPUT TYPE="CHECKBOX" NAME="check3" VALUE="3">Escolha número 3<BR>
<INPUT TYPE="CHECKBOX" NAME="check4" VALUE="4">Escolha número 4<BR>
<INPUT TYPE="button"NAME="but" VALUE="Corrigir" onClick="resposta(form4)">
</FORM>
</BODY>
</HTML>

No formulário nomeado form4, declara-se 4 checkbox. De referir que utiliza-se um nome diferente para as quatro checkbox. De seguida temos um botão que irá invocar a função resposta().
Esta função teste quais botões que foram checkados. Para obter uma boa resposta, tem de se checkar o 1,2 e 4. Acede-se aos botões utilizando de cada vez os seus nomes. Teste-se a propriedade checked do botão por (form4.nome_da_botão.checked). Ao carregar no botão "Corrigir", no caso de positiva, uma caixa de aviso aparece que indica que está certo, em caso de negativo a caixa de aviso convida a tentar de novo.

Lista de selecção

OS botões da checkbox são utilizados para escolher uma ou várias opções. Sua syntax e seu uso é semelhante aos do botão radio excepto em relação ao atributo name.

PROPRIEDADES DESCRIÇÃO

name indica o nome da lista.

length indica o número de elementos da lista.

selectedIndex indica o lugar a partir do 0 do elemento da lista que foi seleccionado pelo utilizador.

defaultselected indica o elemento da lista seleccionado por defeito.è aquele que aparece então na lista em primeiro.

Um pequeno exemplo :
escolha um elemento da lista:

<HTML>
<HEAD>
<script language="javascript">
function lista(form5) {
alert("O elemento " + (form5.list.selectedIndex + 1));
}
</SCRIPT>
</HEAD>
<BODY>
Escolha um elemento: : <FORM NAME="form5">
<SELECT NAME="list">
<OPTION VALUE="1">Elemento 1
<OPTION VALUE="2">Elemento 2
<OPTION VALUE="3">Elemento 3
</SELECT>
<INPUT TYPE="button"NAME="b" VALUE="Qual é o elemento escolhido?" onClick="lista(form5)"> </FORM>
</BODY>
</HTML>

No formulário nomeado form5, declara-se uma liste de selecção pelos tags <SELECT></SELECT>. Entre estes dois tags,declara-se os diferentes elementos da lista pelo tag <OPTION>. Depois temos um botão que invoca a função lista().
Este função teste qual a opção foi seleccionada. o caminho completo do elemento seleccionadoé form5.nome_da_lista.selectedIndex. Como o index comece em 0, acrescenta-se 1 par encontrar a linha elemento.

Anterior

Seguinte

ANÚNCIOS