formularios

FormulaacuteriosEm geralCom o Javascript os formulaacuterios Html tomam outra dimensatildeo Natildeo esqueccedila que em Javascriptpodemos acessar cada elemento de um formulaacuterio para por exemplo ler ou escrever um valoruma escolha a qual poderaacute associar um procedimento de evento Todos esses elementos iratildeoreforccedilar as capacidades interativas da paacutegina

Um formulaacuterio eacute um elemento Html declarado pela tags ltFORMgtltFORMgt Um formulaacuterio conteacutemum ou vaacuterios elementos que chamamos os campos (widgets) Esses campos satildeo escrito porexemplo pela tagltINPUT TYPE= gt

Declaraccedilatildeo de um formulaacuterioA declaraccedilatildeo de um formulaacuterio faz-se pelas tags ltFORMgt e ltFORMgt Pode-se notar que emJavascript o atributo NAME=nome_do_formulaacuterio tem toda a sua importacircncia para designar ocaminho completo dos elementos Em suma os atributos ACTION e METHOD satildeo facultativos pelomenos ateacute natildeo fazerem chamadas ao servidor

Um erro claacutessico em Javascript eacute de esquecer de declarar o fim do formulaacuterioltFORMgt depois deter inserido um campo

Controlador de linha de textoA caixa de texto eacute o elemento de entradasaiacuteda por padratildeo do Javascript A sintaxe Html eacute ltINPUTTYPE=text NAME=nome SIZE=x MAXLENGTH=ygt para uma aacuterea de texto de uma soacute linha decomprimento x e de comprimento maacuteximo y

O objeto texto tem 3 propriedades

PROPRIEDADES DESCRICcedilAtildeOname indica o nome do campo pelo qual podemos acessar

defaultvalue indica o valor por padratildeo que seraacute afixada na caixa detexto

value indica que o valor da caixa de texto Seja ele escrito pelousuaacuterio ou jaacute ter um valor por padratildeo

Ler um valor numa caixa de textoUm exemplo que iremos utilizar

Insira um valor e carregue no botatildeo para controla-lo

O script completo eacute assim

ltHTMLgtltHEADgtltSCRIPT LANGUAGE=javascriptgt

function controle(form1) var test = documentform1inputvaluealert(Escreveste + test)ltSCRIPTgtltHEADgtltBODYgtltFORM NAME=form1gtltINPUT TYPE=text NAME=input VALUE=gtltBRgtltINPUT TYPE=button NAME=botao VALUE=Controlar onClick=controle(form1)gtltFORMgtltBODYgtltHTMLgt

Quando clica-se no botatildeo controlar o Javascript chama a funccedilatildeo controle() na qual passamos oformulaacuterio em que o nome eacute form1 como argumentoEsta funccedilatildeo controle() definida nas tags ltHEADgt toma sob a variaacutevel test o valor da caixa detexto Para acessar a este valor escreve-se o caminho completo deste (ver o capiacutetuloUm poucode teoria objeto) No documento presente temos o objeto formulaacuterio chamado form1 que conteacutemo campo de texto nomeado input e que tem como propriedade o elemento de valor value O que daacutedocumentform1inputvalue

Escrever um valor na caixa de textoInserir um valor qualquer na caixa de texto de entrada Clicar sobre o botatildeo para inserir este valorna caixa de texto saiacuteda

caixa de texto de entrada

caixa de texto de saiacuteda

Coacutedigo

ltHTMLgtltHEADgtltSCRIPT LANGUAGE=javascriptgtfunction escrever(form2) var testin =document form2inputvaluedocumentform2outputvalue=testinltSCRIPTgtltHEADgtltBODYgtltFORM NAME=form2gtltINPUT TYPE=text NAME=input VALUE=gt caixa de texto de entradaltBRgtltINPUT TYPE=button NAME=botao VALUE=Escrever onClick=escrever(form2)gtltBRgtltINPUT TYPE=text NAME=output VALUE=gt caixa de texto de saiacutedaltFORMgtltBODYgtltHTMLgt

Ao clicar no botatildeo Escrever o Javascript chama a funccedilatildeo escrever() na qual passa o formulaacuterioem que o nome eacute form2 desta vez como argumento

Esta funccedilatildeo escrever() definida nas tags ltHEADgt toma sob a variaacutevel testin o valor da caixa detexto de entrada Nainstruccedilatildeo seguinte dizemos ao Javascript que o valor da caixa de texto outputcontida no formulaacuterio nomeado form2 eacute a da variaacutevel testin Utiliza-se o caminho completo parachega a propriedade valor do objeto desejado seja em Javascript documentform2outputvalue

Os bototildees radioOs bototildees radio satildeo utilizados para escolher uma escolha e soacute uma entre um conjunto

PROPRIEDADES DESCRICcedilAtildeOname indica o nome do campo Todos os bototildees tem o mesmo

nome

index o index ou o conjunto de bototildees radio comeccedilando por 0

checked indica o estado em curso do elemento radio

defaultchecked indica o estado do botatildeo seleccionado por padratildeo

value indica o valor do elemento radio

Exemplo

ltHTMLgtltHEADgtltSCRIPT language=javascriptgtfunction escolhaprop(form3) if (form3escolha[0]checked) alert(Escolheu a opccedilatildeo + form3escolha[0]value) if (form3escolha[1]checked) alert(Escolheu a opccedilatildeo + form3escolha[1]value) if (form3escolha[2]checked) alert(Escolheu a opccedilatildeo + form3escolha[2]value) ltSCRIPTgtltHEADgtltBODYgtEscolha ltFORM NAME=form3gtltINPUT TYPE=radio NAME=escolha VALUE=1gtEscolha nuacutemero 1ltBRgtltINPUT TYPE=radio NAME=escolha VALUE=2gtEscolha nuacutemero 2ltBRgtltINPUT TYPE=radio NAME=escolha VALUE=3gtEscolha nuacutemero 3ltBRgtltINPUT TYPE=buttonNAME=but VALUE=Qual eacute sua escolha onClick=escolhaprop(form3)gtltFORMgtltBODYgtltHTMLgtClique na sua escolha

Escolha nuacutemero 1



No formulaacuterio nomeado form3 declara-se 3 bototildees radio Nete que utiliza-se o mesmo nome para

os trecircs bototildees Em seguida temos um botatildeo que invoca a funccedilatildeo escolhaprop()

Esta funccedilatildeo testa qual o botatildeo radio eacute checkado Acessa-se os bototildees na forma de iacutendice emrelaccedilatildeo ao nome dos bototildees radio que seja escolha[0] escolha[1] escolha[2]Testa-se a propriedade cheked do botatildeo por if(form3escolha[x]checked) Depois de escolher ecarregar no botatildeo Qual a sua escolha uma caixa de aviso aparece com a indicaccedilatildeo do botatildeocheckado Esta mensagem toma o valor ligado a cada botatildeo pelo caminho form3escolha[x]value

CheckboxOs bototildees checkbox satildeo uacuteteis para escolher uma ou vaacuterias opccedilotildees (lembre-se que os bototildees radiosatildeo utilizados para escolher soacute uma opccedilatildeo) Sua sintaxe e seu uso eacute bastante semelhante aosbototildees radio exceto em relaccedilatildeo ao atributo name


nome




Check as suas escolhas escolha os nuacutemeros 12 e 4 para obter uma boa resposta





ltHTMLgtltHEADgtltscript language=javascriptgtfunction resposta(form4) if ( (form4check1checked) == true ampamp (form4check2checked) == true ampamp(form4check3checked) == false ampamp (form4check4checked) == true) alert(Eacute a boa respostas ) elsealert(Errado continua a tentar)ltSCRIPTgtltHEADgtltBODYgt

Check as suas escolhasltFORM NAME=form4gtltINPUT TYPE=CHECKBOX NAME=check1 VALUE=1gtEscolha nuacutemero 1ltBRgtltINPUT TYPE=CHECKBOX NAME=check2 VALUE=2gtEscolha nuacutemero 2ltBRgt

ltINPUT TYPE=CHECKBOX NAME=check3 VALUE=3gtEscolha nuacutemero 3ltBRgtltINPUT TYPE=CHECKBOX NAME=check4 VALUE=4gtEscolha nuacutemero 4ltBRgtltINPUT TYPE=buttonNAME=but VALUE=Corrigir onClick=resposta(form4)gtltFORMgtltBODYgtltHTMLgt

No formulaacuterio nomeado form4 declara-se 4 checkbox Utilizar um nome diferente para as quatrocheckbox Em seguida temos um botatildeo que iraacute invocar a funccedilatildeo resposta()Esta funccedilatildeo teste quais bototildees que foram checkados Para obter a resposta correta tem de secheckar o 12 e 4 Acessa-se aos bototildees utilizando de cada vez os seus nomes Testa-se apropriedade checked do botatildeo por (form4nome_da_botatildeochecked) Ao clicar no botatildeo Corrigirno caso de positiva uma caixa de aviso aparece que indica que estaacute certo em caso de negativo acaixa de aviso convida a tentar de novo

Lista de selecccedilatildeoOs bototildees da checkbox satildeo utilizados para escolher uma ou vaacuterias opccedilotildees Sua syntax e seu uso eacutesemelhante aos do botatildeo radio exceto em relaccedilatildeo ao atributo name

PROPRIEDADES DESCRICcedilAtildeOname indica o nome da lista

length indica o nuacutemero de elementos da lista

selectedIndex indica o lugar a partir do 0 do elemento da lista que foiseleccionado pelo usuaacuterio

defaultselected indica o elemento da lista seleccionado por padratildeoEacuteaquele que aparece entatildeo na lista em primeiro

Um pequeno exemplo

escolha um elemento da lista

Elemento 1

ltHTMLgtltHEADgtltscript language=javascriptgtfunction lista(form5) alert(O elemento + (form5listselectedIndex + 1))ltSCRIPTgtltHEADgtltBODYgtEscolha um elemento ltFORM NAME=form5gtltSELECT NAME=listgtltOPTION VALUE=1gtElemento 1ltOPTION VALUE=2gtElemento 2ltOPTION VALUE=3gtElemento 3ltSELECTgt

ltINPUT TYPE=buttonNAME=b VALUE=Qual eacute o elemento escolhidoonClick=lista(form5)gt ltFORMgtltBODYgtltHTMLgt

No formulaacuterio nomeado form5 declara-se uma liste de selecccedilatildeo pelas tags ltSELECTgtltSELECTgtEntre estas duas tagsdeclara-se os diferentes elementos da lista pela tag ltOPTIONgt Depoistemos um botatildeo que invoca a funccedilatildeo lista()Este funccedilatildeo testa qual a opccedilatildeo foi seleccionada o caminho completo do elemento seleccionado eacuteform5nome_da_listaselectedIndex Como o index comece em 0 acrescenta-se 1 para encontrara linha elemento

O campo textareaO objeto textarea eacute uma caixa de texto de vaacuterias linhas

A sintaxe Html eacute

ltFORMgtltTEXTAREA NAME=nome ROWS=x COLS=ygttexto por padratildeoltTEXTAREAgtltFORMgt

onde ROWS=x representa o nuacutemero de linhas e COLS=y representa o nuacutemero de colunas

texto por padratildeo

O objeto textarea possua vaacuterias propriedades

PROPRIEDADES DESCRICcedilAtildeOname indica o nome do campo pelo qual pode-se acessar

defaultvalue indica o valor por padratildeo que seraacute afixado na caixa dotexto

value indica o valor a decorrer na caixa de texto Seja ela escritopelo usuaacuterio ou se este natildeo escreveu nada o valor porpadratildeo

A estas propriedades deve-se acrescentar o onFocus() onBlur() onSelect() e onChange()

Em Javascript utiliza-se rn para quebra de linhaComo por exemplo na expressatildeo documentFormTextvalue = Checkrnthisrnout

O campo ResetO campo Reset permita de anular as modificaccedilotildees efetuadas aos campos de um formulaacuterio e derestaurar os valores por padratildeo


ltINPUT TYPE=reset NAME=nome VALUE=textogtOnde VALUE eacute o texto do botatildeo

Um uacutenico meacutetodo associado ao campo Reset eacute o meacutetodo onClick() O que pode servir porexemplo para escrever um outro valor do que o padratildeo

O campo SubmitO campo tem a tarefa especiacutefica de transmitir todas as informaccedilotildees contidas no formulaacuterio a URLdesignada no atributo ACTION da tag ltFORMgt


ltINPUT TYPE=submit NAME=nome VALUE=textogtOnde VALUE eacuteo texto do botatildeo

Um uacutenico meacutetodo associado ao campo Submit eacute o meacutetodo onClick()O campo Hidden (oculto)O campo Hidden permite entrar no script dos elementos (geralmente dados) que natildeo aparecem natela Estes elementos estatildeo ocultos Daiacute seu nome


ltINPUT TYPE=hidden NAME=nome VALUE=os dados ocultos gtEnvio de um formulaacuterio por E-mailJavascript natildeo permite escrever num arquivo Depois o campo Submit eacute sobretudo destinado aosCGI A soluccedilatildeo eacute o envio do formulaacuterio via correio electrocircnico

A sintaxe eacute

ltFORM METHOD=post ACTION=mailtoalguemhotmailcomgtltINPUT TYPE=text NAME=nomegtltbrgtltTEXTAREA NAME=mensagem ROWS=2 COLS=35gtltTEXTAREAgtltbrgtltINPUT TYPE=submit VALUE=SubmitgtltFORMgt

O que daacute

Alguem

OlaBem vindo ao Dicas Javascript

Submit

E recebemos no e-mail algo assim

nome=Alguemampmensagem=Ola0D0ABem+vindo+ao+Dicas+Javascriptampsubmit=Submit Ondeencontramos os campos nome= e mensagem= separados pelo siacutembolo amp os espaccedilos satildeosubstituiacutedos por + e ODOA corresponde a uma quebra de linha

function controle(form1) var test = documentform1inputvaluealert(Escreveste + test)ltSCRIPTgtltHEADgtltBODYgtltFORM NAME=form1gtltINPUT TYPE=text NAME=input VALUE=gtltBRgtltINPUT TYPE=button NAME=botao VALUE=Controlar onClick=controle(form1)gtltFORMgtltBODYgtltHTMLgt

Quando clica-se no botatildeo controlar o Javascript chama a funccedilatildeo controle() na qual passamos oformulaacuterio em que o nome eacute form1 como argumentoEsta funccedilatildeo controle() definida nas tags ltHEADgt toma sob a variaacutevel test o valor da caixa detexto Para acessar a este valor escreve-se o caminho completo deste (ver o capiacutetuloUm poucode teoria objeto) No documento presente temos o objeto formulaacuterio chamado form1 que conteacutemo campo de texto nomeado input e que tem como propriedade o elemento de valor value O que daacutedocumentform1inputvalue

Escrever um valor na caixa de textoInserir um valor qualquer na caixa de texto de entrada Clicar sobre o botatildeo para inserir este valorna caixa de texto saiacuteda

caixa de texto de entrada

caixa de texto de saiacuteda

Coacutedigo

ltHTMLgtltHEADgtltSCRIPT LANGUAGE=javascriptgtfunction escrever(form2) var testin =document form2inputvaluedocumentform2outputvalue=testinltSCRIPTgtltHEADgtltBODYgtltFORM NAME=form2gtltINPUT TYPE=text NAME=input VALUE=gt caixa de texto de entradaltBRgtltINPUT TYPE=button NAME=botao VALUE=Escrever onClick=escrever(form2)gtltBRgtltINPUT TYPE=text NAME=output VALUE=gt caixa de texto de saiacutedaltFORMgtltBODYgtltHTMLgt

Ao clicar no botatildeo Escrever o Javascript chama a funccedilatildeo escrever() na qual passa o formulaacuterioem que o nome eacute form2 desta vez como argumento




nome





Exemplo










nome


















Um pequeno exemplo


Elemento 1

























A sintaxe eacute


O que daacute

Alguem


Submit






nome





Exemplo










nome


















Um pequeno exemplo


Elemento 1

























A sintaxe eacute


O que daacute

Alguem


Submit







nome


















Um pequeno exemplo


Elemento 1

























A sintaxe eacute


O que daacute

Alguem


Submit










Um pequeno exemplo


Elemento 1

























A sintaxe eacute


O que daacute

Alguem


Submit


























A sintaxe eacute


O que daacute

Alguem


Submit




Submit



formularios

Documents