1. Introducción al formulario
Form <orm> es una de las formas más interactivas en las páginas web. Recibe datos del usuario a través de varios formularios, incluidos los cuadros de lista desplegables, botones de radio, casillas de verificación y cuadros de texto. Este artículo presenta principalmente propiedades y métodos de uso común en formas.
JavaScript puede ser muy conveniente para operar formularios, como obtener datos de formulario para una verificación efectiva, asignar automáticamente valores para formar campos, procesar eventos de formulario, etc.
En este momento, cada forma se analiza en un objeto, es decir, objetos de forma. Estos objetos se pueden hacer referencia a través de la colección Document.Forms. Por ejemplo, se puede usar un formulario con un atributo NAMA de Form1
Copie el código de la siguiente manera: document.forms ["Form1"]
No solo eso, también puede referirse a los objetos del formulario a través del índice del formulario en el documento. Por ejemplo
Copie el código de la siguiente manera: document.forms [1]
Representa el segundo objeto de formulario en el documento de referencia
El siguiente es un elemento de formulario que contiene múltiples elementos de formulario, cada elemento tiene una etiqueta de etiqueta, unida al elemento, de modo que al hacer clic en el texto, puede configurarlo y seleccionarlo en la tabla, mejorando la experiencia del usuario.
La copia del código es la siguiente:
<Form Method = "Post" Name = "MyForm1" Action = "AddInfo.aspx">
<p> <etiqueta for = "name"> Ingrese su nombre: </etiqueta> <br> <input type = "text" name = "name" id = "name"> </p>
<p> <etiqueta for = "passwd"> Ingrese su contraseña: </etiqueta> <br> <input type = "contraseña" name = "passwd" id = "passwd"> </p>
<p> <etiqueta for = "color"> Seleccione su color favorito: </seleting> <br>
<select name = "color" id = "color">
<opción valor = "rojo"> rojo </opción>
<opción valor = "verde"> verde </opción>
<opción valor = "azul"> azul </opción>
<opción valor = "amarillo"> amarillo </opción>
<opción valor = "cyan"> Qing </ppection>
<opción valor = "púrpura"> púrpura </ppection>
</select> </p>
<p> Seleccione su género: <br>
<input type = "radio" name = "sex" id = "masculino" value = "masculino"> <etiqueta for = "masculino"> macho </label> <br>
<input type = "radio" name = "sex" id = "femenino" value = "femenino"> <etiqueta for = "femenino"> femenino </selabel> </p>
<p> ¿Qué te gusta hacer? <br>
<input type = "checkbox" name = "hobby" id = "book" value = "book"> <etiqueta for = "book"> Reading </selabel>
<input type = "checkbox" name = "hobby" id = "net" valor = "net"> <etiqueta for = "net"> en Internet </selabel>
<input type = "checkbox" name = "hobby" id = "sleep" value = "sleep"> <label for = "sleep"> sleep </label> </p>
<p> <etiqueta for = "comentarios"> Quiero dejar un mensaje: </selabel> <br> <textarea name = "comentarios" id = "comentarios" cols = "30" Rows = "4"> </textarea> </p>
<p> <input type = "Subt" name = "btnsubmit" id = "btnsubmit" valor = "enviar">
<input type = "reset" name = "btnreset" id = "btnreset" valor = "reset"> </p>
</form>
Por lo general, cada elemento de formulario debe tener atributos de nombre e ID, el nombre se usa para entregar al servidor y la ID se usa para el enlace y el filtrado de funciones.
2. Acceso a elementos en el formulario
Los elementos en el formulario, ya sea cuadros de texto, botones de radio, botones desplegables, cuadros de lista desplegable u otro contenido, se incluyen en la colección de elementos del formulario. Puede usar la posición del elemento en la colección o el atributo de nombre del elemento para obtener una referencia al elemento.
La copia del código es la siguiente:
var oform = document.forms ["Form1"] // Obtener formulario
var etextform = oform.elements [0]; // Obtén el primer elemento
var etextpasswd = oform.elements ["passwd"] // Obtener el elemento con el atributo de nombre passwd
Cita el método más efectivo e intuitivo:
Copie el código de la siguiente manera: var etttcomments = oform.elements.comments; // Obtener el elemento con los comentarios del atributo de nombre
3. Propiedades y métodos públicos
Todos los elementos en la forma (excepto los elementos ocultos) tienen algunas propiedades y métodos comunes. Aquí hay algunas listas de uso común
La copia del código es la siguiente:
var oform = document.forms ["form1"]; // Obtener forma
var ImageStcomments = oform.elements.comments; // Obtener el elemento con los comentarios del atributo de nombre
alerta (Oform.Type); // Ver tipo de elemento
var etextPasswd = oform.elements ["passwd"]; // Obtener el elemento con el atributo de nombre passwd
foxtpasswd.focus (); // Centrarse en elementos específicos
4. Presentación de formularios
La sumisión en el formulario se completa a través de botones o imágenes con funciones de botón
La copia del código es la siguiente:
<input type = "Subt" name = "btnsubmit" id = "btnsubmit" valor = "enviar">
<input type = "image" name = "Picsubmit" id = "Picssubmit" src = "Subt.jpg">
Cuando el usuario presiona Intro o hace clic en uno de los botones, el formulario se puede enviar sin código adicional. Puede usar el atributo de acción en el formulario para detectar si enviar.
Copie el código de la siguiente manera: <Form Method = "Post" Name = "Form1" Action = "JavaScript: Alert ('enviado')"> </form>
Los usuarios pueden hacer clic en repetidamente en el botón Enviar durante el proceso de envío porque la velocidad de la red es demasiado lenta. Esta es una gran carga para el servidor y puede prohibirse utilizando el atributo deshabilitado. Por ejemplo:
Copie el código de la siguiente manera: <input type = "button" value = "enviar" />