Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Aprende Web

Crea y diseña tus sitios en la Web.

Manual de HTML

HTML: lenguaje básico para crear páginas web

Y ahora tambien aprende a programar en C++ con Aprende Web C++

Manuales para la creación y diseño de páginas web

Básicos					Avanzados					Practicas
Inicio	HTML	CSS	Complementos	Gestores de Contenido	Javascript	PHP básico	Nuevas Tendencias	Programación	Librerías	Mi primera web	Prácticas Web

RSS. Suscribir canal.

 

7. Formularios (II)

7.2 Campos de texto.

Definición

Llamamos campos de texto, dentro de un formulario, a los elementos que nos permiten recoger texto escrito por el usuario. En la pantalla se muestra una pequeña caja donde el usuario puede escribir el texto que pretende enviar.

Podemos crear varios tipos de campos de texto, bien sea para introducir un dato simple (nombre, edad, dirección, correo electrónico, etc.) o para introducir un texto mas largo (comentarios, opiniones, etc.); también podemos crear un campo de texto para un dato simple, pero con el texto oculto, del tipo "contraseña".

Delante o detrás de estos elementos debemos indicar, mediante el lenguaje HTML habitual para texto, el tipo de datos que queremos que el visitante nos proporcione, ya que los campos de texto son simplemente cajas, en las que escribir la información, la cual será enviada posteriormente.

Como ya se dijo en la página anterior, todo el formulario debe ir dentro de las etiquetas <form> ... </form> las cuales forman una especie de caja que lo engloba.

A continuación veremos el código HTML necesario para crear este tipo de elementos de formulario.

Texto corto

Para crear una caja en la que escribir un texto corto, donde se introduce un dato simple, usaremos la etiqueta input con el atributo y valor type="text". El atributo name="tipo_de_dato" también es obligatorio, ya que nos indicará al recibirlo que tipo de dato queremos recoger. El código básico para este campo de texto será el siguiente:

<input type="text" name="tipo_de_dato"/>;

y la caja de texto tendrá el siguiente aspecto:

Como puedes comprobar dentro de la caja de texto puedes escribir un texto. Antes de seguir vamos a hacer unas aclaraciones sobre esta etiqueta y sus atributos:

• la etiqueta input: se utiliza para varios tipos de campos de formulario, es decir, que sirve tanto para introducir texto en formulario, como para otras formas de introducir información (botones, otros tipos de texto ...). Esta etiqueta no tiene etiqueta de cierre, por lo que en XHTML le insertaremos una barra inclinada al final.
• El atributo type: Indica qué tipo de campo se aplica al formulario; es decir especifica de qué forma se van a introducir los datos y da forma a la manera en qué se visualizará en la pantalla. Esto se define mediante el valor que se le asigne. en este caso debe llevar siempre el valor "text"
• El atributo name: Es necesario para el procesamiento de los datos ya que indica qué tipo de dato se recoge. Como valor podemos poner en principio cualquier texto, pero conviene que sea una referencia al tipo de dato que recogemos (por ej. "nombre", "dirección", "e-mail", etc.) ya que será la referencia que tengamos en el e-mail que recibamos, o en el programa que procese los datos.

A estas cajas de texto debemos ponerles delante o encima de ellas una indicación del tipo de datos que queremos recoger, lo cual lo indicamos en la forma habitual para escribir texto en HTML. un ejemplo sería:

<p>nombre: <input type="text" name="nombre"/></p>

Este código lo vemos en el navegador de la siguiente manera:

nombre:

Como puedes observar la etiqueta input es un elemento en línea, por lo que para estructurar el formulario, debemos ayudarnos de otras etiquetas como los párrafos o la etiqueta <br/>.

otros atributos

Aunque no son imprescindibles podemos insertar en este tipo de campos otros atributos que pueden sernos útiles:

• size: define el tamaño de la caja a lo ancho. Su valor es un número que indicará cuantos caracteres (letras o espacios en blanco) va a ocupar. Si el texto ocupa más sitio que la caja sólo veremos el final del mismo, pero será válido igualmente.
• maxlength Define el máximo de caracteres de texto que puede ser introducido en el formulario, Indica el máximo de texto que puede ser escrito, a partir del cual no nos dejará escribir más.
• value Este atributo indica el texto que aparecerá escrito en la caja por defecto cuando se cargue la página. El texto que insertemos como valor de este atributo es el que se mostrará por defecto. Normalmente las cajas de texto aparecen vacías, pero mediante este atributo en la caja de texto vemos ya escrito este texto.

En el siguiente ejemplo se muestran los ejemplos de aplicación de los atributos anteriores a las cajas de texto y su código HTML:

ejemplo texto en formulario

texto oculto

podemos crear una etiqueta de texto oculto, que funciona igual que la anterior, pero en la cual los caracteres que escribimos permanecen ocultos, en su lugar se muestran unos puntos gruesos que los sustituyen. Este tipo de etiquetas son los que se emplean para introducir contraseñas.

Para ello usaremos la etiqueta input con el atibuto y valor: type="password" . su aspecto es el siguiente:

<p><input type="password" name="clave"/></p>

Si escribes algo dentro de la etiqueta verás la diferencia con la anterior. aquí no se muestra el texto escrito.

Por lo demás funciona igual que los campos de texto corto type="text". Por lo tanto debemos insertar el atributo name para identificarla, y admite también los atributos size, maxlength, value con los mismos efectos; si bien en el atributo value el texto mostrado aparece oculto (mediante puntos gruesos).

En muchos formularios de páginas Web se utiliza este campo para entrar en zonas restringidas. A veces pide confirmación de contraseña, teniendo que escribirla ésta dos veces. Todo esto está fuera del alcance del lenguaje HTML, ya que suele hacerse mediante la utilización de código javascript, php u otros programas, por lo que de momento no entraremos en estas aplicaciones.

Texto largo

Si queremos que nos puedan enviar un texto más largo (como una opinión, un comentario, etc.), utilizaremos otro tipo de etiqueta, que mostrará en la pantalla una caja más grande. para ello utilizaremos la etiqueta <textarea> con su cierre correspondiente </textarea>.

al igual que en las etiquetas anteriores debemos escribir el atributo name para asociar la etiqueta a un tipo de datos. El aspecto de este campo de es el siguiente:

comentario:

y el código del ejemplo anterior será el siguiente

<p>comentario: <textarea name="comentario"></textarea></p>

esta etiqueta admite dos atributos para cambiar el ancho y el alto de la caja de texto. estos son:

• rows: define el número de líneas del campo de texto, es decir, su altura o filas de texto que caben. si al escribir se sobrepasan, la caja muestra una barra de desplazamiento en su parte derecha.
• cols: define el número de columnas del campo de texto medido en número de caracteres, es decir la anchura o número de caracteres que se pueden escribir por línea.

En los navegadores modernos aparece en la esquina inferior derecha de la caja una pestaña, en la cual, arrastrando mediante el ratón, podemos cambiar el tamaño de la caja. Esta es una de las novedades de la nueva versión en HTML5.

Para que aparezca un texto predefinido dentro de la etiqueta no usaremos el atributo value sino que escribiremos el texto que queramos que aparezca entre las etiquetas <textarea>texto_a_mostrar</textarea>. Veamos un ejemplo:

Escribe aquí tu comentario:

Este ejemplo tendrá el siguiente código:

<p><textarea name="comentario" rows="5" cols="50">Escribe aquí tu comentario: </textarea></p>

A continuación se muestra un ejemplo de formulario, que aunque está incompleto muestra todas las etiquetas vistas hasta ahora:

ejemplo de formulario

---

En la siguiente página veremos los campos del formulario que usan varias opciones para elegir por medio de botones.

botones

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com