 |
|
|
|
|
|
Portada | Monotemáticos | Secciones | Desarrolladores | Comunidad | Servicios | Servicios profesionales | RSS | |
||
|
||||
|
|
|||
 |
|
 |
||
|
||||
Elementos de Formularios. Campos de texto
Vemos detenidamente los distintos elementos de formulario que sirven para introducir texto.
12/1/02 - El HTML nos propone una gran diversidad de alternativas a la hora de crear nuestros formularios. Estas van desde la clásica caja de texto hasta la lista de opciones pasando por las cajas de validación.
Veamos en qué consiste cada una de estas modalidades y como podemos implementarlas en nuestro formulario.
Texto corto
Las cajas de texto son colocadas por medio de la etiqueta <input>. Dentro de esta etiqueta hemos de especificar el valor de dos atributos: type y name.
La etiqueta es de la siguiente forma:
<input type="text" name="nombre">
De este modo expresamos nuestro deseo de crear una caja de texto cuyo contenido será llamado nombre (por ejemplo). El aspecto de este tipo de cajas es de sobra conocido, aquí lo podéis ver:
El nombre del elemento del formulario es de gran importancia para poder identificarlo en nuestro programa de procesamiento o en el mail recibido. Por otra parte, es importante indicar el atributo type, ya que, como veremos, existen otras modalidades de formulario que usan esta misma etiqueta.
El empleo de estas cajas esta fundamentalmente destinado a la toma de datos breves: palabras o conjuntos de palabras de longitud relativamente corta. Veremos más adelante que existe otra forma de tomar textos más largos a partir de otra etiqueta.
Además de estos dos atributos, esenciales para el correcto funcionamiento de nuestra etiqueta, existen otra serie de atributos que pueden resultarnos de utilidad pero que no son imprescindibles:
size
Define el tamaño de la caja en número de caracteres. Si al escribir el usuario llega al final de la caja, el texto ira desfilando a medida que se escribe haciendo desaparecer la parte de texto que queda a la izquierda.
maxlength
Indica el tamaño máximo del texto que puede ser tomado por el formulario. Es importante no confundirlo con el atributo size. Mientras el primero define el tamaño aparente de la caja de texto, maxlength indica el tamaño máximo real del texto que se puede escribir. Podemos tener una caja de texto con un tamaño aparente (size) que es menor que el tamaño máximo (maxlength). Lo que ocurrirá en este caso es que, al escribir, el texto ira desfilando dentro de la caja hasta que lleguemos a su tamaño máximo definido por maxlength, momento en el cual nos será imposible continuar escribiendo.
value
En algunos casos puede resultarnos interesante asignar un valor definido al campo en cuestión. Esto puede ayudar al usuario a rellenar más rápidamente el formulario o darle alguna idea sobre la naturaleza de datos que se requieren. Este valor inicial del campo puede ser expresado mediante el atributo value. Veamos su efecto con un ejemplo sencillo:
<input type="text" name="nombre" value="Perico Palotes">
Genera un campo de este tipo:
|
Nota: estamos obligados a utilizar la etiqueta <form>
Aunque de lo que se lee en estos capítulos sobre formularios se puede entender bien esto, hemos querido remarcarlo para que quede muy claro: Cuando queremos utilizar en cualquer situación elementos de formulario debemos escribirlos siempre entre las etiquetas <form> y </form>. De lo contrario, los elementos se verán perfectamente en Explorer pero no en Netscape. Dicho de otra forma, en Netscape no se visualizan los elementos de formulario a no ser que esten colocados entre las correspondientes etiquetas de inicio y fin de formulario. Es por ello que para mostrar un campo de texto no vale con poner la etiqueta <input>, sino que habrá que ponerla dentro de un formulario. Así: <form> <input type="text" name="nombre" value="Perico Palotes"> </form> |
Veremos posteriormente que este atributo puede resultar relevante en determinadas situaciones.
Texto oculto
Podemos esconder el texto escrito por medio asteriscos de manera a aportar una cierta confidencialidad. Este tipo de campos son análogos a los de texto con una sola diferencia: remplazamos el atributo type="text" por type="password":
<input type="password" name="nombre">
En este caso, podéis comprobar que al escribir dentro del campo en lugar de texto veréis asteriscos.
Estos campos son ideales para la introducción de datos confidenciales, principalmente códigos de acceso. Se ve en funcionamiento a continuación.
Texto largo
Si deseamos poner a la disposición de usuario un campo de texto donde pueda escribir cómodamente sobre un espacio compuesto de varias líneas, hemos de invocar una nueva etiqueta: <textarea> y su cierre correspondiente.
Este tipo de campos son prácticos cuando el contenido a enviar no es un nombre teléfono o cualquier otro dato breve, sino más bien, un comentario, opinión, etc.
Dentro de la etiqueta textarea deberemos indicar, como para el caso visto anteriormente, el atributo name para asociar el contenido a un nombre que será asemejado a una variable en los programás de proceso. Además, podemos definir las dimensiones del campo a partir de los atributos siguientes:
rows
Define el número de líneas del campo de texto.
cols
Define el número de columnas del campo de texto.
La etiqueta queda por tanto de esta forma:
<textarea name="comentario" rows="10" cols="40"></textarea>
El resultado es el siguiente:
Asimismo, es posible predefinir el contenido del campo. Para ello, no usaremos el atributo value sino que escribiremos dentro de la etiqueta el contenido que deseamos atribuirle. Veámoslo:
<textarea name="comentario" rows="10" cols="40">Escribe tu comentario....</textarea>
Dará como resultado:
+ 1 categoria relacionada
+ 4 comentarios (Añadir)
+ 5 comentarios no revisados
| Autoría, licencia y acciones sobre este artículo | ||||||
|
Informe de Rubén Alvarez*
Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright. * Para consultas técnicas utilizar la lista de correo.
|
| Los comentarios de los visitantes son para ampliar la información del artículo. Cualquiera puede participar. |
| Se muestran 4 comentarios revisados |
Debe poner: maxlength
Es un error mecanográfico de insignificante importancia, pero vale la pena indicarlo para los despistadillos q como yo pueden malgastar 5 minutos importantes.
Corregido!!, muchas gracias por señalarnos ese despiste.
RESPUESTA
Cualquier cosa que desees modificar en su apariencia y no sepas cómo hacerlo con HTML, si es que se puede, intenta hacerlo con CSS.
CSS permite modificar los estilos de muchos elementos de páginas web, como en este caso los campos de texto.
Para mostrar un ejemplo de campo de texto modificado, sirva este código:
<input type="text" name="campo1" style="font-family:arial; fonf-weight:bold; font-size:15pt; width:400px; height:50px;" value="hola amigos">
Que tendría como resultado este campo de texto:
Para alinear el texto del campo de texto:
<input name="Nombre" type="text" style="text-align:center;" size="40" maxlength="40">
Se trata de utlizar CSS: style="text-align:center;"
Queda más mono sin duda xDDD
 | Añadir un comentario del artículo |
| Comentarios sin revisar |
| Entre los comentarios no revisados puede haber algunos interesantes que se hayan enviado recientemente. |
 | Ver los comentarios no revisados |
| Añadir un comentario del artículo |
| Enlaces: |
| Maestrosdelweb |
Ir arriba
Lectura recomendada + HTML 4  Compra este libro en Agapea, la librería urgente a domicilio. |
||||||||
Tienda DesarrolloWeb
