Acabo de publicar Regala Google Chrome por navidad |

Textarea o "Caja de texto"

By Miguel Ángel Jiménez Achinte On 6:13

El tag <textarea> es muy util para publicar texto o codigo, sin que los nagvegadores lo interpreten o para poner un texto demasiado largo.Para poner un texto dentro de un textarea, debes abrir el tag <textarea> y cuando hallas escrito tu texto, debes cerrarlo </textarea> .

Por ejemplo, supongamos que tengo un texto y quiero ponerlo dentro de una caja de texto. lo que tengo que hacer es abrir el tag, pegar el texto y cerrar.
si lo hacemos correctamente quedaria algo como esto:



pues bien, dado que es un texto no tan corto el textarea se ve, esteticamente, mal. Para eso vamos arecurrir a las propiedades "rows" y "cols" , con eso podrás controlar ancho y alto.

por ejemplo, en el textarea anterior simplemente escribimos <textarea> ahora vamos a agregar lo sigueinte:

<textarea rows"10" cols"30">

y el resultado seria este



Es muy comun que los <textarea> se usen para poner links, y codigos para redes sociales, asi que es muy practico que cuando el texto sea un poco largo se auto seleccione y no halla necesidad de bajar todo el scroll con el mouse. Para esto hay que agregar unas nuevas lineas en el tag:

<textarea rows="2" cols="25" onMouseOver="this.focus()"onFocus="this.select()" input type="text" name="emailaddr" value="your e-mail" size="31" onMouseOver="this.focus()" onFocus="this.select()"> </textarea>

identifiquemos el nuevo contenido:

onMouseOver="this.focus()"onFocus="this.select()" input type="text" name="emailaddr" value="your e-mail" size="31" onMouseOver="this.focus()" onFocus="this.select()"

y este seria el resultado:




Hasta ahora hemos aprendido lo basico en un textarea (o "caja de texto") pero tambien es importante la apariencia. Esta se la podemos otorgar por medio de codigoo css, por ejemplo: cambiar el color del scroll (barra que se desplaza), el fondo, y muchos mas tags propios del css.

aunque en esta entrada no profundizaremos en codigo css, si voy a proporcionar algunos ejemplos simples de modificar segun tu pagina web y tu gusto:





Ver codigo css:
EXPANDIRCONTRAER



textarea.ejemplo-1 {
scrollbar-face-color:#000000;
scrollbar-highlight-color:yellow;
scrollbar-3dlight-color:orange;
scrollbar-darkshadow-color:darkblue;
scrollbar-shadow-color:gray;
scrollbar-arrow-color:#cccccc;
scrollbar-track-color:#ffffff;
border-bottom:2px dashed #FFFFFF; padding:5px; border:none;
}
textarea.ejemplo-1 {
background: #2E3335 url();
color: #ffffff;
border:5px solid #A4A4A4;
}




Ver codigo css:
EXPANDIRCONTRAER



textarea.ejemplo-2 {
scrollbar-face-color:#000000;
scrollbar-highlight-color:#000000;
scrollbar-3dlight-color:orange;
scrollbar-darkshadow-color:#cccccc;
scrollbar-shadow-color:#ffffff;
scrollbar-arrow-color:#cccccc;
scrollbar-track-color:#ffffff;
border-bottom:2px dashed #FFFFFF; padding:5px; border:none;
}
textarea.ejemplo-2 {
background: #2E3335 url(http://static-p4.fotolia.com/jpg/00/06/18/33/400_F_6183355_dgEJR3dYA3EVVl2bJrAxB4N2yJWTiIsB.jpg);
color: #ffffff;
border:5px solid #A4A4A4;
}





Ver codigo css:

EXPANDIRCONTRAER



textarea.imagenInicio{
SCROLLBAR-FACE-COLOR: #000000;
SCROLLBAR-HIGHLIGHT-COLOR: #000000;
SCROLLBAR-SHADOW-COLOR: #000000;
SCROLLBAR-3DLIGHT-COLOR: #000000;
SCROLLBAR-ARROW-COLOR: #ffffff;
SCROLLBAR-TRACK-COLOR: #000000;
SCROLLBAR-DARKSHADOW-COLOR: #000000;
border-bottom:2px dashed #FFFFFF; padding:5px; border:none;
}
textarea.imagenFoco {
SCROLLBAR-FACE-COLOR: #000000;
SCROLLBAR-HIGHLIGHT-COLOR: #000000;
SCROLLBAR-SHADOW-COLOR: #000000;
SCROLLBAR-3DLIGHT-COLOR: #000000;
SCROLLBAR-ARROW-COLOR: #ffffff;
SCROLLBAR-TRACK-COLOR: #000000;
SCROLLBAR-DARKSHADOW-COLOR: #000000;
border-bottom:2px dashed #FFFFFF; padding:5px; border:none;
}
textarea.imagenInicio {
background: #2E3335 url();
color: #ffffff;
border:5px solid #A4A4A4;
}
textarea.imagenFoco {
background-image: url(http://css-tricks.com/wp-content/csstricks-uploads/transpBlack90.png);
color: #ffffff;
border:5px solid #2E2E2E;
}


NOTA: Para poder enlazar el codigo css con el textarea en nesesario agregar: "class="ejemplo-1" (en este caso) al tag <textarea>

Recomendacion: Para facilitar el trabajo de editar el codigo del scroll visita

http://www.maketemplate.com/scrollbar/

y para editar los colores del fondo visita http://html-color-codes.info/





3 comentarios

  1. En cuanto al formato de los scrollbars, noté que sólo funciona para explorer desde el 5.5 hacia arriba, pero no funciona cuando uno intenta ver la misma página en Mozilla. ¿Alguna idea de como hacer que funcione para el último?

    Posted on 9/10/2009 11:25 p. m.

     
  2. top [url=http://www.c-online-casino.co.uk/]casino[/url] check the latest [url=http://www.realcazinoz.com/]online casino[/url] manumitted no store perk at the best [url=http://www.baywatchcasino.com/]casino gratuity
    [/url].

    Posted on 1/19/2013 5:41 a. m.

     

Publicar un comentario en la entrada al viejo estilo