Formato de código MIME para o
formulário.
form Objeto de formulário.
index
Especifica uma opção de uma lista de
seleção (select) em um formulário.
length
Especifica o número de itens de uma
lista.
method
Método que determina como as
informações do formulário serão
processadas através dos valores GET ou
POST.
Name Nomeia um objeto do formulário.
options[]
Lista de opções de uma lista (select)
dentro do formulário.
selected
Estado atual de uma caixa de verificação
ou um botão de opção (radio).
selectedIndex
Determina a opção selecionada de uma
lista de seleção (select) dentro do
formulário.
target Especifica um alvo.
text
Especifica o texto de uma opção (option)
de uma lista de seleção (select) do
formulário.
value
Nome dado ao texto de uma caixa de
texto ou área de texto (text e areatext).
SINTAXE
document.NomeFormulário.propriedade
MÉTODOS DO OBJETO FORM
MÉTODO DESCRIÇÃO
blur()
Quando remove o foco de um campo do
tipo text, textarea e campos de senha
password.
click()
Quando é dado um clique sobre um
elemento de botão em formulário ou
campos do tipo radio e checkbox.
focus()
Quando é dado o foco sobre um campo
do tipo text, textarea e campos de
senha password.
select()
Quando é selecionado o conteúdo de um
campo do tipo text, textarea ou
password.
submit()
Quando o formulário é enviado ao
servidor.
ELEMENTOS DE UM FORMULÁRIO
Já sabemos que em um formulário temos diferentes componentes que auxiliam
a entrada de dados do usuário. Destacamos:
Button
Checkbox
Hidden
Password
Radio
Reset
Select
Submit
Text
TextArea
Todos estes componentes apresentados, já estamos familiarizados no uso da
linguagem HTML.
OBJETO TEXT
Sabemos que se pode criar campos de preenchimento de textos com o uso do
formulário, e através da linguagem JavaScript é possível a manipulação dos
dados digitados para este campo com o uso do objeto TEXT. Sua sintaxe geral
é:
document.nomeForm.nomeText.propriedade
Veja abaixo a relação das propriedades existentes para o objeto TEXT:
PROPRIEDADES DESCRIÇÃO
DefaultValue
Determina o valor padrão para a caixa
de texto.
Name
Determina o nome do objeto para a
caixa de texto.
Value Determina o valor para a caixa de texto.
MANIPULADORES DE EVENTO PARA FORMULÁRIOS
MÉTODO EVENTO DESCRIÇÃO
focus() onFocus
Executa uma instrução
quando o é dado o foco
sobre o campo de texto.
blur() onBlur
Executa uma instrução
quando é retirado o foco
sobre o campo de texto.
select() onSelect
Executa uma instrução
quando o conteúdo da
caixa de texto é
selecionado.
Vejamos um exemplo JavaScript que quando o usuário retirar o foco da caixa
de texto, será exibida uma mensagem informando para não deixar o campo
em branco e em outro situação após o preenchimento do campo em letras
minúsculas seu conteúdo será convertido para letras maiúsculas:
<HTML>
<HEAD>
<TITLE>CHECAGEM DE DADOS</TITLE>
<script>
function requer(texto){
if (texto==""){
alert("Favor preencher o campo!")
document.form1.nome.focus()
}
}
</script>
</head>
<body>
<form name="form1">
<pre>
Digite seu Nome:
<input type="text" name="nome"
onChange="this.value=this.value.toUpperCase()"
onFocus="this.select()" onBlur="requer(this.value)">
Digite seu Sobrenome:
<input type="text" name="sobrenome" onFocus="this.select()">
</form>
</body></html>
No script apresentado, fora criado uma função que determina se o usuário
deixar o campo de preenchimento em branco será exibida uma mensagem
avisando-o. Já no corpo, temos dois campos de texto que utiliza o evento
onChange que irá colocar o conteúdo do campo texto em letras maiúsculas e
o evento onBlur que executa a função requer criada no início do documento.
Temos também o evento onFocus que seleciona o conteúdo do campo quando
o usuário utiliza a tecla TAB.
Veja o resultado na figura à seguir, quando o usuário deixa o campo em
branco:
Vejamos um exemplo prático que permite que quando o usuário deixa um
campo vazio é exibida uma mensagem de alerta e o cursor continua presente
dentro do campo de texto:
function verifica(texto){
if(texto==""){
alert("Não deixe em branco");
return(form1.nome.focus());
Esta função irá testar o valor da variável texto que caso esteja vazio é exibido
um alerta e o foco retorna para dentro do campo de texto. Veja o código que
chama a função no campo de formulário:
<input type="text" name="nome" onBlur="verifica(this.value)">
A chamada da função é feita quando o usuário retira o foco do campo que
executa a função verifica que armazena o valor atual do campo. Havendo
vários campos que são de preenchimento obrigatório, esta função poderá ser
reutilizada.
OBJETO PASSWORD
Este objeto permite ao usuário controlar campos de preenchimento de SENHA.
Sua sintaxe é:
document.nomeForm.campoSenha.propriedade
As propriedades e métodos deste objeto, são os mesmos do objeto TEXT
apresentados anteriormente.
OBJETO TEXTAREA
Este objeto tem como objetivo a criação de áreas de texto composta por várias
linhas. Sua sintaxe é:
document.nomeForm.campoTextArea.propriedade
Suas propriedades, métodos e eventos equivalem as mesmas do objeto TEXT.
OBJETO BUTTON
Já utilizado, sabemos que este objeto representa os botões criados em um
formulário onde atribuímos ações específicas. Sua sintaxe tem a seguinte
formação:
document.nomeForm.nomeButton.propriedade
MÉTODO EVENTO DESCRIÇÃO
click() onClick
Executa uma instrução
quando o é dado um
clique sobre o botão.
Veja pelo exemplo do script a seguir a exibição de uma mensagem de alerta
informando o que foi digitado na caixa de texto assim que o usuário pressiona
um botão:
<form name="form1">
<pre>
Digite seu Nome:
<input type="text" name="campo1">
<input type="button" value="Clique Aqui" onClick="alert('Você
digitou '+form1.campo1.value)">
</form>
OBJETO SUBMIT
Como já sabido, este objeto controla o botão responsável pelo envio dos dados
de um formulário. Suas propriedades, métodos e eventos são equivalentes as
do objeto BUTTON. Sua sintaxe básica tem a seguinte formação:
documet.nomeForm.ButtonSubmit.propriedade
Veja no exemplo a seguir um script que verificará se determinado campo foi
preenchido, caso não tenha sido preenchido o JavaScript não enviára o
formulário:
<html>
<head>
<script>
function envia(){
if (form1.campo1.value==""){
alert("Campo em Branco");
return(false);
} else {
return(true);
}
}
</script>
</head>
<body bgcolor="yellow">
<form name="form1">
<pre>
Digite seu Nome:
<input type="text" name="campo1">
<input type="submit" value="Clique Aqui" onClick="envia()">
</form>
OBJETO RESET
Responsável pelo botão que retorna qualquer elemento de um formulário para
seus valores default. Suas propriedades, métodos e eventos são equivalentes
as do objeto BUTTON. Sua sintaxe é:
document.nomeForm.ButtonReset.propriedade
OBJETO CHECKBOX (Caixa de Verificação)
Este objeto cria uma lista onde o usuário poderá marcar várias opções. Sua
sintaxe é equivalente as dos objetos de formulário anteriormente
apresentadas.
PROPRIEDADE
Este objeto é uma propriedade do objeto form.
Veja abaixo a relação das propriedades existentes para o objeto CHECKBOX:
PROPRIEDADES DESCRIÇÃO
name Contém o conteúdo do atributo name.
value
Contém o valor “on” ou “off” que
determina o estado da caixa.
status
Valor booleano que determina o estado
da caixa, selecionado (True) ou não
selecionado (False).
defaultStatus
Valor booleano que indica se o estado
padrão do botão definido pelo atributo
checked.
MANIPULADORES DE EVENTO
MÉTODO EVENTO DESCRIÇÃO
click() onClick
Executa uma instrução
assim que o usuário clica
sobre o elemento.
Os botões de formulário do tipo CHECKBOX são botões que o usuário pode
ativar e desativar. O atributo checked determina o estado default da caixa de
verificação. Esta propriedade assume valores booleanos, quando ativada
assume o valor true e desativada o valor false. Vejamos um exemplo:
<HTML>
<HEAD>
<TITLE>OBJETO CHECKBOX</TITLE>
</HEAD>
<BODY>
<SCRIPT>
function exemplo(form){
teste=form.opcao.checked;
alert("A caixa de verificação está "+teste);
}
</SCRIPT>
<FORM>
<INPUT TYPE="checkbox" NAME="opcao">Primeira Opção
<INPUT TYPE="checkbox" NAME="opcao2">Segunda Opção
<HR>
<INPUT TYPE="button" NAME="acao" value="Execute"
onClick="exemplo(this.form)">
Comentários
Postar um comentário