Atributo ‘for’ de las etiquetas ‘label’ en HTML

Una de las dudas que por mucho tiempo he tenido y que solo hasta ahora me dediqué a investigar para resolverla se trata de ¿para qué sirve el atributo ‘for’ de la etiqueta ‘label’ en el HTML?.

En varias páginas que revisé indicaban que este atributo se utiliza para asociar el ‘label’ con un componente en particular.

Ajá, ¿y qué diablos significa ‘asociar’?. O mejor dicho ¿qué efecto tiene eso en una página?.

No me quedaba del todo claro hasta que leí en una página que, este atributo es especialmente útil cuando el componente es escrito ‘afuera’ del ‘label’.

Pero, en primer lugar, ¿a quién diablos se le ocurriría escribir un componente ‘adentro’ de una etiqueta?.

Es decir, si quiero que en una página se muestre algo como esto:

217

Se escribiría un código como el siguiente:

       
        <label id="primera">
            Primera opci&oacute;n 
            &nbsp;&nbsp;&nbsp;
        </label>
        <input id="pOpcion" type="checkbox" checked="false"/>
        <br/> 
        <label id="segunda">
            Segunda opci&oacute;n
            &nbsp;&nbsp;&nbsp;
        </label>
        <input id="sOpcion" type="checkbox"  checked="false"/>
        <br/>        
        <label id="tercera">
            Tercera Opci&oacute;n
            &nbsp;&nbsp;&nbsp;
        </label>
        <input id="tOpcion" type="checkbox" checked="false"/>
        <br/>

Los &nbsp; son para hacer un poco más de espacio entre las etiquetas y los checkbox.

Bueno, esto parece correcto ¿o no?. En la imagen se muestra una etiqueta y después de ella está las casilla de verificación.

Ok. Si así se está observando bien, ¿porqué habría de colocarse la casilla de verificación dentro de la etiqueta? eso no “suena” correcto.

La verdad es que colocar el componente de la casilla de verificación dentro de la etiqueta SÍ tiene sentido. Al hacerlo de esta manera, en la página mostrada en el navegador, al hacer clic con el ratón en la etiqueta se está haciendo clic en la casilla con lo cual se selecciona o des-selecciona.

De esta manera, al cambiar el código a lo siguiente:

        <label id="primera">
            Primera opci&oacute;n 
            &nbsp;&nbsp;&nbsp;
            <input id="pOpcion" type="checkbox" checked="false"/>
        </label>        
        <br/> 
        <label id="segunda">
            Segunda opci&oacute;n
            &nbsp;&nbsp;&nbsp;
            <input id="sOpcion" type="checkbox"  checked="false"/>
        </label>        
        <br/>        
        <label id="tercera">
            Tercera Opci&oacute;n
            &nbsp;&nbsp;&nbsp;
            <input id="tOpcion" type="checkbox" checked="false"/>
        </label>

Tendremos el comportamiento de que la etiqueta se convierte en una extensión del componente que la incluye, al dar clic en ella se selecciona/deselecciona la casilla de verificación, o se adquiere el foco en el caso de los cuadros de texto de entrada.

218

¿Y esto qué tiene que ver con el atributo ‘for’?

No siempre se podrán tener las etiquetas y los componentes “juntos”, como para que se pueda colocar el componente “adentro” de la etiqueta. Un ejemplo sería como cuando se tienen las etiquetas en una celda, y las casillas de verificación en otra celda diferente de una tabla.

219

En este caso, el código quedaría de la siguiente forma:

        
        <table border="1">
            <tr>
                <td>
                    <label id="primera">
                        Primera opci&oacute;n 
                    </label>        
                    <br/> 
                    <label id="segunda">
                        Segunda opci&oacute;n       
                    </label>        
                    <br/>        
                    <label id="tercera">
                        Tercera Opci&oacute;n       
                    </label>
                </td>
                <td>
                    <input id="pOpcion" type="checkbox" checked="false"/><br/>
                    <input id="sOpcion" type="checkbox"  checked="false"/><br/>
                    <input id="tOpcion" type="checkbox" checked="false"/>
                </td>
            </tr>
        </table>

Al hacerlo de esta manera, ya no se tiene ‘asociada’ la etiqueta con su casilla respectiva. Es aquí donde se usa el atributo ‘for’.

El atributo ‘for’ nos va a permitir asociar una etiqueta con un componente a partir del id del componente, aún y cuando la etiqueta no ‘envuelva’ al componente.

Para ello se asigna al atributo ‘for’ el id del componente al que está asociado, y tan solo con ello se recupera el comportamiento original.

                <td>
                    <label id="primera" for ="pOpcion">
                        Primera opci&oacute;n 
                    </label>        
                    <br/> 
                    <label id="segunda" for="sOpcion">
                        Segunda opci&oacute;n       
                    </label>        
                    <br/>        
                    <label id="tercera" for="tOpcion">
                        Tercera Opci&oacute;n       
                    </label>
                </td>
                <td>
                    <input id="pOpcion" type="checkbox" checked="false"/><br/>
                    <input id="sOpcion" type="checkbox"  checked="false"/><br/>
                    <input id="tOpcion" type="checkbox" checked="false"/>
                </td>

 

 

 

 

 

La importancia de respaldar

El día de hoy, al llegar al trabajo, me topé con la noticia de que la laptop que uso había sido dañada debido a las lluvias.

Por una fatídica coincidencia, dejé la laptop justamente debajo de donde se creó una gotera, la cual durante toda la noche empapó el equipo y al final la dañó (al menos eso parece).

De no ser que acostumbro guardar en un disco duro portátil una copia de los documentos con los que trabajo, y de esa forma poder trabajar en casa, en estos momentos me encontraría muy preocupado.

Probablemente haya perdido documentos que no volveré a recuperar. Probablemente tarde varios días en volver a instalar todo el ambiente en la nueva computadora (cuando me la den, y si es que me la dan). Pero al final de cuentas no está todo perdido.

Es por ello que considero importante no esperar a sufrir una catástrofe para considerar realizar un respaldo ya que generalmente en ese momento ya es tarde. Es conveniente realizar un respaldo de los documentos con los que actualmente se trabaja, y en su caso hacer uso de servicios como el de DropBox (o alguno similar) para poder acceder a muchos de esos documentos desde cualquier lugar.

Con el paso de los días o semanas iré viendo si en verdad perdí información importante (según lo vaya recordando), o si solamente ésto se convierte en una anédota más.

Lap dañada
Lap dañada

Iniciando nuevamente

Después de un tiempo, he vuelto a iniciar este sitio.

La versión anterior la tuve que eliminar dado que Google creyó que mi sitio había sido intervenido por terceros.

Seguí las indicaciones que Google ofrece para revisar mi sitio y nunca encontró nada. De todas formas opté por borrar todos los archivos y dejar pasar un tiempo para volver a empezar.

Procuraré poner un poco más de atención y dedicar más tiempo a este sitio, así que si tienes tiempo y ganas de perderlo.. visítame cuando gustes.