Este artículo le muestra los ejemplos del control de formulario JS para su referencia. El contenido específico es el siguiente
Ejemplo 1: iterar a través de todos los controles del formulario
<script type = "text/javaScript"> // transf la función de formulario getValues () {var f = document.forms [0]; // Obtener formulario DOM VAR Elements = F.Elements; // Obtener toda la matriz de control var str = ''; // Split String // bucle traversal para (var i = 0; i <elements.length; i ++) {var e = elements [i]; // Control de corriente Str += E.Value; // Valor de control dividido str += '/n'; // dividir separador} alerta (str); // Mostrar el resultado con un cuadro de solicitud} </script> <form> cuadro de texto: <input type = "text" name = "mytext"/> <br/> box de radio: <input type = "radio" name = "myradio" valor = "1"/> 1 <input type = "radio" name = "myradio" valor = "2"/> 2 <br/> desplegable SELECT == </option> <opción valor = "1"> 1 </opción> <opción valor = "2"> 2 </opción> </select> <br/> <input type = "button" value = "getValues ()"/> </form>Ejemplo 2: acceder a un control específico a través del nombre de control
<script type = "text/javaScript"> // Acceda al control específico a través de la función de nombre de control getFormDom () {var f = document.forms [0]; // Get Form DOM Var MyText = F.MyText; // Obtener control DOM por nombre // solicita el nombre de control y la alerta de valor (mytext.name + ":" + mytext.value); } </script> <form> cuadro de texto: <input type = "text" name = "mytext"/> <br/> <input type = "button" value = "getControl" onClick = "getformdom ()"/> </form>Ejemplo 3: Obtenga el número de cuadros de texto en el formulario
<script type = "text/javaScript"> // Obtener el número de cuadros de texto en la función de formulario getInputCount () {var f = document.forms [0]; // Obtener el formulario DOM VAR Elements = F.Elements; // Obtener todo el control de la matriz de control count = 0; // stat el número total // bucle transversal para (var i = 0; i <elements.length; i ++) {// El control de corriente var e = elements [i]; // es un cuadro de texto if (e.tagname == 'input' && e.type == 'text') {count ++; // El número total se agrega solo}} // use el cuadro de solicitud para mostrar la alerta de resultados ("El cuadro de texto tiene un total de:" + Count + "S"); } </script>Ejemplo 4: Método de envío para modificar el formulario
El atributo del método especifica el método HTTP (obtener o publicar) utilizado al enviar un formulario. Al usar GET, los datos del formulario son visibles en la barra de direcciones de la página, y la publicación es más segura porque los datos enviados en la barra de direcciones de la página son invisibles.
<script type = "text/javaScript"> // Modifique la función del método de envío de formulario ModifyMethod () {var f = document.forms [0]; // Obtener la forma DOM VAR Method = F.Mymethod.Value; // método seleccionado f.method = método; // Modifique el método de envío seleccionado // Use el cuadro de solicitud para mostrar la alerta de resultados ("el método de envío actual del formulario:" + método); } </script> <form de método = "post"> Seleccione el método de envío: <select name = "mymethod"> <opción valor = ""> == Seleccione == </opción> <opción value = "get"> get </option> <option value = "post"> post </option> </select> <br/> <input type = "bootle" value = "modificar el método de envío" en click = "" modificar ("/"/"/"/"" "" "" "" "" ". </form>Ejemplo 5: Especifique dinámicamente los atributos de acción del formulario
El atributo de acción define la acción realizada al enviar un formulario.
Es una práctica común enviar formularios a un servidor para usar el botón Enviar.
Por lo general, los formularios se envían a páginas web en el servidor web.
Si se omite el atributo de acción, la acción se establecerá en la página actual.
<script type = "text/javaScript"> // Dynamicly Especifique el atributo de acción de la función de formulario ModifyAction () {var f = document.forms [0]; // Get Form DOM Var Newurl = F.Newurl.Value; // método seleccionado f.action = newurl; // Modificar la dirección de acción del formulario enviado // Use el cuadro de solicitud para mostrar la alerta de resultado ("La acción actual del formulario:" + F.Action); } </script> <form de método = "post"> Seleccione el método Enviar: <input type = "text" name = "newurl"/> <br/> <input type = "button" value = "modificar enviar acción" en ondClick = "modifactation ()"/> </form>Ejemplo 6: control de enfoque selectivo dinámico
<script type = "text/javaScript"> // El primer cuadro de radio es la función de enfoque focusit () {var f = document.forms [0]; // Get Form DOM Var Myradio = F.Myradio; // Obtener Radio Box Myradio [0] .focus (); // El primer cuadro de radio obtiene enfoque} </script> <form> cuadro de texto: <input type = "text" name = "mytext"/> <br/> box de radio: <input type = "radio" name = "myradio" value = "1"/> <input type = "radio" name = "myradio" value = "2"/> <br/> lista desplegable: <select name = "myselect" <option value " == </opción> <opción valor = "1"> 1 </opción> <opción valor = "2"> 2 </opción> </select> <br/> <input type = "button" value = "El primer cuadro de radio es el enfoque" en click = "focusit ()"/> </form>Ejemplo 7: Inicializar los valores de todos los controles en el formulario al estado inicial
<script type = "text/javaScript"> // Inicializa los valores de todos los controles en el formulario a la función de estado inicial init () {var f = document.forms [0]; // Obtener el formulario dom f.reset (); // use reset () función} </script>Ejemplo 8: Batch Agregue una explicación a todos los controles de formulario
<script type = "text/javaScript"> // lote una descripción para todos los controles de formulario function batchComment () {var f = document.forms [0]; // Obtener formulario DOM Var Children = F.ChildNodes; // Obtenga todos los elementos infantiles de la forma var newarr = []; // Defina la matriz de nuevos elementos var j = 0; // Definir subíndice para una nueva matriz de elementos // bucle a través de elementos infantiles para (var i = 0; i <children.length; i ++) {var e = children [i]; // El elemento infantil actual newarr [j ++] = e; // Agregar a la nueva matriz // Determinar si es un control if (e.tagname == 'input' || e.tagname == 'select') {// Agregar un nodo con el texto Descripción Var Text = Document.CreateTextNode ("Este elemento es necesario"); newarr [j ++] = text; // Agregar nodos para la nueva matriz}} // Borrar el contenido de formulario existente f.innerhtml = ''; // Descripción del lote para (var i = 0; i <newarr.length; i ++) {// Agregar elementos antiguos y nodos de descripción en la forma F.AppendChild (newarr [i]); }}} </script>Ejemplo 9: Use controles ocultos para agregar parámetros al formulario
<script type = "text/javaScript"> // función showParams () {// Establezca el valor de la variable oculta. Este valor también se puede especificar a través del valor del valor del valor de la etiqueta. // Defina la variable de empalme de caracteres var str = 'Los parámetros enviados por el formulario incluyen:'; // parámetro de año dividido Str + = '/n año:' + document.forms [0] .myyear.value; // Parámetro de nombre dividido Str + = '/n Nombre:' + document.forms [0] .myname.value; // Parámetro oculto dividido str + = '/nhide variable:' + document.forms [0] .myhidden.value; alerta (str); // Muestra el valor del carácter} </script> <form> <input type = "Hidden" name = "myHidden"/> año: <select name = "myyear"> <opción valor = "2012"> 2012 </opción> <opción valor = "2013"> 2013 </opción> <opción valor = "2014"> 2014 </select> <br/> <br/> nombre: <inying type text " name = "myname"/> <br/> <br/> <input type = "button" value = "shit" onClick = "showParams ();"/> </form>Ejemplo 10: marque todas las casillas de verificación
<script type = "text/javaScript"> // verificar todas las funciones de la función checkall (c) {// Obtener todas las casillas de verificación var arr = document.getElementsByName ('myname'); if (c) {// Seleccione todas las casillas de verificación para (var i = 0; i <arr.length; i ++) {arr [i] .checked = true; // select}} else {// de lo contrario, no seleccione todos // transferir todas las casillas de verificación para (var i = 0; i <arr.length; i ++) {arr [i] .checked = false; // no seleccione}}}}}}}}}}}}} Sus intereses: <br> <input type = "checkbox" name = "myall" onClick = "checkall (this.Checked)" /> Seleccione todos <br> <input type = "checkbox" name = "myname" /> seleccione todos <input type = "checkBox" name = "myname" /> seleccione all <input type = "checkBox" name = "myname" />Ejemplo 11: Establezca estilos llamativos para los controles de enfoque de la forma
<script type = "text/javaScript"> function init () {var f = document.forms [0]; // Obtener formulario DOM VAR Elements = F.Elements; // Obtener todas las matrices de control var str = ''; // Split Strings // bucle traversal para (var i = 0; i <elements.length; i ++) {var e = elements [i]; // Control actual e.onfocus = function () {// Defina la devolución de llamada de estilo para el enfoque // modificar el borde a rojo this.style.border = '1px sólido rojo'; } E.onblur = function () {// llamando al enfoque this.style.border = ''; // restaurar el estilo de borde original}}}} </script>Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.