Haga un botón jquery inactivo. JavaScript: cómo activar o desactivar un botón según las condiciones. ¿Por qué es necesario desactivar los botones?

Cada documento HTML en Internet consta de varios elementos. Muchos de ellos son bastante comunes y se pueden encontrar en casi todos los sitios web. Por ejemplo, el contenido de la página suele estar dividido en párrafos y contiene títulos, imágenes y enlaces. Pero aunque estos elementos son comunes, no se requiere su presencia en el código. No hay necesidad técnica de ellos en una página web. Sin embargo, es raro encontrar un sitio sin estas etiquetas.

Propósito de la etiqueta

Hay elementos que deben estar presentes en el código. Técnicamente sólo hay una etiqueta que debe estar presente en la parte superior de todos los documentos escritos en lenguaje HTML- -etiqueta. Permite al navegador comprender dónde comienza y termina la página. Todo el contenido de la página HTML se coloca entre las etiquetas de apertura y cierre. Está precedido únicamente por doctype. La mayoría de los demás son técnicamente elementos importantes- dentro de la etiqueta, que se encuentra en el interior y se encuentra al principio del código. Él y la etiqueta son sus descendientes.

¿Qué está contenido en

Un elemento es un contenedor de otros elementos. Contiene información general(metadatos) sobre el documento, incluido su título, enlaces a scripts y hojas de estilo. Los metadatos proporcionan información sobre el documento, como título, descripción y palabras clave. En el mismo lugar donde se ubica la etiqueta, donde se coloca el contenido del sitio. Los metadatos están ocultos para los visitantes, pero los optimizadores los utilizan para promocionar la página. Estas y las etiquetas de encabezado (-) son muy útiles porque transmiten información al navegador web y a los motores de búsqueda sobre esa página.

El orden de la mayoría de los elementos realmente no importa. Esta es una cuestión de preferencia, por lo que se pueden escribir de una manera que sea conveniente para el diseñador. Los metadatos son necesarios para optimización de motores de búsqueda, ya que facilitan que los robots que indexan sitios los encuentren y los muestren en la página de búsqueda en en un cierto orden. El orden de visualización depende de sus algoritmos de funcionamiento, que incluyen, entre otras cosas, información técnica correcta sobre la página.

¿Qué elementos pueden estar presentes en

Los siguientes elementos pueden aparecer dentro de esta etiqueta: (este elemento es obligatorio para un documento HTML), , , , , .

En la etiqueta puedes:

La mayoría de los metadatos no son visibles en el navegador. Sólo suele aparecer en la barra de título del navegador. Esto puede resultar útil para la funcionalidad de la página y la información se puede comprobar fácilmente a través del Inspector.

Sintaxis y atributos

Etiqueta - emparejada. ¿Qué significa? La información que contiene está escrita entre las etiquetas de apertura y cierre como . ¿Qué deberían tener la mayoría de los documentos HTML? Esta es una etiqueta en . La única excepción es si el documento es un srcdoc, o si la información que debe incluirse en el encabezado ya está en el protocolo desde hace más de nivel alto. Un ejemplo sería el formato HTML. Correo electrónico. Se pueden agregar atributos a un elemento HTML para proporcionar más información sobre cómo debe verse o comportarse un elemento. La etiqueta acepta el atributo de perfil, que contiene la dirección del perfil de metadatos y otros atributos globales. Pero no son obligatorios.

Etiqueta y sus características.

El elemento de página o título es una de las metaetiquetas más importantes en . Debe estar siempre presente en la página web, de lo contrario no podrán encontrarlo rápidamente y mostrarlo correctamente en los resultados de búsqueda. Además, existen otras razones por las que su uso es obligatorio:

Muestra el nombre del sitio.

Utilizado como principal medio de catalogación. Si una página web no tiene un título que describa su contenido, los motores de búsqueda le otorgan una clasificación más baja.

También el contenido se muestra como enlace de texto en una página de resultados de búsqueda conocida como SERP.

Aparece en la parte superior de la ventana del navegador. O en la pestaña que describe la página en el navegador.

La información del título de la página se registra cuando alguien marca un sitio como favorito. Por tanto, su contenido debe ser memorable para que el usuario pueda recordarlo y encontrarlo fácilmente entre otras páginas web.

Si no se utiliza esta etiqueta, el sitio mostrará "Documento sin título". Este es el título de página predeterminado. Este título se utiliza en muchos plataformas de software desarrollo web.

Dado que la etiqueta está destinada a mostrar información sobre el sitio, cada página debe tener un título único, ya que contiene contenido único. Esto es lo más importante para el SEO. Buen titulo debe ser realista y mostrar la información que realmente está presente en la página. Se cree que el contenido óptimo de esta etiqueta no debe exceder los 60 caracteres. Puede agregar más, pero los motores de búsqueda seleccionarán el contenido que exceda este número.

Metadatos en

La etiqueta define la sección en la que se encuentra. Información técnica Documento HTML. Los metadatos contienen Información adicional sobre una página web en un navegador. Pueden incluir información como el nombre del autor, el programa que se utilizó para crear la página y palabras clave. Mayoría metaetiqueta importante, que debería estar en el código de la página, es la codificación. Las metaetiquetas son muy importantes para obtener buena calificación V los motores de búsqueda. Por lo tanto, es importante crear títulos y descripciones de páginas de alta calidad.

Otro etiquetas importantes

La etiqueta también puede contener otros elementos. Por ejemplo, se utiliza para agregar estilos internos y cambiar el diseño de un documento. Sin embargo, se recomienda incluir estilos externos; es mucho mejor separar el contenido de su diseño. Esto se puede hacer usando la etiqueta. Agregar mesa externa estilos usando el siguiente código: . Esta etiqueta requiere un atributo href, que especifica un enlace a un archivo con estilos CSS, así como un rel, que indica que se trata de estilos. Hay otras opciones para usar la etiqueta, por ejemplo, para crear un favicon, un ícono de una página web que se muestra en Resultados de la búsqueda. El atributo rel también se usa de diferentes maneras y se usa a menudo al crear aplicaciones móviles.

Si agrega varios elementos a un documento, se aplicarán en el orden en que aparecen. Por lo tanto, es importante asegurarse de que se sigan mutuamente en en el orden correcto para evitar sorpresas. en idioma elemento HTML se utiliza para agregar un recurso externo al documento actual y se utiliza con mayor frecuencia para hacer referencia a estilos. También se pueden incluir scripts en la etiqueta. La etiqueta le permite agregar JavaScript al sitio, pero se recomienda insertarla poco antes de cerrarlo. Luego, todo el contenido se cargará primero y luego se procesará mediante JavaScript. Esto ayudará a aumentar la velocidad de carga de la página y evitará que el usuario navegue. pantalla en blanco mientras se conecta el script.

Se puede observar que consta de tres secciones principales.

• – la raíz de cualquier documento HTML en el que se encuentran todas las demás secciones (esta etiqueta debe estar en una sola copia y debe estar presente en cada página).
• – un encabezado que contiene información de servicio e instrucciones para que el navegador muestre contenido.
• – la sección principal en la que se encuentra el contenido, es decir, todos informacion util(texto, imágenes, vídeo). Además del contenido, esta sección contiene la cuadrícula del sitio o su diseño: se describen las ubicaciones de las secciones principales del sitio, como el encabezado, pie de página, menú principal, columnas laterales, etc.

La etiqueta no es diferente, excepto que es el elemento raíz: un contenedor para todos los demás bloques. Así que vayamos a más consideración detallada secciones.

Los elementos de esta sección no se muestran directamente en la página web. La única etiqueta de esta sección que mostrará información es la etiqueta. En la sección etiqueta, se escribe el título de la página web; este texto se mostrará en la barra de título de la ventana del navegador.

El título se mostrará en la barra de título del navegador.

Esta etiqueta es una sola etiqueta obligatoria en la sección.

Además de la etiqueta, en esta sección se pueden colocar las siguientes etiquetas: , , , .

Etiqueta

Esta etiqueta le dice al navegador dónde se encuentran ciertas cosas. recursos externos, como estilos externos (CSS). También usando una etiqueta y especificando el apropiado atributo rel, puede especificar la dirección de la fuente RSS, el favicon del sitio y otros recursos externos.

Etiqueta

Este etiqueta universal, que describe los datos. La etiqueta proporciona metadatos sobre el documento. Navegador HTML. Los metadatos no se muestran, sino que solo se utilizan con fines de servicio, ya sea por el motor del navegador o buscar arañas. Los metaelementos se utilizan normalmente para describir una página ( descripción), instrucciones palabras clave (palabras clave), indicación del autor del documento ( autor), indicaciones del tipo de contenido y su codificación, y otros metadatos.

Etiqueta

Mediante el uso de esta etiqueta, puedes indicarle al navegador dónde debe buscar scripts externos:

o inserte el script directamente en esta sección:

document.write ("¡Hola mundo!")

Etiqueta

Esta etiqueta se puede utilizar para configurar los estilos necesarios sólo para esta página, y también si no es necesario conectarse archivo externo estilos usando el . Puede especificar más de una etiqueta

h1 (color: rojo) p (color: azul)

Esa es toda la información que necesitas saber sobre la sección. A continuación, consideraremos la sección que contendrá el contenido principal de la página web.

) se planteó la duda de si sería bueno que los botones de un formulario enviado al servidor establecieran la propiedaddisable="disabled".

Sin embargo, todavía no hemos descubierto por qué es necesario y cómo hacerlo. Parecería que podría ser más sencillo y de qué podemos hablar aquí, pero no, de hecho, todo resultó no ser tan trivial. Permítanme señalar de inmediato que el siguiente razonamiento se aplica a ambos tipos de formularios: ambos enviados mediante ENVÍO normal y con usando AJAX.

¿Por qué es necesario desactivar los botones?

Para que sea obvio para el usuario que ya hizo clic en el botón y que se está enviando el formulario.

Para que el servidor no se cargue con solicitudes innecesarias y para reducir la probabilidad de cualquier error.

Está claro que puede evitar clics innecesarios adjuntando una visualización especial que indique que la solicitud ha sido aceptada y el formulario se está enviando ( ejemplo más simple- muestra algo GIF animado). Sin embargo, seguirá siendo posible hacer clic en los botones y los usuarios más impacientes no aprovecharán esta oportunidad. Al mismo tiempo, el formulario ya no podrá reaccionar a estos clics adicionales (el gif animado ya está girando) y la frustración del usuario no hará más que aumentar.

También está claro que se pueden evitar solicitudes innecesarias adjuntando algún class="form_is_loading" al formulario y verificando la presencia de esta clase durante cada envío. Pero, ¿por qué realizar estas comprobaciones cuando puedes prescindir de ellas simplemente desactivando el botón?

Cómo inactivar los botones Esta sencilla opción propuesta en los temas mencionados anteriormente resulta insuficiente e inviable.

¿Por qué no basta con desactivar un botón pulsado?

El envío de un formulario también se puede realizar presionando Enter. Por lo tanto, el procesamiento de botones debe asignarse al evento de envío del propio formulario. Además, un formulario puede tener varios botones, y sería lógico desactivarlos todos, y no solo el botón en el que se hizo clic.

Si, después de enviar el formulario, volvemos a la página con el formulario (usando el botón "Atrás" en el navegador), entonces el almacenamiento en caché funcionará: nos encontraremos con botones inactivos y no podremos volver a enviar el formulario, sin reinicio forzado páginas con la pérdida de todos los campos previamente completados (Volver a Formulario de búsqueda Aquí hay un ejemplo en vivo de la página de resultados de búsqueda).

Si un formulario tiene varios botones (por ejemplo, "Publicar" y "Cancelar"), no podremos decirle al servidor en qué botón se hizo clic: botón inactivo no transmite su nombre y valor, incluso si lo inactivamos mediante el evento de envío

Entonces, el script para crear botones inactivos.

Brevemente el escenario es este.

Hacer que los botones estén inactivos según el evento de envío del formulario

Devolvemos los botones al estado activo antes de salir de la página usando el evento window.onunload

Cada botón del formulario debe crear un campo oculto con el mismo nombre en el evento onclick, a través del cual transmitirá su valor al servidor.

Y luego sigue un script más detallado con un diseño de código.

//// archivo html///////////////////////////////////////////////// // ///////////////// formUploader.prepareForm(document.getElementById("the_form")); //// archivo js //////////////////////////////////////////// /////////////////////////// formUploader = ( prepareForm: función(formulario)( // Cada botón significativo Cuando se hace clic, el formulario debe crear un campo oculto con el mismo nombre // para que la información sobre qué botón se hizo clic se transmita al servidor var allFormFields = form.getElementsByTagName("input"); para (var i=0; i