1. Introdução ao formulário
O formulário <form> é um dos formulários mais interativos nas páginas da web. Ele recebe dados do usuário através de vários formulários, incluindo caixas de listagem suspensa, botões de rádio, caixas de seleção e caixas de texto. Este artigo apresenta principalmente propriedades e métodos comumente usados em formas.
O JavaScript pode ser muito conveniente para operar formulários, como obter dados de formulário para verificação eficaz, atribuindo automaticamente valores para formar campos, processamento de eventos do formulário, etc.
Neste momento, cada formulário é analisado em um objeto, ou seja, formam objetos. Esses objetos podem ser referenciados através da coleção Document.Forms. Por exemplo, um formulário com um atributo nama de form1 pode ser usado
Copie o código da seguinte forma: document.forms ["form1"]
Não apenas isso, você também pode se referir ao formulário de objetos através do índice do formulário no documento. Por exemplo
Copie o código da seguinte forma: document.forms [1]
Representa o segundo objeto de formulário no documento de referência
A seguir, é apresentado um elemento de formulário que contém vários elementos de formulário, cada elemento possui uma tag de etiqueta, ligada ao elemento, para que, clicando no texto, você possa defini -lo e selecioná -lo para a tabela, melhorando a experiência do usuário.
A cópia do código é a seguinte:
<form método = "post" name = "myForm1" action = "addinfo.aspx">
<p> <Label para = "Nome"> Por favor, digite seu nome: </cret> <br> <input type = "text" name = "name" id = "name"> </p>
<p> <Label para = "passwd"> Por favor, digite sua senha: </celt> <br> <input type = "senha" name = "passwd" id = "passwd"> </p>
<p> <Label for = "color"> Selecione sua cor favorita: </cret> <br>
<select name = "color" id = "color">
<opção value = "RED"> RED </pption>
<opção value = "verde"> verde </pption>
<opção value = "azul"> azul </pption>
<opção value = "amarelo"> amarelo </pption>
<opção value = "ciano"> qing </pption>
<opção value = "roxo"> roxo </pption>
</leclect> </p>
<p> Por favor, selecione seu sexo: <br>
<input type = "radio" name = "sexo" id = "masculino" value = "masculino"> <gravador para = "masculino"> masculino </belt> <br>
<input type = "radio" name = "sexo" id = "feminino" value = "feminino"> <etiqueta para = "feminino"> feminino </belt> </p>
<p> O que você gosta de fazer: <br>
<input type = "caixa de seleção" name = "hobby" id = "book" value = "book"> <gravadora para = "book"> lendo </belt>
<input type = "caixa de seleção" name = "hobby" id = "net" value = "net"> <gravador para = "net"> na internet </belt>
<input type = "caixa de seleção" name = "hobby" id = "sono" value = "sono"> <etiqueta para = "sono"> sono </cret> </p>
<p> <Label para = "Comentários"> Quero deixar uma mensagem: </elabel> <br> <texttarea name = "Comententa" id = "Comentários" cols = "30" linhas = "4"> </sexttarea> </p>
<p> <input type = "submit" name = "btnsubMit" id = "btnsubMit" value = "submit">
<input type = "reset" name = "btnreset" id = "btnreset" value = "reset"> </p>
</morm>
Normalmente, cada elemento do formulário deve ter atributos de nome e identificação, o nome é usado para entregar o servidor e o ID é usado para filtragem de ligação e função.
2. Acesso elementos no formulário
Os elementos no formulário, sejam caixas de texto, botões de rádio, botões suspensos, caixas de listagem suspensa ou outro conteúdo, estão incluídos na coleção de elementos do formulário. Você pode usar a posição do elemento na coleção ou o atributo de nome do elemento para obter uma referência ao elemento.
A cópia do código é a seguinte:
var oform = document.forms ["form1"] // obtenha formulário
var etextForm = oform.Elements [0]; // Obtenha o primeiro elemento
var etextpasswd = oform.elements ["passwd"] // Obtenha o elemento com o atributo de nome passwd
Citar o método mais eficaz e intuitivo:
Copie o código da seguinte forma: var ettComments = oform.elements.comments; // Obtenha o elemento com os comentários do atributo de nome
3. Propriedades e métodos públicos
Todos os elementos na forma (exceto elementos ocultos) têm algumas propriedades e métodos comuns. Aqui estão algumas listas comumente usadas
A cópia do código é a seguinte:
var oform = document.forms ["form1"]; // obtenha formulário
var imagestComments = oform.elements.comms; // Obtenha o elemento com os comentários do atributo de nome
alerta (OFORM.TYPE); // Tipo de elemento de exibição
var etextpasswd = oform.lements ["passwd"]; // Obtenha o elemento com o atributo de nome Passwd
FoxtPasswd.focus (); // Concentre -se em elementos específicos
4. Submissão de formulários
O envio no formulário é concluído por meio de botões ou fotos com funções de botão
A cópia do código é a seguinte:
<input type = "submit" name = "btnsubMit" id = "btnsubMit" value = "submit">
<input type = "image" name = "picsubMit" id = "picsSubMit" src = "submit.jpg">
Quando o usuário pressiona Enter ou clica em um dos botões, o formulário pode ser enviado sem código adicional. Você pode usar o atributo de ação no formulário para detectar se deve enviar.
Copie o código do código da seguinte
Os usuários podem clicar repetidamente no botão Enviar durante o processo de envio porque a velocidade da rede é muito lenta. Este é um enorme fardo para o servidor e pode ser proibido usando o atributo desativado. Por exemplo:
Copie o código da seguinte