miércoles, 18 de agosto de 2010

text area

El tag <textarea> es muy útil para publicar código en una entrada evitando que los navegadores lo interpreten o para poner un texto largo sin que ocupe demasiado espacio. Presento este tutorial para Junior que pregunto como se hace, así que lo explico por si le es útil a alguien más.

Si colocas el código o texto que quieras mostrar entre <textarea> y </textarea>, obtendrás este resultado:

<textarea>
AQUI VA EL CODIGO;DIGO O TEXTO QUE DESEAS MOSTRAR DENTRO DE TU CAJA DE TEXTO O TEXTAREA.
</textarea>
es asi como se veria:



Si además añades a continuación de <textarea, las propiedades "rows" y "cols" podrás controlar el alto y ancho de tu textarea cambiando estos valores. El código sería algo como esto:

<textarea rows="2" cols="14">
AQUI VA EL CODIGO;DIGO O TEXTO QUE DESEAS MOSTRAR DENTRO DE TU CAJA DE TEXTO O TEXTAREA.
</textarea>


espero que te sirva ^^!!

20 comentarios:

  1. este post(pero mejorado) lo hizo hikari en su blog...se nota q eres muy inteligente y creativa no tienes necesidad de copiar lo q publican otros en sus blogs

    ResponderEliminar
  2. Muchas gracias :3 ! Yo me preguntaba esto y viendo tu blog encontre la respuesta :3
    Arigatou~ :3

    ResponderEliminar
  3. jopee >3< por mucho que lo intento no me sale >3< quiero colocar un codigo de un cursor en mi blog en la cajita y no m sale T.T

    ResponderEliminar
    Respuestas
    1. el problema tuyo es que al poner el codigo solo pones publicar entrada. eso es un error debes poner Opciones de entrada y luego Interpretar HTML escrito. Intentalo.

      Eliminar
  4. hola eru es muy facil amiga mira solo copia este codigo

    <textarea rows="2" cols="14">
    AQUI VA EL CODIGO;DIGO O TEXTO QUE DESEAS MOSTRAR DENTRO DE TU CAJA DE TEXTO O TEXTAREA.
    </textarea>

    y donde dice AQUI VA EL CODIGO O TEXTO debes de pegar el codigo que tu quieres que se mire !! no se si me hice entender !! si sigues con problemas te seguire ayudando oki !!

    saludos

    ResponderEliminar
    Respuestas
    1. El comentario no se referia a eso,pero esa respuesta es muuy util.

      Eliminar
  5. muchas gracias *O* lo intentare
    eres super maja y atenta ;3 puede que sea un poco descarado -.- pero te importaria afiliarte a mi blog?? esque es nuevo y bueno...

    ResponderEliminar
  6. no quiero ser pesada pero... sigue sin irme lo de textarea ._.

    ResponderEliminar
  7. lo hago pero no me aparece ninguna cajita T-T que debo hacer!! ANNYZ AYUDAME PLZ!! TTTTTTTTT-TTTTTTTTT

    ResponderEliminar
  8. amm chicas voy a estar en msn si gustan entrar ahi les explico mejor n.n

    ResponderEliminar
  9. Hola Annyz! Muchas gracias por este codigo llevo tiempo buscandolo =)
    ¿Se podria hacer lo mismo pero en vez de poner texto una imagen? he probado y solo sale el cosigo de la imagen u.u

    Besos!!

    ResponderEliminar
  10. hola airlun

    si mira para poner una imagen dentro del textarea este es el codigo (ojala salga bien aqui en comentarios)

    <span id="fullpost"><div align="center"><pre style="overflow: auto; width: 410px; height: 160px;"><div align="left"><span >
    <img src="URL DE LA IMAGEN"/>AQUI EL TEXTO O POST
    </span></div></pre></div>

    sino quieres poner texto o post solo borra donde dice AQUI EL TEXTO O POST y listo !!

    si quieres ponerle mas de una imagen solo pega el siguiente codigo delante del codigo que esta igual que ese ^^
    <img src="URL DE LA IMAGEN"/>

    saludos

    ResponderEliminar
  11. Waaaa Annyz! Me encaaaaaanta tu blog! Todos tus tutoriales me sirven (L) Te pasas por mi blog? elcofredemia.blogspot.com

    ResponderEliminar
  12. hola Annyz......xfa sera que me dices como se hace para encerrar el texto de la esquina de arriba?? osea asii con un marco........... xfa date una vuelta y diime xfa!!

    ResponderEliminar
  13. Respuestas
    1. aww esque ese el otro codigo

      <textarea rows="6" cols="16" style="border: 2px solid rgb(242, 31, 242); color: rgb(42, 167, 250); font-size: 9pt; background-color: rgb(255, 255, 255); background-image: url("http://i982.photobucket.com/albums/ae301/0LovePill/2202852zvsnp0d6qs.gif"); background-attachment: fixed; text-align: center;">CODIGO</textarea>

      SALUDOS

      Eliminar
    2. gracias....por otro lado me podrias decir como hiciste para que el cusor se viera asi?

      Eliminar
    3. aww es muy sencillo mira solo copia este codigo y pegalo en un gadget html

      <style type=text/css> body{cursor:crosshair} a {cursor: TYPE}</style>

      saludos

      Eliminar

Nota: solo los miembros de este blog pueden publicar comentarios.