Este artigo mostra os exemplos do controle de formulários JS para sua referência. O conteúdo específico é o seguinte
Exemplo 1: iterar em todos os controles da forma
<script type = "text/javascript"> // transf a função de formulário getValues () {var f = document.forms [0]; // obtenha formulário dom var elements = f.elements; // Obtenha toda a matriz de controle var str = ''; // Split string // loop travasal para (var i = 0; i <elements.length; i ++) {var e = elementos [i]; // controle atual str += e.value; // Valor de controle dividido str += '/n'; // separador dividido} alerta (str); Mostrar o resultado com uma caixa de prompt} </sCript> <form> caixa de texto: <input type = "text" name = "myText"/> <br/> Caixa de rádio: <input type = "radio" name = "myRadio" value = "1"/> 1 <input Type = "Radio" name = "lister" = "2"/> 2 "2" 2 "2" 2 "2"/> 2 <br "<br". value = ""> == Selecione == </pption> <opção value = "1"> 1 </pption> <opção value = "2"> 2 </pption> </leclect> <br/> <input type = "button" value = "getValues ()"/> </morm>Exemplo 2: Acessando um controle específico através do nome de controle
<script type = "text/javascript"> // Acesse controle específico através da função de nome de controle getFormdom () {var f = document.forms [0]; // obtenha forma dom var myText = f.myText; // Obtenha o controle DOM pelo nome // Prompt o nome de controle e alerta de valor (mytext.name + ":" + myText.value); } </script> <form> Caixa de texto: <input type = "text" name = "myText"/> <br/> <input type = "button" value = "getControl" onclick = "getFormdom ()"/> </mand>Exemplo 3: Obtenha o número de caixas de texto no formulário
<script type = "text/javascript"> // Obtenha o número de caixas de texto na função de formulário getInputCount () {var f = document.forms [0]; // obtenha o formulário DOM var elements = f.Elements; // Obtenha toda a matriz de controle var contagem = 0; // stat the Total Number // Loop Traversal for (var i = 0; i elementos.length; i ++) {// o controle atual var e = elementos [i]; // é uma caixa de texto if (e.tagName == 'input' && e.type == 'text') {count ++; // O número total é adicionado por si só}} // Use a caixa de prompt para exibir o alerta de resultado ("a caixa de texto tem um total de:" + count + "s"); } </script>Exemplo 4: Método de envio para modificar o formulário
O atributo do método especifica o método HTTP (get ou post) usado ao enviar um formulário. Ao usar o get, os dados do formulário são visíveis na barra de endereços da página e a postagem é mais segura porque os dados enviados na barra de endereços da página são invisíveis.
<script type = "text/javascript"> // modifique a função do método de envio do formulário modifyMethod () {var f = document.forms [0]; // obtenha o formulário DOM var método = f.mymethod.value; // Método selecionado F.Method = Method; // modifica o método de envio selecionado // use a caixa de prompt para exibir o alerta de resultado ("o método de envio atual do formulário:" + método); } </script> <form method = "post"> Selecione o método de envio: <select name = "myMethod"> <opção value = ""> == Selecione == </pption> <option value = "get"> get </pption> <opção value = "post"> post </option> </select> <br/burs> <input> "Buttle =") "Post"> post </option> </select> <br/shut/input> "Buttle =") </morm>Exemplo 5: Especifique dinamicamente os atributos de ação do formulário
O atributo de ação define a ação executada ao enviar um formulário.
É prática comum enviar formulários a um servidor para usar o botão Enviar.
Normalmente, os formulários são enviados para páginas da web no servidor da web.
Se o atributo de ação for omitido, a ação será definida na página atual.
<script type = "text/javascript"> // especifique dinâmico o atributo de ação da função de formulário modifyaction () {var f = document.forms [0]; // obtenha formulário dom var newurl = f.newurl.value; // Método selecionado F.Action = newurl; // Modifique o endereço de ação do formulário enviado // Use a caixa Prompt para exibir o alerta de resultado ("A ação atual do formulário:" + f.Action); } </script> <form method = "post"> Selecione o método de envio: <input type = "text" name = "newurl"/> <br/> <input type = "button" value = "modificar ação submeter" onclick = "modifyaction ()"/> </form>Exemplo 6: Controle de foco seletivo dinâmico
<script type = "text/javascript"> // a primeira caixa de rádio é a função focus focusit () {var f = document.forms [0]; // obtenha formulário dom var myRadio = f.myRadio; // Obtenha caixa de rádio myradio [0] .focus (); // Caixa de texto de texto // value = ""> == Selecione == </pption> <opção value = "1"> 1 </pption> <opção value = "2"> 2 </pption> </leclect> <br/> <input type = "button" value = "A primeira caixa de rádio é o foco" onclick = "focusit ()"/> </morm>Exemplo 7: inicialize os valores de todos os controles no formulário para o estado inicial
<script type = "text/javascript"> // inicialize os valores de todos os controles no formulário para a função de estado inicial init () {var f = document.forms [0]; // obtenha o formulário dom f.reset (); // Use Reset () function} </script>Exemplo 8: Lote Adicione uma explicação a todos os controles de formulário
<script type = "text/javascript"> // lote uma descrição para todos os controles de formulário função BatchComment () {var f = document.forms [0]; // Obtenha formulário dom var = f.childnodes; // Obtenha todos os elementos filhos do formulário var newarr = []; // Defina nova matriz de elementos var j = 0; // Defina o subscrito para o novo array de elemento // loop através dos elementos filhos para (var i = 0; i <children.length; i ++) {var e = filhos [i]; // elemento filho atual newarr [j ++] = e; // Adicione à nova matriz // Determine se é um controle se (e.TagName == 'input' || e.TagName == 'Select') {// Adicione um nó com texto Descrição var text = document.CreateTextNode ("Este item é necessário"); newarr [j ++] = texto; // Adicione nós para a nova matriz}} // limpe o conteúdo de formulário existente f.innerhtml = ''; // Descrição do lote para (var i = 0; i <newarr.length; i ++) {// Adicione elementos antigos e nós de descrição ao formulário F.appendChild (newarr [i]); }}} </script>Exemplo 9: Use controles ocultos para adicionar parâmetros ao formulário
<função script type = "text/javascript"> // SHOWPARAMS () {// Defina o valor da variável oculta. Este valor também pode ser especificado através do valor do documento de valor da tag.forms [0] .myhidden.value = 'estou oculto'; // Defina a variável de splicing de caracteres var str = 'Os parâmetros enviados pelo formulário incluem:'; // Parâmetro do ano dividido str + = '/n ano:' + document.forms [0] .myyear.value; // Nome dividido parâmetro str + = '/n nome:' + document.forms [0] .myname.value; // divide o parâmetro oculto str + = '/hide variável:' + document.forms [0] .myhidden.value; alerta (str); // Exibe o valor do caractere} </sCript> <form> <input type = "Hidden" name = "myhidden"/> ano: <select name = "myyear"> <opção value = "2012"> 2012 </pption> <option value = "2013"> 2013 </option> <pection> = "2014"> 2014: <///2013 "[/option> <but = 2013" [/opção [/option> <Bepth) <BrousT) <BrousT) <BrousT) <Brous) <BeenByBration) <BrousT) <BrousBeyT) <BrousBe) name = "myname"/> <br/> <br/> <input type = "button" value = "submit" onclick = "showParams ();"/> </morm>Exemplo 10: Verifique todas as caixas de seleção
<script type = "text/javascript"> // Verifique todas as funções função checkall (c) {// obtenha todas as caixas de seleção var = document.getElementsByName ('myName'); if (c) {// selecione todas as caixas de seleção para (var i = 0; i <arr.length; i ++) {arr [i] .checked = true; // select}} else {// caso contrário, não selecione todos // transfira todas as caixas de seleção para (var i = 0; i <arr.length; <form> Seus interesses: <br> <input type = "Caixa de seleção" name = "myall" onclick = "checkall (this.checked)" /> selecione All <br> <input type = "caixa de seleção" name = "myname" /> All <Boxt Type = "Check" Name "MyName" /> Select All <input = "Exemplo 11: Defina estilos atraentes para os controles de foco do formulário
<script type = "text/javascript"> function init () {var f = document.forms [0]; // obtenha formulário dom var elements = f.elements; // Obtenha todas as matrizes de controle var str = ''; // Strings dividido // travessal de loop para (var i = 0; i <elements.length; i ++) {var e = elementos [i]; // Controle atual e.onfocus = function () {// Defina o retorno de chamada de estilo para foco // modifique a borda para vermelho this.style.border = '1px vermelho sólido'; } e.onblur = function () {// chamando o foco this.style.border = ''; // restaurar o estilo de borda original}}}} </sCript>O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.