La recopilación de datos de recopilación de formularios en HTML

Aquí presentaremos el conocimiento de los elementos de formulario y la presentación del formulario.

La interfaz DOM del elemento de formulario es HTMLFormElement , que hereda de HTMLElement , por lo que tiene los mismos atributos predeterminados que otros elementos HTML, pero tiene varios atributos y métodos únicos: en sí mismo:

El elemento de entrada es un elemento de forma muy utilizado.

Entrada de texto <input type = text name =>

Enviar entrada <input type = Envit>

La entrada de un solo botón <input type = radio name = debe tener el mismo valor de nombre = el valor del relleno es el mejor para corresponder>

Ingrese <input type = checkbox name = el mismo valor de nombre = diferentes valores correspondientes>

Entrada digital <tipo de entrada = número min = max => El cuadro de entrada solo puede ingresar números y puede establecer el valor máximo y el valor mínimo.

El rango de entrada <input type = rango min = max => Similar al número, pero muestra una barra deslizante en lugar del cuadro de entrada.

La entrada de color <input type = color> aparecerá un selector de color.

La entrada de fecha <entrada tipo = date> aparecerá un selector de fechas.

La entrada de correo electrónico <entrada tipo = correo electrónico> se muestra como un cuadro de entrada de texto y aparecerá un teclado personalizado.

Tel input <input type = Tel> similar a la entrada de correo electrónico

Entrada de URL <input type = url> Similar a la entrada de correo electrónico, un teclado personalizado también aparecerá.

TextARea Elements puede crear un área de texto de línea múltiple.

<Textarea name = id = color = 30 filas = 10> </textarea>

Los valores de atributo de Cols y Row representan el ancho y la altura del área de texto.

Seleccione Elementos y los elementos de opción se pueden usar para crear un menú de caída.

<select name = id => <opción valor => </opción> <opción valor => </opción> <opción valor => </oplct>

¿Cómo agrupar?

ejemplo:

<input type = radio name = favor favorito value = juego de juego> jugar juegos

<input type = Radio name = favor favorito de valor = código de escritura> Código de escritura

<input type = Radio name = Sex Value = Man> Male

<input type = Radio name = Sex Value = Woman> mujer, mujer,

Estos son los dos grupos de radio

Proporcione una información rápida (Sugerencia) que pueda describir el valor esperado del campo de entrada.

El mensaje se mostrará cuando el campo de entrada esté vacío, y desaparecerá cuando el campo obtenga el enfoque.

Defina la entrada oculta. Los campos ocultos no son visibles para los usuarios. Los campos ocultos generalmente almacenan un valor predeterminado, y sus valores también pueden ser modificados por JavaScript.

Por ejemplo, para la seguridad, los valores de nombre y valor que no son visibles para los usuarios en segundo plano se pueden usar para verificar los antecedentes para verificar y evitar páginas de falsificación.

Agregue un botón de envío al formulario para permitir que los usuarios envíen formularios.

Los siguientes tres botones pueden activar el evento Enviar el formulario al hacer clic:

 <input type = shipt /> <button type = shit> < /button> <input type = image />

Se envía el valor predeterminado de tipo de elemento de botón en la especificación, pero el valor de meditación está en IE678, por lo que es necesario agregar manualmente la propiedad tipo = enviar al elemento del botón desde la compatibilidad.

La persona inicial puede pensar que la presentación del formulario se activa mediante el evento de clic del botón de envío.

 Form.addeventListener ('enviar', function (e) {if (válido ()) {...} E.PreventDefault ()})

Cuando no hay uno de los tres botones mencionados anteriormente en el elemento de formulario, el usuario no podrá enviar el formulario (la tecla Ingrese también no es válida submit() . submit()

 if (value ()) {form.submit ()}

Basado en la tecnología popular AJAX+Cross -Domain Post (CORS) actual, es probable que no usemos el elemento de formulario para enviar datos directamente al servidor. Aunque esto es factible, hay un fenómeno de degradación en la mayoría de los casos.

JavaScript se puede usar para verificar estos datos de entrada en el formulario HTML antes de que los datos se envíen al servidor.

Estos datos de forma típicos verificados por JavaScript son:

¿El usuario ha completado los elementos requeridos en el formulario?

¿La dirección de correo ingresada por el usuario es legal?

¿El usuario ha ingresado a una fecha legal?

¿Los usuarios ingresan texto en campo numérico?

Las siguientes funciones se utilizan para verificar si el usuario ha completado el elemento requerido (o requerido) en el formulario. Si el debe llenarse o la opción está vacía, entonces el cuadro de advertencia aparecerá y el valor de retorno de la función es falso, de lo contrario, el valor de retorno de la función es verdadero (significa que los datos no son un problema):

 Function value_required (campo, alerta) {con (campo) {if (valor == null || valor ==) {alerttxt);

A continuación se muestra el código con el formulario HTML:

 <html> <fead> <script type = text/javaScript> function value_required (campo, alerta) {con (campo) {if (value == null || valor ==) {alerta (alerta lerttxt); {Return true}} function value_form (this) {con (this) {if (value_required (correo electrónico, correo electrónico debe completarse!) {Ageal.foc US (); return false}}} </script> < /head> <body> <form de acción = submitpage.htm onSubMit = return validate_form (this) método = post> correo electrónico: <input type = text name = 30> <input type = subbit value = envit> </form> </body> < /html>

Las siguientes funciones verifican si los datos de entrada se ajustan a la sintaxis básica de la dirección de correo electrónico.

Esto significa que los datos de entrada deben contener@ símbolos y números de puntos (.). Al mismo tiempo,@ no es el primer carácter de la dirección de correo electrónico, y al menos un número de puntos después de@ 同时:

 Function value_email (campo, alerttxt) {con (campo) {apos = value.indexof (@) dotpos = value.lastIndexof (.) If (apos <1 || dotpos-apos <2) lert (alerttxt); Else {return true}}}

A continuación se muestra el código completo con el formulario HTML:

 <html> <fead> <script type = text/javaScript> function value_email (campo, alerttxt) {con (campo) {apos = valor.indexof (@) dotpos = value .lastindexof (.) if (apos <1 || dotPos-apos <2) {alerta (alerta de alerta); = Falso) {COLECH.FOCUS (); Nombre de texto = size de correo electrónico = 30> <input type = subt value = envit> </form> </body> </html>

En ausencia del paquete de elementos de formulario, incluso si el enfoque de la página actual está en el elemento de formulario, presione las teclas ENTER no activarán el formulario del formulario. , destruyendo el flujo original original. La solución más fácil es envolverlo con un elemento de formulario en la capa externa y determinar que hay al menos un botón de envío en el elemento de formulario. En este momento, cuando se enfoca el dominio de entrada en el formulario, el usuario presiona la tecla Ingrese para activar el envío.

Al enviar un formulario, el navegador de alto nivel, incluido el navegador móvil, preguntará a los usuarios si necesita recordar la contraseña de la cuenta de usuario, esta es una característica muy útil. En ausencia de elemento de forma, el navegador no aparecerá en la ventana de consulta.

Cuando desarrollamos una solicitud de formulario, no debemos intentar eliminar los elementos de formulario y enviarlo directamente en el elemento de formato, debe incluirse un botón de envío. Procesamiento de incidentes enviado en el evento Enviar el elemento de formulario, no el evento de clic del botón de envío.

referirse a:

Envío de elementos de formulario y formulario