InputLabel: Etiqueta dentro del los inputs (cajas de texto)

La etiqueta HTML: label, es un acompañante de los controles del formulario. Mediante InputLabel, un plugin de jQuery, se muestra el contenido de la etiqueta label dentro del la caja de texto ó control de formulario input, dando un aspecto más atractivo a nuestros formularios.

Un ejemplo de código, tradicional con label:

<label for="myInput">Nombre de la persona</label>
<input id="myInput" type="text" name="myInput"/>

Resultado:

Haciendo uso del plugin InputLabel, el resultado:

Ahora que sabemos que es lo queremos decir, veamos cómo usar este plugin. Descargar el plugin (obviamente debemos tener la líbreria jQuery también).

Luego de incluir la referencia, debemos especificar a que controles afectaremos con el plugin.

<script type="text/javascript" src="../js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="../js/jquery.inputlabel.js"></script>
<script type="text/javascript">
$(function () {
        //por defecto
	$("#myInput").inputLabel();

        //agregar texto por defecto
	$("#myInput").inputLabel("Custom label text");

        //tomar texto de otra etiqueta
	$("#myInput").inputLabel($("#header h1"));

        //dar formato al texto
	$("#myInput").inputLabel(false,{keep:false});
	$("#myInput").inputLabel(false,{color:"#F00"});
	$("#myInput").inputLabel(false,{force:true});
        
        //aplicar efecto a más de un input
        $("#myInput1",#myInput2").inputLabel(false,{force:true});
});
</script>

En la parte del body:

<form>
<label for="myInput">Enter a value</label> 
<input type="text" name="myInput" id="myInput" />
</form>

Más detalles …