Foros del Web » Creando para Internet » HTML »

Duda con campo input de formulario

Estas en el tema de Duda con campo input de formulario en el foro de HTML en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 18/01/2012, 12:10
 
Fecha de Ingreso: enero-2012
Ubicación: Talavera de la Reina
Mensajes: 5
Antigüedad: 7 años, 7 meses
Puntos: 1
Pregunta Duda con campo input de formulario

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!
  #2 (permalink)  
Antiguo 18/01/2012, 12:28
Avatar de pitufoweb  
Fecha de Ingreso: enero-2008
Ubicación: Un Mundo Raro
Mensajes: 1.148
Antigüedad: 11 años, 7 meses
Puntos: 181
Respuesta: Duda con campo input de formulario

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
__________________
------------- " La felicidad no llega de afuera, nace desde dentro. " -------------
  #3 (permalink)  
Antiguo 18/01/2012, 12:32
 
Fecha de Ingreso: enero-2012
Ubicación: Talavera de la Reina
Mensajes: 5
Antigüedad: 7 años, 7 meses
Puntos: 1
Respuesta: Duda con campo input de formulario

Cita:
Iniciado por pitufoweb Ver Mensaje
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
  #4 (permalink)  
Antiguo 20/01/2012, 08:37
 
Fecha de Ingreso: junio-2009
Mensajes: 3
Antigüedad: 10 años, 2 meses
Puntos: 0
Respuesta: Duda con campo input de formulario

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..

Última edición por computer_programme; 20/01/2012 a las 08:43
  #5 (permalink)  
Antiguo 20/01/2012, 11:19
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 12 años, 2 meses
Puntos: 1567
Respuesta: Duda con campo input de formulario

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
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <title>titulo</title>
  5. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  6. <style type="text/css">
  7. /*<![CDATA[*/
  8. .texto{
  9. color: #666;
  10. }
  11. /*]]>*/
  12.  
  13. <script type="text/javascript">
  14. //<![CDATA[
  15. function color(campo,texto){
  16. var elcampo = document.getElementById(campo).value;
  17. if(elcampo == texto)    {
  18. document.getElementById(campo).style.color="#666";
  19. }
  20. }
  21.  
  22. function Validar(){
  23. var elusuario = document.getElementById('nombre_ingreso').value;
  24. if(elusuario == "usuario"){
  25. alert('nombre de usuario incorrecto');
  26. return false;
  27. }
  28. }
  29.  
  30. //]]>
  31. </head>
  32. <div>
  33. <p>Solo javascript sin lbrerias</p>
  34. <form action="x.php" method="post" onsubmit="return Validar();">
  35. <input type="text" class="texto" name="nombre_ingreso" value="usuario" id="nombre_ingreso"
  36. onclick="this.value='';this.style.color='#000';" onfocus="this.select()" onblur="this.value=!this.value?'usuario':this.value; color(this.id,'usuario');" />
  37. <input type="text" class="texto" name="clave_ingreso" value="contraseña" id="clave_ingreso"
  38. onclick="this.value='';this.style.color='#000';" onfocus="this.select()" onblur="this.value=!this.value?'contraseña':this.value; color(this.id,'contraseña');" />
  39. <input type="submit" value="Ingresar" />
  40. </form>
  41. </div>
  42. </body>
  43. </html>

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #6 (permalink)  
Antiguo 24/01/2012, 12:17
 
Fecha de Ingreso: junio-2009
Mensajes: 3
Antigüedad: 10 años, 2 meses
Puntos: 0
Respuesta: Duda con campo input de formulario

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

Última edición por computer_programme; 24/01/2012 a las 12:21 Razón: aniadiendo texto

Etiquetas: formulario, input, campos
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 23:17.