Curso Profissional de Técnico de Multimédia
Sistemas de Informação
Módulo 4: Linguagem de Programação III – Javascript
Ficha Formativa n.º 3
Formulários em HTML
Existem muitos tipos de formulários. Primeiro que tudo vamos ver o que são e como se podem criar. Para dar uma breve introdução sobre o tipo de formulários e controles usados para criar os formulários.
Primeiro, indica-se que se pretende construir um formulário através da tag <FORM>. Existem vários tipos de controlos que se podem inserir no formulário. São eles:
Texto Botão Rádio Caixa de Verificação Senha Enviar Limpar
No entanto, todos eles iniciam com a tag <INPUT TYPE=…>, sendo que o tipo é indicado pelo atributo TYPE. Assim, a estrutura de um formulário é:
<HTML> <HEAD> <TITLE>MINHA PÁGINA</TITLE> </HEAD> <BODY> <FORM NAME=”…”> <INPUT TYPE=”…”> </FORM> </BODY> </HTML> Campos de texto Código de Exemplo: <form name=myText>
<input type="text" name=myText value="Introduza o Seu Nome"> </form>
Um formulário deve sempre começar e terminar com uma etiqueta "form". O atributo "name" para a etiqueta de formulário poder ser definida (por exemplo, "name=myform"). No entanto o nome pode ser exigido somente durante as ações do formulário que irão necessitar de php ou qualquer outro servidor de linguagem de script. Aqui vamos definir o campo de texto usando a etiqueta "input". Damos um atributo chamado "TYPE=TEXT"
dentro da etiqueta, que define o tipo como um campo de texto. O atributo "name" para a etiqueta input pode ser definido. O valor que queremos mostrar no campo de texto pode ser dado usando o atributo "value" (por exemplo, value=Enter)
Tamanho dos Campos de Texto
Podemos definir o tamanho do campo de texto utilizando o atributo "SIZE" com 'size=50' <input type="text" name=myText value="Introduza o Seu Nome" size=50> Campo de Texto Não-Editável
Podemos fazer um campo de texto não-editável ou de leitura apenas (o utilizador não pode editar o campo) usando a entrada "readonly".
<input type="text" name=myText value="Introduza o Seu Nome" readonly>
Botão
Código de Exemplo: <form name=myform>
<input type="button" name=myButton value="HAI"> </form>
Aqui define-se o botão usando a etiqueta "input". Damos o atributo chamado "TYPE=BUTTON" na etiqueta que define o tipo como um botão. O atributo name pode ser definido. O valor que queremos mostrar no botão pode ser administrada utilizando o atributo "value"(por exemplo: value=HAI)
Tamanho do Botão
Podemos definir o tamanho do botão utilizando o atributo "SIZE" com 'size=50' <input type="button" name=myButton value="HAI" size=50>
Não Editável / Não Clicável / Botão Desactivado
Para desativar um botão de formulário é muito simples. podemos fazer um botão não editável ou não clicável (o utilizador não pode editar o campo) utilizando a entrada "disabled".
<input type="button" name=myButton value="disable" desactivado> Botão de Imagem
Podemos fazer uma imagem como um botão usando o atributo "type=image" na etiqueta input. <input type="image" name=myImgButton src="./test.jpg" width=50 height=20>
Botão de Rádio
Código de Exemplo: <form name=myform>
<input type="radio" name=myradio value="1">um <input type="radio" name=myradio value="2">dois <input type="radio" name=myradio value="3">três </form>
Aqui vamos definir o botão de rádio usando a etiqueta "input". Damos um atributo chamado "TYPE=RADIO" na etiqueta que define o tipo de botão de rádio. O atributo name pode ser definido e ser o mesmo. O valor neste caso será usado apenas durante o processamento do formulário.
Nota: Todas as entradas deste tipo devem ter o mesmo nome. Este é o nome que os agrupa. Se tiver diferentes nomes para cada botão de rádio entao estes irão interagir individualmente.
<form name=myform>
<input type="radio" name=myradio1 value="1">um <input type="radio" name=myradio2 value="2">dois <input type="radio" name=myradio3 value="3">três </form>
Botão de Rádio Pré-Seleccionado
Se quiser que o botão rádio seja mostrado como seleccionado mesmo antes do utilizador tentar seleccionar um, tem de usar a entrada "checked".
<form name=myform>
<input type="radio" name=myradio value="1" >um
<input type="radio" name=myradio value="2" checked>dois <input type="radio" name=myradio value="3" >três
</form>
Rádio Não Editável / Não Seleccionável
Podemos fazer um botão de rádio não seleccionável (desactivado) utilizando a entrada "disabled" <form name=myform>
<input type="radio" name=myradio value="1" disabled>um
<input type="radio" name=myradio value="2" checked disabled>dois <input type="radio" name=myradio value="3" disabled>três
</form>
Caixa de Verificação
Código de Exemplo: <form name=myform>
<input type="checkbox" name=mybox value="1">um <input type="checkbox" name=mybox value="2">dois <input type="checkbox" name=mybox value="3">três </form>
Aqui vamos definir a caixa de verificação usando a etiqueta "input". Damos um atributo chamado "TYPE=checkbox" na etiqueta que define o tipo como uma caixa de verificação. O atributo "name" deve ser definido e ser o mesmo. O valor neste caso só será utilizado durante o processamento do formulário.
Caixa de Verificação Pré-selecionada
Podemos fazer uma caixa de verificação pré-selecionada (verificada) antes mesmo de os utilizadores tentam selecionar, usando a entrada "checked".
<form name=myform>
<input type="checkbox" name=mybox value="1" checked>um <input type="checkbox" name=mybox value="2" >dois
<input type="checkbox" name=mybox value="3" checked>três </form>
Caixa de Verificação Não Editável / Não Selecionável
Podemos fazer uma caixa de verificação não selecionável (desativada) usando a entrada "disabled" <form name=myform>
<input type="checkbox" name=mybox value="1" disabled>um <input type="checkbox" name=mybox value="2" disabled>dois <input type="checkbox" name=mybox value="3" disabled>três </form>
Área de Texto
Código:
<form name=myform>
<textarea name=mytextarea> Isto é uma área de texto ... </textarea>
</form>
Aqui definimos o texto usando a etiqueta "textarea". O que quer que seja exibido dentro da área de texto deve ser administrado entre as etiquetas de início e fim da área de texto tal como mostrado no exemplo. Este terá o tamanho padrão.
Definir o Tamanho da Área de Texto
O tamanho do texto de ária é determinado usando o atributo "rows" e "cols". Pode modificar o tamanho da área de texto modificando os valores de rows e cols (linhas e colunas).
<form name=myform>
<textarea name=mytextarea cols=35 rows=3> Isto é um exemplo de área de texto ... </textarea>
</form>
Área de Texto Não-Editável
Podemos fazer uma área de texto não selecionável (o utilizador não pode editar este campo) usando a entrada "readonly"
<form name=myform>
<textarea name=mytextarea cols=5 rows=5 readonly> Isto é uma área de texto ...
</textarea> </form>
Caixa de Combinação / Suspensa
Código de Exemplo: <form name=myform> <select name=mytextarea>
<option name=one value=one> um </option> <option name=two value=two> dois </option> <option name=three value=three> três </option> </select>
Aqui define-se a caixa de suspensão usando as etiquetas "select" e "option". A caixa selecionada é definida usando a etiqueta "select". O número de opções na caixa de combinação é definido utilizando a etiqueta "option". Como mostrado no exemplo damos aos utilizadores três opções para selecionar. O nome a ser mostrado pela opção é atribuído dentro das etiquetas "option".
Opção de Seleção Deslocável
O tamanho da opção de seleção pode ser definido pelo atributo "size" dentro da etiqueta "select". <form name=myform>
<select name=mytextarea size=2>
<option name=one value=one> um </option> <option name=two value=two> dois </option> <option name=three value=three> três </option> <option name=four value=four> quatro </option> </select>
</form>
Opção de Selecção Múltipla
Podemos dar a opção para os utilizadores selecionarem opções múltiplas utilizando a entidade "multiple". Portanto o utilizador pode selecionar várias opções usando as teclas "shift" e "Ctrl".
<form name=myform>
<select name=mytextarea size=3 multiple> <option name=one value=one> um </option> <option name=two value=two> dois </option> <option name=three value=three> três </option> <option name=four value=four> quatro </option> </select>
</form>
Opção Selecção pré-Seleccionada
As opções podem ser pré-selecionadas utilizando a entrada "selected". <form name=myform >
<select name=mytextarea size=2>
<option name=one value=one> um </option> <option name=two value=two> dois </option>
<option name=three value=three selected> três </option> <option name=four value=four> quatro </option>
</select> </form> Campo de Senha Código de Exemplo: <form name=testform> <input type=password> </form>
O campo de senha para um formulário é criado com "input" de tipo password (senha). O resultado mostra um campo de senha.
Campo de Senha Desactivada
Para fazer o campo de senha desactivado (não-utilizável) basta adicionar a variável "disabled" na etiqueta input. <form name=testform>
<input type=password disabled> </form>
Rótulo Etiqueta:
Código de Exemplo: <form name=testform>
<label name=testlabel> O meu Rótulo </label> </form>
Um formulário deve ter sempre a etiqueta "form". O atributo name pode ser definido (por exemplo, "name=myform"). No entanto o nome será exigido apenas durante a ação do formulário que requer javascript. O tipo de rótulo é apenas um texto. O resultado mostra como um rótulo é apresentado
Objetos e hierarquias
O javascript divide as páginas web em objetos para permitir que se acedam e manipulem sem retirar informações. Veja-se o seguinte exemplo:
Nesta janela há um documento HTML, é o objeto documento. Quer dizer que o objeto janela contém o objeto documento.
Neste documento, temos um formulário. É o objeto formulário. De outra forma, o objeto janela contém o objeto documento que contém, por sua vez, o objeto formulário.
Neste documento encontram-se 3 objetos: os botões de rádio, um botão e uma caixa de texto. São, respetivamente, denominados de objeto rádio, objeto botão e objeto texto. De outra forma, o objeto janela contém o objeto documento, que contém o objeto formulário, que contém, por sua vez, o objeto rádio, o objeto botão e o objeto texto.
A hierarquia deste exemplo é, então:
Para aceder a um objeto, é necessário dar o caminho completo do objeto começando pelo objeto mais externo até ao objeto de referência. Por exemplo, para o botão rádio “semana”:
As propriedades dos objetos
Uma propriedade é um atributo, uma caraterística, uma descrição do objeto. Por exemplo, o objeto volante de um carro tem como propriedades ser feito em madeira ou em coro, ter dois ou três braços, etc. Em javascript os objetos têm propriedades personalizadas. No caso dos botões de rádio, uma das propriedades é, por exemplo, o facto de estar ou não selecionado (checked em inglês).
Em javascript, para aceder às propriedades de um objeto utiliza-se a sintaxe: nome_do_objeto.nome_da_propriedade
No caso do botão rádio “semana”, para testar a propriedade seleção utiliza-se a seguinte instrução: document.form.radio[0].checked
