Duda con campo input de formulario

alexwel88 · #1 (**permalink**) 18/01/2012, 13:10

Buenas tardes, soy nuevo en el foro y mi primer mensaje es para solicitar ayuda (lo sé, no tengo verguenza xD).

El caso es que estoy haciendo un proyecto para un CFGS, en la página web habrá un formulario para logarse mediante 2 input (usuario y password).

Me gustaría saber como puedo programar el formulario para que dentro del campo usuario (dentro del input type="text" name="usuario"...) esté escrita la palabra "Usuario" para que la gente sepa que en ese campo a de poner su usuario y con el password igual. No me sirve la opción value="Usuario" porque no quiero que sea un valor real, si no que cuando el usuario pinche encima del campo la palabra "Usuario" que había dentro desaparezca y puedan escribir correctamente su usuario.
No se si me he explicado, espero que si...

Un claro ejemplo de lo que necesito es el login de [URL="http://www.tuenti.com"]http://www.tuenti.com[/URL] , ¿podéis ayudarme?

Gracias de antemano, un saludo!

pitufoweb · #2 (**permalink**) 18/01/2012, 13:28

Generalmente eso se hace con el atributo "value" y después con javascript quitas el texto al momento que pinches sobre campo de texto.

También podrías hacerlo con una imagen de fondo y las Pseudo-classes de CSS; :hover, :focus, y :active.

La pagina que mencionas usa el elemento "label" y con CSS lo posiciona encima del campo de texto. Después utiliza javascript para esconderlo al momento de escribir.

Saludos

alexwel88 · #3 (**permalink**) 18/01/2012, 13:32

Cita:

Iniciado por pitufoweb

Generalmente eso se hace con el atributo "value" y después con javascript quitas el texto al momento que pinches sobre campo de texto.

También podrías hacerlo con una imagen de fondo y las Pseudo-classes de CSS; :hover, :focus, y :active.

La pagina que mencionas usa el elemento "label" y con CSS lo posiciona encima del campo de texto. Después utiliza javascript para esconderlo al momento de escribir.

Saludos

Muchas gracias, me liaré con ello

computer_programme · #4 (**permalink**) 20/01/2012, 09:37

aqui tienes un demo de lo q estas buscando ...
en el link :
http://foro.ucoz.es/forum/5-268-6

en HTML

<form>
<input type="text" value="Buscar..." onfocus="if (this.value == 'Buscar...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Buscar...';}" />
<input type="button" value="Ir" />
</form>

en CSS .- lo pudes descargar del mismo link

Ver el ejemplo de caja de búsqueda en CSS3
http://cssblog.es/ejemplos/caja-busqueda-css3.html

saludos..

emprear · #5 (**permalink**) 20/01/2012, 12:19

Tenes varias formas de hacerlo, el problema es la compatibilidad.
html5 incorpora el atributo placeholder para la función que querés, pero IE no lo soporta, sin embargo hay un plugin de jquery (en realidad hay varios), para darle más funcionalidad a los forms y sus nuevos atributos en IE (formalize me, es uno de ellos http://formalize.me/jquery_demo.html ) Sin embargo, aunque el value de tu campo esté vació, van a tomar eñl valor de placeholder como tal

La otra es hacerlo solo con javascript y css sin librerias. Por lo que deberías validar que usuario no sea "usuario" (como seguramente tenes un form para registrarse, en este deberías eliminar a usuario como un nombre válido)

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
.texto{
color: #666;
}
/*]]>*/
</style>
 
<script type="text/javascript">
//<![CDATA[
function color(campo,texto){
var elcampo = document.getElementById(campo).value;
if(elcampo == texto)    {
document.getElementById(campo).style.color="#666";
}
}
 
function Validar(){
var elusuario = document.getElementById('nombre_ingreso').value;
if(elusuario == "usuario"){
alert('nombre de usuario incorrecto');
return false;
}
}
 
//]]>
</script>
</head>
<body>
<div>
<p>Solo javascript sin lbrerias</p>
<form action="x.php" method="post" onsubmit="return Validar();">
<input type="text" class="texto" name="nombre_ingreso" value="usuario" id="nombre_ingreso"
onclick="this.value='';this.style.color='#000';" onfocus="this.select()" onblur="this.value=!this.value?'usuario':this.value; color(this.id,'usuario');" />
<input type="text" class="texto" name="clave_ingreso" value="contraseña" id="clave_ingreso"
onclick="this.value='';this.style.color='#000';" onfocus="this.select()" onblur="this.value=!this.value?'contraseña':this.value; color(this.id,'contraseña');" />
<input type="submit" value="Ingresar" />
</form>
</div>
</body>
</html>

Saludos

computer_programme · #6 (**permalink**) 24/01/2012, 13:17

otra alternativa...
--------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es_ES" xmlns:fw="http://www.tuenti.com/fw" lang="es_ES">
<head><title>final</title>
<style type='text/css'>
ul{list-style:none;}
input{border:0;font-size:14px;color:blue;padding:7px 6px;width:148px;margin:0 0 5px 0;background:#FFF;}
li{margin:0 5px 0 0;width:160px;float:left}

li{position:relative}
.inputLabel{font-size:13px;line-height:16px;font-weight:normal;-moz-text-shadow:none;-webkit-text-shadow:none;text-shadow:none;color:#666;cursor:text;position:absolu te;left:8px;top:10px}
span.inputDecorar input{font-size:13px;border:solid 1px #43698f;border-top-color:#274b5a;-webkit-box-shadow:0 1px 0 0 rgba(255,255,255,0.2),0 6px 5px -5px rgba(0,0,0,0.5) inset;box-shadow:0 1px 0 0 rgba(255,255,255,0.2),0 6px 5px -5px rgba(0,0,0,0.5) inset;-moz-box-shadow:0 1px 0 0 rgba(255,255,255,0.2),0 6px 3px -5px rgba(0,0,0,0.5) inset;background:#fff;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:5px;width:144px;height:18px}
span.inputDecorar.focus input{
-webkit-box-shadow:0 1px 0 0 rgba(255,255,255,0.2),0 6px 5px -5px rgba(0,255,0,0.5) inset,0 0 15px -3px rgba(0,58,150,0.9);
box-shadow:0 1px 0 0 rgba(255,255,255,0.2),0 6px 5px -5px rgba(0,255,0,0.5) inset,0 0 15px -3px rgba(0,58,150,0.9);
-moz-box-shadow:0 1px 0 0 rgba(255,255,255,0.2),0 6px 3px -5px rgba(0,255,0,0.5) inset,0 0 15px -3px rgba(0,58,150,0.9)}

.focus .inputLabel{color:#000;opacity:.3;filter:alpha(opa city=30);}
.filled .inputLabel{display:none}
</style>

<script type="text/javascript" charset="utf-8">
function verificar(el) {
if (typeof el == 'string')
return document.getElementById(el);
return el;
}
function inlineLabelHandler(dom, domRelated){
var autofillIntervalPeriod = 200;
var changeInterval = null;
dom.onkeyup = function() {
var isFilled = this.value.length > 0;
var isFilledIndicated = this.parentNode.className.indexOf(' filled') >= 0;
if (typeof domRelated !== 'undefined'){
domRelated.onkeyup();
}
if (isFilled === isFilledIndicated) {return;}
if (isFilled && !isFilledIndicated) {this.parentNode.className += ' filled';}
else {this.parentNode.className = this.parentNode.className.replace(' filled', '');}
};
dom.onfocus = function(dom){
this.parentNode.className += ' focus';
this.onkeyup();
if (changeInterval !== null) {clearInterval(changeInterval);}
var self = this;
changeInterval = setInterval(function(){
self.onkeyup();delete self;
},
autofillIntervalPeriod);
};
dom.onblur = function() {
this.parentNode.className = this.parentNode.className.replace(' focus', '');
this.onkeyup();
if (changeInterval !== null) {
clearInterval(changeInterval);
changeInterval = null;
}
};
dom.onkeyup();
}
window.onload = function() {
var password = verificar('input_password');
if (password){
inlineLabelHandler(password);
var email = verificar('email');
if (email){
inlineLabelHandler(email, password);
if (verificar('container_login_tu') === null) {
verificar('email').focus();
}
}
}
}
</script>
</head>
<body>
<ul>
<li>
<span class="inputDecorar">
<label class="inputLabel" for="email">Email</label>
<input id="email" name="email" type="text">
</span>
</li>
<li>
<span class="inputDecorar">
<label class="inputLabel" for="input_password">Contrasenia</label>
<input id="input_password" name="input_password" value="" type="password">
</span>
</li>
</ul>
</body>
</html>
--------------------------------------
los colores ya es a gusto de los usuarios jejeej saludos :D