Etiqueta Javascript

| | | | | | | | | | | | | | | | | |

La etiqueta HTML se utiliza para definir un tìtulo para un elemento en un formulario HTML. Se accede a él con la etiqueta "label" y está vinculado a un formulario web en particular. Cuando se hace clic en ellos, permiten al usuario interactuar con un formulario. & Nbsp;

Cuando esté creando formularios en HTML, puede decidir que desea agregar un tìtulo a los campos dentro de un formulario. Por ejemplo, es posible que desee que un campo de formulario que solicite el nombre de un cliente tenga el tìtulo Nombre:.

Ahì es donde HTML "La etiqueta label" aparece. La etiqueta "label" se utiliza para definir un tìtulo para un elemento de control de formulario en un formulario HTML. Cada etiqueta está asociada con un elemento especìfico en un formulario.

Este tutorial discutirá, con referencia a ejemplos, còmo usar la etiqueta HTML para agregar una etiqueta a un formulario. Al finalizar la lectura de este tutorial, será un experto en la creaciòn de etiquetas de formulario utilizando HTML.

Etiqueta HTML

La etiqueta "label" agrega una etiqueta a un elemento de formulario particular en un formulario. Cada etiqueta de etiqueta está asociada con un elemento de formulario a través del atributo HTML for.

Hay algunas razones por las que el uso de la etiqueta "label" es importante. Primero, la etiqueta está vinculada a un campo de formulario particular en una página web. Esto significa que, si un lector de pantalla encuentra el campo de formulario, el contenido de la etiqueta que especifique se leerá al usuario. Esto, a su vez, hace que su sitio web sea más accesible.

Además, cuando una etiqueta "label" se asocia con un campo de formulario, el usuario puede hacer clic en el texto dentro la etiqueta para activar el formulario. Esto facilita que el usuario comience a interactuar con un campo de formulario porque no tiene que hacer clic directamente en el elemento. & Nbsp;

Por ejemplo, si tuvieras un elemento de casilla de verificaciòn sin etiqueta "label", el usuario tendrìa que hacer clic directamente dentro de la casilla de verificaciòn para activar el elemento. Sin embargo , si especificaste una etiqueta "label", el usuario también podrìa hacer clic en la etiqueta para activar la casilla de verificaciòn.

Sintaxis de etiqueta HTML

La sintaxis de la etiqueta HTML "label" es la siguiente:

El atributo for se utiliza para asociar una etiqueta con un elemento "input" particular. El valor del atributo for debe ser igual al atributo input id utilizado por un elemento "input".

También puede colocar un campo "input" dentro de una etiqueta para asociar el formulario de entrada con la etiqueta, en lugar de utilizar el atributo for. La sintaxis para esto es la siguiente:

La etiqueta HTML "label" admite todos los atributos globales en HTML. Además, la etiqueta "label" es compatible con todos los navegadores principales.

Ejemplos de etiquetas HTML

Supongamos que estamos creando un campo de formulario web que pregunta un usuario para su direcciòn de correo electrònico.

Queremos que el campo del formulario aparezca con la etiqueta ¿Cuál es su direcciòn de correo electrònico? Hay dos enfoques que podemos utilizar para realizar esta tarea: use el atributo para o use una etiqueta anidada.

para Attribute

Podrìamos usar el siguiente còdigo para agregar esta etiqueta a un campo de entrada usando el para el atributo:

Nuestro còdigo devuelve lo siguiente:


Desglosemos nuestro còdigo.

En la primera lìnea, usamos una etiqueta "label" para agregar la etiqueta ¿Cuál es su direcciòn de correo electrònico? a nuestro formulario web. Especificamos el atributo for y le asignamos el valor email_address, que vincula la etiqueta a nuestro campo de formulario con el id email_address.

Al final de la lìnea, usamos una etiqueta "br /" para insertar una lìnea horizontal en blanco en nuestro còdigo.

En la siguiente lìnea, creamos un campo de entrada de texto usando la etiqueta "input". Este campo de entrada tiene el id email_address, que usamos para asociar el campo de entrada con una etiqueta.

Etiqueta anidada

Alternativamente, podemos usar un "input" etiqueta anidada en una etiqueta "label" para crear nuestra etiqueta. Aquì está el còdigo que usarìamos para crear una etiqueta anidada para nuestro formulario web anterior:

Nuestro còdigo devuelve:

Nuestro formulario es visualmente igual que en nuestro primer ejemplo. Sin embargo, en este ejemplo, no usamos para atributo para vincular nuestra etiqueta a nuestro formulario. En su lugar, colocamos nuestra etiqueta "input" dentro de una etiqueta "label", que une las dos etiquetas HTML.

Etiqueta HTML Accesibilidad

Hay algunas notas de accesibilidad que debe tener en cuenta al diseñar una etiqueta con la etiqueta "label".

Primero, encabezados no debe colocarse dentro de una etiqueta "label". Esto se debe a que los elementos de encabezado dentro de las etiquetas "label" pueden interferir con las tecnologìas de lectura de pantalla y otras herramientas utilizadas para promover la accesibilidad web. Por lo tanto, si desea agregar un encabezado a una etiqueta de formulario, debe hacerlo fuera de cualquier etiqueta "label".

En segundo lugar, no debe colocar ning√∫n botòn o enlaces dentro de una etiqueta "label". Esto se debe a que los elementos interactivos dentro de una etiqueta "label" pueden hacer que al usuario le resulte confuso comprender còmo funciona el formulario web. Si un botòn está disponible dentro de una "label", por ejemplo, puede hacer que el usuario piense que debe hacer clic en el botòn para interactuar con el formulario web.

Conclusiòn

La etiqueta HTML "label" se utiliza para crear etiquetas de formulario. Estas etiquetas están vinculadas a un formulario web en particular y, cuando se hace clic, permite que el usuario interact√∫e con un formulario. & nbsp;

Este tutorial explica, con referencia a ejemplos, còmo utilizar el "label" HTML etiqueta para agregar etiquetas a un elemento de formulario, asì como problemas de accesibilidad asociados con la etiqueta "label". ¬°Ahora tiene el conocimiento que necesita para comenzar a trabajar con etiquetas en HTML como un profesional!