HTML: lenguaje básico para crear páginas web
Y ahora tambien aprende a programar en C++ con Aprende Web C++
y entérate de las novedades o deja un comentario.
última modificación: 13-07-2018.
Visitas este mes: 395
Visitas el mes pasado: 1151
Mi agradecimiento a los siguientes sitios en los que me he basado para la elaboración de este manual.:
Si este sitio te parece interesante puedes contribuir con una pequeña aportació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.
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:
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.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"
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/>
.
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:
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.
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:
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:
En la siguiente página veremos los campos del formulario que usan varias opciones para elegir por medio de botones.
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