Entendido.

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

Logo

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

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net





Sobre ésta página

Ültima modificación: 22-08-2017.

Visitas este mes: 1201

Visitas el mes pasado: 1342

logo
WEB-GRAFÍA

Mi agradecimiento a los siguientes sitios en los que me he basado para la elaboración de este manual.:

Desarrollo Web: manual de HTML
Desarrollo Web, por Rubén Álvarez
Cómo crear tu Web: curso de HTML
ComoCrearTuWeb, Por Georgens
Libros Web: introducción a XHTML
Libros web, por Javier Eguíluz Pérez
Curso de HTML: AulaFácil
www.aulafacil.com
Curso de html: Programación Web
www.programacionweb.net
WebEstilo: manual de html
www.webestilo.com
W3 schools; HTML Tutorial
www.w3schools.com
Tutorial html
Juan José López García
Universidad de Murcia
Introducción al lenguaje html
wikilearning

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




7. Formularios (II)

7.2 Campos de texto.

html

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:

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:

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

Para 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:

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:

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



manual de HTML

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

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

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

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