el blog del isra

Pensemos en una aplicación Web cualquiera que tengamos que desarrollar. Un formulario básico, como una forma de contacto dentro del sitio Web de una empresa, por ejemplo.

Lo esencial en nuestro formulario serían campos de texto para el nombre del usuario, correo, algunos datos personales, y el campo de texto con el mensaje que envía, ya sea una solicitud, una sugerencia, una queja, una mentada, etc., un botón para enviar el formulario, y también usaremos un espacio para que el sistema nos avise si nuestro formulario se envió o si hubo un error.

Lo que normalmente haríamos en .NET es crear los elementos TextBox, Button y seguramente, un Label para mostrar un aviso de "Su mensaje ha sido enviado" o "No se pudo enviar su mensaje".

<p>Nombre: <asp:TextBox ID="txtNombre" runat="server" /></p>
<p>Correo: <asp:TextBox ID="txtCorreo" runat="server" /></p>
<p>Mensaje: <asp:TextBox ID="txtMensaje" runat="server" TextMode="MultiLine" /></p>
<p><asp:Button ID="btnEnviar" runat="server" Text="Enviar" /></p>
<p><asp:Label ID="lblAviso" runat="server" /></p>

El error aquí es la forma en que utilizamos el control Label.

Recordemos que cada WebControl de .NET genera código HTML que crea un elemento equivalente en este lenguaje. El resultado del ejemplo anterior sería éste:

<p>Nombre: <input type="text" id="txtNombre" /></p>
<p>Correo: <input type="text" id="txtCorreo" /></p>
<p>Mensaje: <textarea id="txtMensaje" /></p>
<p><input type="submit" id="btnEnviar" value="Enviar" /></p>
<p><label id="lblAviso" /></p>

Como podemos ver, existe un elemento llamado label en HTML. Según la Recomendación de la W3C, label debe utilizarse para asignar una etiqueta a un control, como un cuadro de texto, un checkbox, etc.

<p><label for="txtNombre">Nombre:</label> <input type="text" id="txtNombre" /></p>

Por lo tanto, las etiquetas de los cuadros de texto de nuestro ejemplo deben ir dentro de controles Label.

<p><asp:Label ID="lblNombre" runat="server" AssociatedControlID="txtNombre">Nombre:</asp:Label>
    <asp:TextBox ID="txtNombre" runat="server" /></p>
<p><asp:Label runat="server" AssociatedControlID="txtCorreo" Text="Correo:" />
    <asp:TextBox ID="txtCorreo" runat="server" /></p>
<p><asp:Label runat="server" AssociatedControlID="txtMensaje" Text="Mensaje:" />
    <asp:TextBox ID="txtMensaje" runat="server" TextMode="MultiLine" /></p>

Label, al igual que otros controles como Panel o Table, no requiere un ID. Se puede establecer, pero no es necesario si el control no será manipulado por código de cliente (javascript) o de servidor (C# o VB.NET). También, como en el ejemplo, el texto que contiene puede ir dentro de las etiquetas de apertura y cierre, o en la propiedad Text. AssociatedControlID en <asp:Label> es lo mismo que for en <label>

Otra propiedad interesante del elemento label de HTML (y también del control Label de .NET) es la de accesskey (AccessKey para .NET), que establece una tecla de acceso directo al control.

<p>
    <asp:Label runat="server" AssociatedControlID="txtNombre"
        Text="Nombre:" AccessKey="N" />
    <asp:TextBox ID="txtNombre" runat="server" /></p>
<p>
    <asp:Label runat="server" AssociatedControlID="txtCorreo"
        Text="Correo:" AccessKey="C" />
    <asp:TextBox ID="txtCorreo" runat="server" /></p>
<p>
    <asp:Label runat="server" AssociatedControlID="txtMensaje"
        Text="Mensaje:" AccessKey="M" />
    <asp:TextBox ID="txtMensaje" runat="server" TextMode="MultiLine" /></p>

Al presionar cierta combinación de teclas especiales (la cual difiere dependiendo del navegador) más la tecla de indicada en accesskey, el cursor se posicionará sobre el control al que se asocia la etiqueta. Cada navegador utiliza teclas diferentes para combinar con la accesskey, y por lo mismo, es algo difícil utilizar esta propiedad. Mi favorito (obviamente) es Opera, pues con Shift+Esc nos muestra la lista de accesskeys en la página, y podemos elegir el que queramos. Puede haber problemas con ciertos navegadores como Internet Explorer o Safari, pues la tecla que utilicemos puede ser un acceso a una opción del navegador al presionarla con Alt o Ctrl. A final de cuentas, mi recomendación sería evitar esta propiedad, o ser extremadamente cuidadosos al usarla.

Bien, resolvimos el asunto de la estiquetas de los controles en nuestro ejemplo. Ahora, tenemos un control al final que nos muestra un mensaje de éxito o fracaso al enviar el formulario, y estamos usando otro control Label. Eso está mal.

Lo que necesitamos es simplemente mostrar un texto. Sólo hay que definir un espacio para que nuestro código de servidor introduzca dicho texto.

Ya que no requerimos una etiqueta en especial, usamos el control Literal de .NET.

<p><asp:Button ID="btnEnviar" runat="server" Text="Enviar" /></p>
<p><asp:Literal ID="litAviso" runat="server" /></p>

<asp:Literal> es un control con la simple y sencilla función de mostrar texto, o código HTML. Desde el servidor, podemos asignar el valor a este control.

protected function EnviarFormulario()
{
    try
    {
        Enviar();
        litAviso.Text = "Su mensaje ha sido enviado con éxito.";
    }
    catch
    {
        litAviso.Text = "No se pudo enviar su mensaje.";
    }
}

Al generarse la página, en el lugar donde está el control se mostrará únicamente su contenido:

<p><input type="submit" id="btnEnviar" value="Enviar" /></p>
<p>Su mensaje ha sido enviado con éxito</p>

Creo que el error de usar Label para cualquier clase de texto dinámico proviene de la programación de sistemas de escritorio, donde también existe el control Label, y es precisamente para eso. Pero en desarrollo Web, la cosa cambia. Repito: esto es cosa de estándares. Son libres de usar los controles como les plazca, pero para quienes les preocupa lo "bien hecho", aquí estoy aportando una pequeña parte.

EDITO: Haciendo una prueba, encontré que el control Label de .NET actúa de forma "inteligente". Si se usa el atributo AssociatedControlID genera un elemento <label>, como mencioné en el artículo, y si no se indica ese atributo, se genera un elemento <span>. La diferencia con Literal sería entonces, que éste último no genera un elemento HTML, sino solamente el código introducido como texto en él. Gracias, Osvier, por los comentarios