Etiqueta Label

Información Adicional

No existe información adicional para este video tutorial.

Transcripción

Hemos visto hasta ahora muchas formas en las que podemos solicitar información a nuestros visitantes, pero hay algo que no hemos hecho aún. Veamos lo que nos falta en nuestro formulario. Tenemos los campos para añadir un usuario, una contraseña, para seleccionar nuestro género, música favorita, añadir nuestro mensaje y nuestra música favorita.
Pero prácticamente solo nosotros sabemos esto, ya que no se lo hemos comunicado al visitante. ¿Cómo podría el visitante saber que lo que tiene que colocar aquí es su usuario sino lo hemos indicado?
Bien, para añadir esas indicaciones usaremos una etiqueta llamada label. Así que vamos a entrar en nuestro editor. Primero añadiremos un label para el campo de usuario, así que haremos un poco de espacio aquí y añadimos la etiqueta label, y la cerramos. Y dentro de ella escribiremos Nombre de usuario.
Ahora necesitamos indicar a cuál de los elementos en nuestro formulario se encuentra asociada esta etiqueta label, así que añadiremos un nuevo atributo llamado for dentro de la etiqueta label, y como valor colocaremos usuario. Posiblemente estés pensando de que hemos usado el mismo valor del atributo name en la etiqueta input del usuario para vincularlo. Pero no es así, para vincular el atributo for a nuestra etiqueta input debemos añadir un atributo extra en la etiqueta input, el atributo ID y luego añadir el mismo valor que tiene el atributo for dentro de la etiqueta label.
Entonces para vincular un label a un elemento de nuestro formulario necesitamos colocar el atributo for en la etiqueta label y el atribut ID en el elemento del formulario, y el valor de ambos debe ser igual. Veamos qué tal se ve ahora nuestro formulario. Refrescamos la página en el navegador. Y como puedes ver ahora tenemos este texto que dice Nombre de usuario al lado del campo de texto correspondiente.
Pero lo realmente bueno de vincular nuestro label a la etiqueta input es que podemos hacer clic en el label y nos enfocará el campo de texto. Como puedes ver no es solo un texto, nos permite seleccionar el campo de texto para poder escribir dentro de él. Muy bien, regresemos al editor, y vamos a añadir los otros labels que nos faltan en nuestro formulario. Ahora voy a copiar el label de usuario y lo pegaremos en esta área.
Voy a cambiar el texto dentro del label y también modificaremos el valor del atributo for. Ahora añadimos el atributo id dentro de la etiqueta input que deseamos asociar y le damos el mismo valor del atributo for en el label. Muy bien, ahora haremos el mismo proceso con los radio buttons y los checkboxes, aquí los labels remplazarán el texto que habíamos añadido aquí anteriormente, así que voy a eliminar este texto y pegaré el label aquí.
Y cambiamos el valor del atributo for, cambiamos el texto dentro del label y añadimos el atributo id con el valor que tiene el atributo for del label. En las siguientes etiquetas debemos de hacer el mismo proceso, así que adelantaremos el video hasta que tengamos todos los labels añadidos en nuestros radiobottons y checkboxes.
Muy bien, ahora como puedes ver tenemos todos los labels de esta parte añadidos. Entonces siempre que quieres vincular un label a un elemento de tu formulario debes hacer que el valor del atributo for sea igual que el valor del atributo id. Así que ahora terminaremos de añadir los labels que nos faltan, que serían los del área de texto y el de la etiqueta select.
Entonces añadimos primero el de la etiqueta textarea, colocamos el atribut for y cerramos el label. Ahora dentro de este label añadiremos algo de texto, colocaremos una indicación al visitante sobre el tipo de mensaje que debe enviar por medio de este formulario. Y al final de este label añadiremos una etiqueta br para crear un salto de línea y que el texto del label no quede junto a la caja de texto de la etiqueta textarea. Que no se te olvide añadir el atributo ID en textarea con el mismo valor que for.
Y finalmente añadiremos el label para nuestra etiqueta select. Así que añadimos aquí el label, colocamos el atribut for, le vamos a colocar comida como valor, cerramos el label y colocaremos aquí Tu comida favorita. Y ahora en la etiqueta select añadimos el atributo id y como valor colocamos comida. Muy bien, ahora guardamos los cambios y vamos al navegador, refrescamos la página.
Y como puedes ver tenemos todos los labels del formulario añadidos correctamente, si damos clic en cualquier de ellos nos seleccionarán el elemento de nuestro formulario al que lo hemos vinculado. Hemos realizado un gran trabajo con este formulario. Ahora antes de terminar con este tema regresemos a nuestro editor.
Hasta ahora hemos colocado el mismo valor para el atributo name, ID y for, los hemos colocado así para tener un código más ordenado, pero el atributo name no necesita ser el mismo que for, los que se vinculan son ID y for, podemos colocar un valor en name completamente diferente y aun así funcionará. Ya que lo importante es que ID y for sean iguales. Con este video hemos cubierto los formularios en HTML y también terminamos el curso de HTML desde cero por lievanosan.com
Te felicito por llegar hasta aquí y terminar el curso, ahora tienes todos los conocimientos que necesitas para dar el siguiente paso en tu caminos hacia ser un desarrollador o diseñador web. El siguiente paso es aprender CSS, puedes también aprender Javascript, pero te recomiendo que el siguiente curso que tomes sea el de CSS, con el que podrás darle estilo a tu web.
Mi nombre es José Lievano, espero que hayas disfrutado este curso tanto como yo. Si tienes un proyecto web en mente y deseas verlo online lo antes posible, entonces te invito a que des un vistazo a nuestros planes Hosting, donde podrás alojar tu sitio web, en nuestros súper rápidos y seguros servidores. Pasa un feliz día y nos veremos en un próximo video tutorial.

7 Comments on “Etiqueta Label”

  1. Sandokan77

    Excelente, vídeo tutorial, estoy muy agradecido a livanosan, por haberme abierto las puertas al diseño de paginas web en Html. Quisiera saber cuando colocarán, el tutorial de Css y Jvs?

  2. Kamdroide

    Gracias Jose Lievano. Me ha sido muy útil tu curso de HTML. Lo logre hacer todo de corrido en unas 8 horas haciendo todas las práctica en notepad++.
    También estoy haciendo el de WooCommerce.
    Muy didáctico y llevadero. Tengo en mente hacer pronto el de CSS.
    Soy diseñador gráfico, trabajo generalmente en WordPress y Joomla.
    Te felicito por tus conocimientos y tu generosidad al darnos estos cursos gratuitamente.
    Te saludo y te deseo el mejor de los éxitos.

    Kam

    1. Lievanosan

      Muchas gracias por su mensaje, nos llena de alegría saber que nuestros videos son de ayuda, muchas gracias nuevamente por formar parte de nuestra comunidad de estudiantes 😀

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

¿Quieres aprender a crear sitios web?

Regístrate gratis como estudiante y aprende a crear sitios web sorprendentes. Gana certificados y medallas al completar los cursos gratuitos.
¡REGÍSTRATE GRATIS!
close-link
Crea tu sitio web con diseño profesional en menos de 15 minutos
Ver Tutorial
close-image