directorio
A, formar Introducción
etiqueta en un formulario de una página Web es responsable de los elementos de recogida de datos, denominada formulario. La página de inicio de sesión común más, que es una forma constituye la forma principal, su interior por lo general contiene una serie de campos de entrada para la recogida de datos y un botón de enviar, como se muestra en (el área blanca es la forma):
formulario de etiqueta desde el nacimiento de Internet ha habido temprana (nació a principios de JavaScript, por lo que la forma se puede utilizar normalmente en el caso de completamente independiente de JavaScript, de hecho, es una forma generado JavaScript). Aquí es una forma común (código de estilo omitido):
<form action="/user/userLogin.do" method="post">
<div class="form-example">
<label for="name">用户名: </label>
<input type="text" name="name" id="name" required>
</div>
<div class="form-example">
<label for="password">密码: </label>
<input type="password" name="password" id="password" required>
</div>
<div class="form-example">
<input type="submit" value="提交">
</div>
</form>
Introduzca el nombre de usuario y contraseña, haga clic en Enviar para enviar los datos a la dirección /user/userLogin.do. Si validado, la página por lo general será redirigido a la página de inicio del sistema. Si la verificación falla, el general será redirigido a la página actual, y no pudo indicador de conexión. Debido a la necesidad de reorientar, por lo que al momento de enviar los datos a través de la forma, que tienden a actualizar la página.
En el desarrollo de aplicaciones front-end y descripción técnica del artículo que hablamos antes, en el desarrollo temprano de la Internet, la velocidad es relativamente lenta. usuario del sitio web envía un formulario, por lo general una docena o incluso decenas de segundos para ver los resultados presentados. Si un usuario le falta un campo requerida en una forma, tal como las decenas de segundos antes de que el sistema de aviso, que el usuario es inaceptable.
Con el fin de los datos presentados alguna validación sencilla (por ejemplo, si un elemento está vacío, o el formato correcto) antes de enviar el formulario, JavaScript nació. En ese momento, la tarea más importante es la validación de formularios JavaScript, con el fin de reducir el tiempo de espera debido a errores de entrada causados por el usuario.
Con el desarrollo de JavaScript, que ya no se limita al campo sencilla verificado. tecnología AJAX permite a los desarrolladores no utilizan el atributo de acción para enviar el formulario, en lugar de a través del uso manual directo JavaScript. Beneficios de Ajax envía el formulario de forma manual es que después de enviar su formulario de la página de redirección no lo hace, y por lo tanto no es necesario actualizar la página. Que en muchos casos puede mejorar la experiencia del usuario.
Además, el módulo de JavaScript DOM proporciona el nativo FormDataconstructor para la construcción de un objeto de formulario. Por FromData.prototype.appendformas de añadir los datos que se presentará a la forma. De esta manera, incluso si su formulario HTML no está incluido en el formulario, puede todavía los datos del formulario de presentación analógicas. Esto se describirá en detalle más adelante.
Dos, forma de propiedades globales
1. acción
Dirección define enviar el formulario.
Al hacer clic en el tipo submitcuando el botón, el navegador se presentará a la forma actual de la acción dirección especificada. Tales como:
<form id="form" action="/user/userLogin.do">
<input name="username">
<input type="submit" value="提交">
</form>
Haga clic en el botón de envío, el nombre de usuario será enviado a los parámetros /user/userLogin.dopara el procesamiento.
Además de enviar automáticamente anteriormente, también se puede formar objetos llamando a un módulo de DOM JavaScript dirigir submitmétodo manual presentado. Tales como:
var form = document.getElementById("form");
// 如果确定知道是页面的第几个表单，也可以这样写
// var form = document.forms[0];
form.submit(); // 提交表单
Este tipo de comportamiento con un solo clic submitde un botón es el mismo.
2. Aceptar-charset
Formato de codificación de la lista apoyada por el servidor, permiten múltiples valores, normas que tienen varios valores separados por un espacio (HTML 4 permiten espacios o comas, pero HTML5 disposiciones sólo pueden utilizar espacios).
El valor predeterminado de esta propiedad es "desconocido", esta forma de codificar el tiempo formato coherente con el documento actual. Cuando un único valor, la forma se codifica utilizando ese formato. Cuando una pluralidad de valores de ajuste, el navegador será escrito en el orden de sus codifica formato de codificación primera forma soportada. Tales como:
<form action="" accept-charset="UTF-8 GBK ISO-8859-1">
...
</form>
Cuando los soportes de navegador UTF-8, será una forma codificación a UTF-8, de lo contrario comprobar de nuevo. En general, la forma usará el mismo formato de codificación que la página actual, por lo que esta propiedad se utiliza raramente.
3. autocompletar
formas de relleno automático.
Los navegadores tienen la capacidad de entrar en la memoria de la historia. Tales como:
el autocompleteentorno on, esta función puede ser activada (el atributo por defecto está activada, y por lo tanto se omite aquí).
<form action="" autocomplete="on">
...
</form>
En este momento, cuando el usuario hace clic en el cuadro de entrada de datos se ha introducido, el navegador se abrirá automáticamente el historial, que ayudan a los usuarios llenan rápidamente un formulario. Cuando el usuario introduce un número de caracteres, el navegador filtrar la historia de acuerdo con los datos de entrada actual.
Para la confidencialidad de campo fuerte, se puede autocompleteatribuir a offevitar que los registros del historial del navegador.
Para formar el conjunto de etiquetas autocompletede propiedad se llevará a efecto en todos los controles de entrada dentro de la forma. Si un pequeño número de controles en el rendimiento de forma incompatible con otros controles, estos controles puede ser re-definida como una separada autocompletepropiedad.
4. enctype
Cuando la forma se define utilizando el método POST a presentar, la forma utilizada por MIME (Multipurpose Internet Mail Extensions, Multipurpose Internet Mail Extensions tipo, es un análisis de documentos estándar, diferentes tipos MIME, los métodos de análisis no son los mismos) tipo.
Las formas tempranas no pueden cargar un archivo, todos los campos en este momento de forma se pueden enviar en un formato similar a los parámetros de consulta fondo URL, tipo de formulario MIME se define como application/x-www-form-urlencoded, se dice que es el mismo que el parámetro url para analizar los datos del formulario.
Y cuando se envía el formulario incluye campo de archivos, no se puede utilizar este tipo MIME, debido a que el archivo no puede ser tratado como parámetros de consulta URL. Para archivo de formulario contiene campos necesarios para enctypeel conjunto de parámetros multipart/form-data, que está mostrando una configuración de un formulario de varias partes (texto y archivos). Tales como:
<form action="" enctype="multipart/form-data">
<input type="file" name="file">
...
</form>
Además, HTML 5 también añade un tipo: text/plainesta vez para cargar el formulario como texto sin formato.
5. método
Forma de sumisión, incluyendo post, gety dialog.
postLa forma más común es someter, formulario de datos es más seguro, la forma recomendada es para enviar el formulario.
getFormará parámetros como parámetros de consulta directamente empalmadas a la parte trasera del valor de la propiedad de la acción, enviar datos a interponerse en el camino. Así conducir fácilmente al robo de datos, los datos sólo se puede utilizar cuando no hay requisitos de privacidad.
dialogCuando el formulario se encuentra para formar <dialog>las etiquetas, puede ser utilizado en el diálogo de cerrado después de la presentación de forma acabada.
6. nombre
Nombre del formulario.
Generalmente sustituyendo ID. A diferencia de inputlos nameatributos, etiqueta de formulario nameatributos típicamente utilizado para localizar rápidamente la forma, y por lo tanto se puede utilizar el ID de su lugar.
Tenga en cuenta que, HTML5 requiere que todas las formas dentro de la página namede atributos no se pueden repetir, que es el ID requisitos irrepetibles son similares. Así que una vez que el uso de namela propiedad, hay que prestar atención a este tema.
7. objetivo
Después de especificar el formulario se envía, el fondo carga de la página, que el valor de retorno.
Sabemos que envíe el formulario por lo general ocurre redirigida por este parámetro, se puede modificar la ubicación de visualización de la página de redirección. Este parámetro tiene cinco valores:
- _self , la página de redirección de visualización de la página actual, el valor predeterminado de la propiedad. En este punto detrás del escenario regresado página de redirección reemplaza la página actual, se produjo esa página salto.
- _blank , en una nueva ventana del documento para cargar el valor de retorno. En este momento, el navegador va a crear una nueva pestaña que muestra la página de redirección, salir de la página actual.
- _parent , el valor de retorno se carga en la ventana padre. Si la forma de corriente situado en el iframe, se envía el formulario, la página de redirección se cargará en la página principal. De lo contrario, el comportamiento es consistente con _self.
- a _top , el valor de retorno se ha cargado en la ventana superior. página de redireccionamiento será cargado en la parte superior de la ventana, que reemplaza totalmente la página actual, independientemente de si la forma se anida en marco flotante muchas capas.
- IframeName , lleva a cabo dentro de un valor de retorno iframe cargado. En esta página de redireccionamiento será cargado en el marco flotante especificado.
Tres, control de formulario de entrada
Formulario de los principales de control de entrada inputelementos, de acuerdo con typediferentes valores, diferentes tipos de datos pueden ser de entrada. El formato general es:
<input type="text" name="username">
nameLa propiedad es inputla etiqueta atributo muy importante. Cuando se envía el formulario, namees el nombre del campo del parámetro, es decir, el fondo se basa en la namepropiedad para obtener los parámetros del formulario. El valor real enviado al servidor se almacenan en la inputde objetos valuepropiedades.
La siguiente es una común inputtipo:
- el botón , botón ordinaria. Y
<button>etiquetas similar al código JavaScript para realizar general. - la casilla de verificación , la casilla de verificación. Se define por un conjunto de casillas de verificación. Cabe señalar que el mismo grupo debe utilizar la misma caja
name, este será sometido a un segundo plano como un campo. - Color (el HTML 5) , selector de color. En realidad, es una caja de entrada de color, y la diferencia general es que el cuadro de entrada, haga clic en el campo se abrirá automáticamente el navegador Selector de color. Haga clic en la toma de color, qué valor se rellena automáticamente
input. - FECHA (HTML5) , del selector. Haga clic aparecerá un control de calendario, puede seleccionar una fecha, exacta al año / mes / día.
- de fecha y hora (HTML5) , con fecha de selector de hora. Es más preciso que la fecha, el tiempo puede ser seleccionado / min / seg.
- local de fecha y hora (HTML5) , con un selector de fecha de fecha y hora similar. Sin embargo, el formato de hora formato utilizado para el sitio web en su área, en lugar del formato estándar internacional.
- La meses (el HTML 5) , para seleccionar la casilla de entrada mes.
- Una semana (el HTML5) , para la selección de las semanas de la caja de entrada.
- tiempo (el HTML5) , aparecerá un tiempo de control, al seleccionar / min / seg.
- Correo electrónico (HTML5) , control de entrada del buzón. Introduzca la dirección de correo electrónico utilizada.
- Archivo , control de carga de archivos. Haga clic para seleccionar el archivo para ser cargado desde el servidor local. Para establecer
multiplela propiedad permite el control para cargar varios archivos, que se almacenan en una matriz, a través del objeto de controlfilespuede acceder a la propiedad. - ocultos , campos de formulario ocultos. Una propiedad que
type="hidden"seinputno aparece en la página, pero su valor normalmente se envía al servidor. Tal cuadro de entrada se utiliza comúnmente en la presentada no requieren un usuario para completar manualmente con los datos del formulario, o el almacenamiento de unos pocos datos globales. Por ejemplo, si tenemos que captar la posición de inicio de sesión del usuario, y este valor no requieran la intervención del usuario, podemos llamar a la interfaz del navegador para obtener información sobre la ubicación geográfica almacenada en un campo oculto para enviar el formulario. En este caso el usuario no nos perciben a recoger información de ubicación (siempre y cuando el usuario hace ubicación no desactivar). - Imagen , tipo de imagen botón de enviar. La función es similar a
submit, el botón de enviar se utiliza cuando una imagen. - Número (el HTML5) , caja de entrada digital. El cuadro de entrada sólo puede introducir números, incluyendo números y puntos decimales. Por defecto con una flecha hacia abajo, el valor actual de más o menos uno.
- contraseña , cuadro de introducción de la contraseña. Contenido del control se oscurecían hasta la entrada, por lo general aparecen como puntos o asteriscos (e implementaciones de navegador relacionado).
- Radio , botones de radio. Tenga en cuenta que cada opción de grupo de botones de radio debe ser la misma
name. - Rango (el HTML5) , con un control deslizante de los campos numéricos deslizantes (por ejemplo, control de volumen, deslice el control deslizante para cambiar el valor).
- RESET , el botón de reinicio. Haga clic en este botón para restablecer el formulario.
- Buscar , el cuadro de búsqueda.
- Someter , botón Enviar. Haga clic en el tipo
submitde botón para enviar el formulario actual, sometido a posicionarformla etiqueta deactionvalor del atributo. - Tel (HTML5) , para introducir un número de teléfono.
- texto , campos de texto sin formato, el tipo predeterminado de control de entrada.
- URL , para introducir una URL.
Además de inputfuera de la etiqueta, forma compatible tal como select(cuadro de selección), textarea(multiline campo de texto) de dicho control de entrada, no descrita en detalle aquí.
Cuatro, forma de presentación manual
Llamar el objeto no es para enviar el formulario se ha descrito anteriormente, aquí está el manual del submitmétodo para enviar el formulario, sino por ajaxla manera de enviar el formulario. Este enfoque no requiere redirección de fondo, ya que sin una escena de actualización de la página muy práctico.
Con el fin de escritura sencilla, usamos jQuery para lograr, otros marcos, como axios es similar.
1. El formulario de configuración de objetos de datos
Antes de enviar el formulario de forma manual, es necesario obtener los datos del formulario. JavaScript proporciona una forma nativa constructor de objeto: FormData. Si está presente en la forma de la página actual, objetos de formulario se pueden utilizar directamente para construir los objetos de formulario de datos:
var form = document.getElementById("form");
var formData = new FormData(form);
FormData aquí es nuestra forma de objetos de datos, que puede ser presentada directamente al servidor.
Si sólo queremos presentar un conjunto de datos al servidor en la forma de la forma, mientras que no dicha página un formulario, pueden estar directamente FormDataconstruido objetos de formulario de datos, y luego appendañadido al mismo método de campo. Tales como:
var formData = new FormData();
formData.append("username", "carter");
formData.append("password", "123");
En este caso formDatatambién es un objeto de datos de formulario de presentación, pero no forma construida a partir de objetos existentes.
2. Formulario de Presentación
Presentar a utilizar poste común por:
$.ajax({
url : "/user/userLogin.action",
type : "POST",
data : formData,
contentType: "multipart/form-data",
success : function(data) {
... // 提交成功
},
error: function (error) {
... // 提交失败
}
});
Si el formulario no contiene un archivo de datos, o se puede contentTypeconfigurar application/x-www-form-urlencoded(debe ser coherente con el back-end).
El código es enviar un único archivo de forma muy común, en este momento sólo tenemos que ofrecer un tipo de archivo de la etiqueta de entrada en la página utilizada para obtener el archivo que desea cargar, y luego el objeto de archivo almacenado en los objetos FormData puede ser, usted no tiene página en un formulario especial de conjunto.
Acerca de los objetos FormData, el MDN - FormData documento tiene una introducción muy detallado, lo que necesita saber que usted puede mirar a sí mismo.
resumen
forma de conocimiento contenido en una forma particular, aunque en realidad no, pero casi todos estrechamente relacionada con el desarrollo diario. Para dominar la forma, lo más importante es el uso de diversos tipos de expertos input, seguidas por la necesidad de utilizar el nuevo HTML5 formarán etiquetas semánticas, como filedset y la leyenda.
