Elementos de Formularios. Campos de texto

Vemos detenidamente los distintos elementos de formulario que sirven para introducir texto.
El lenguaje HTML nos propone una gran diversidad de alternativas a la hora de crear nuestros formularios, es decir, una gran variedad de elementos para diferentes propósitos. Estas van desde la clásica caja de texto, hasta la lista de opciones en un menú desplegable, pasando por las cajas de validación, etc.

En el artículo anterior del Manual de HTML ya vimos cómo iniciar nuestro formulario con la etiqueta <form> y los distintos atributos que tenemos que utilizar para configurar su funcionamiento.

En el presente artículo veremos las etiquetas que tenemos que utilizar para crear campos de texto, que pueden ser de dos tipos. Veamos en qué consiste cada una de estas modalidades y como podemos implementarlas en nuestro formulario.

Etiqueta INPUT para 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 tendrá 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, en el caso de la etiqueta anterior, pero podemos poner distintos nombres a cada uno de los campos de texto que habrán en los formularios). 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 elementos de formulario que usan esta misma etiqueta INPUT.

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 de texto, en número de caracteres visibles. Si al escribir el usuario llega al final de la caja, el texto que escriba a continuación también cabrá dentro del campo pero irá 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, en número de caracteres, que puede ser escrito en el campo. En caso que el campo de texto tenga definido el atributo maxlength, el navegador no permitirá escribir más caracteres en ese campo que los que hayamos indicado.

Nota: Es importante no confundir el atributo maxlength con el atributo size. Mientras size define el tamaño visible 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, si sobrepasamos el espacio marcado por size, 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 estilo:

Veremos posteriormente que este atributo puede resultar bastante relevante en determinadas situaciones.

Nota: estamos obligados a utilizar la etiqueta <form>

Aunque esperamos que haya quedado claro a medida que se lee en estos capítulos sobre formularios, 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. (Actualizado: en estos momentos la mayoría de los navegadores pueden interpretar bien los campos de texto sin que estén en una etiqueta FORM, sin embargo, la etiqueta FORM sigue siendo imprescindible, porque indica qué se desea hacer con los campos de texto, como el action a realizar, y engloba qué elementos pertenecen a qué formularios)

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>

Etiqueta INPUT, modalidad de texto oculto

Hay determinados casos en los que podemos desear esconder el texto escrito en el campo INPUT, por medio asteriscos, de manera que aporte 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 o claves. Se ve en funcionamiento a continuación.

Etiqueta TEXTAREA para 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, edad o cualquier otro dato breve, sino más bien, un comentario, opinión, etc. en los que existe la posibilidad que el visitante desee rellenar varias líneas.

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:

Como se podrá imaginar, los campos de texto son de vital importancia para los formularios, pero no son los únicos tipos de elementos que podemos colocar dentro de éstos. En el siguiente artículo veremos otros tipos de elementos para formularios.

Autor

Rubén Alvarez

Redactor de DesarrolloWeb.com

Compartir

Comentarios

Mokosaltarín

01/9/2002
Donde dice: maxlenght
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.

ased

17/6/2003
hola, lo primero q kiero es k sepais k esta pagina es cojonuda, volviendo a una duda kme atañe...los campos de texto no pueden modificarse en su tamaño, es decir, de height y width?veran, lo hice con dreamweaver pero cuando lo ejecuto me sale la resolucion de siempre y escribe en el mismo tamaño y tipo. Gracias de antemano.

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:

Divino Castro

11/1/2006
bueno me he tomado mucho tiempo tratando de encontrar como en codigo despues de haber declarado una caja de texto se le puede cambiar su valor, muchas gracias.

Bull

21/7/2006
Solucionado xDD

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

lalala

17/2/2009
valee. .qien es el primo que se dedica a hacer esta mierda ? jajajajajajjajaaaa desde luego jo no , esta clase de tecno ..! vayaa palazoooo
AVESTRUZZZ(va port ti tequieroo)!

ut

24/2/2009
bull pringaoo

Roberto

23/4/2009
Borrado automático en área de texto.
Hola, estoy intentando poner un texto dentro de mi área de texto de varias lineas y que cuando se pose encima se borre. He encontrado como hacerlo en un campo de texto sencillo:

<input type="text" value="Escriba su consulta..." onfocus="if(this.value=='Escriba su consulta...')this.value=''" />

Pero busco esto mismo para uno multilinea.

El manual está estupendo. Enhorabuena.

jfhly

29/4/2009
Como se envian??
Al momento de crear el formulario hago lo siguiente:

<form action="mailto:micorreo" method="post" encytpe="text/plane" align="right"
<textarea name="Cuadro de sugerencias" rows="10" cols="40">Si tienes alguna sugerencia sobre algun tema escribela aqui</textarea>
</form>

(quite mi correo real y escribi mi correo), ya sale la caja y todo pero.... como se hace para enviar lo escrito al email que yo ponga??

Jose Guillermo

02/5/2009
Se podra leer de manera que se introduza texto de derecha a izquierda
Hola amigos mi duda es si se puede realizar de manera que el campo lea de forma derecha a izquierda la manera que introducimos los datos en un campo de texto HTML lee los datos de izquierda a derecha ¿¿¿hay posibilida???

sebastian

27/8/2009
como hacer un formulario que quede registrado en misma paguina
quiero saber si es posible hacer un formulario que los datos ingresados queden en la misma paguina como comentario

sheila

15/10/2009
Enfoque en la caja de texto
Hola a todos! espero recibi respuesta XD
El asunto es k necesito tener un textbox con un valor predefinido, pero en el momento de hacer clik para ingresar el dato, se borre el texto que habia.
Creo k es con un javascript pero no estoy segura de como hacerlo.
Gracias de antemano ...

Cesar

31/5/2010
Muy padre tu pagina
Primeramente, felicidades!!, muy padre articulo, y me ayudo mucho.

Pero un problema que tengo con eso, esque si uso textarea no puedo usar el value, y por lo tanto no puedo mostrar el contranido, y si lo muestro, pero dentro de las etiquetas de textarea, no lo puedo modifcar :s
Ejemplo

<textarea> $reg['Texto'] </textarea>

lo mostre con una funcion que tu mencionabas arriba sobre utilizar <input type="text"...> y utilizas CSS, y me funciono a la perfeccion, solamente que no respeta el salto de linea. lo escribe todo seguido.

Tienes alguna sugerencia

De antemano muchas gracias!, saludos

candy

29/6/2010
felicitacion
Fue de mucha utilidad este tema
Gracias :)

Aiko

03/7/2010
Por que no se envia al correo?
La cosa es que ya hice todos los pasos hasta aqui, y quedo magnifica la presentación, justo como queria que se viera. Sin embargo, cuando llega el momento de clickear en enviar me abre una ventana que me pide seleccionar un servicio de mensajeria en linea (gmail, hotmail, yahoo...) cuando yo esperaba que se enviara automáticamente a mi correo sin necesidad de hacerlo desde esos sitios de correo electronico o el outlook. Que debo hacer?

santiagover

10/3/2011
Formulario
Después de leer detenidamente vuestros artículos he creado el siguiente código, pero antes de intentar publicarlo, espero alguien lo revise y vea si encuentra errores, desde ya gracias
<html><head>
<body>

<div class="content"><form action="mailto:consorciosyconsorcistas@yahoo.com.ar?" accept-charset="UTF-8"
method="post" id="comment-form" ENCTYPE="text/plain">
<div><font color="#08088A" size="3"><a name="comentar"><b>NOTA</b></a>: Espacio destinado a comentarios y opiniones de los lectores.
No se responderán las consultas <a href="/servicios"></a>.</font><div class="form-item" id="edit-name-wrapper">
<label for="edit-name">Nombre: <span class="form-required" title="Este campo es obligatorio.">*</span></label>
<input type="text" maxlength="60" name="name" id="edit-name" size="30" value class="form-text comment-processed">
</div>
<div class="form-item" id="edit-mail-wrapper">
<label for="edit-mail">Email: </label>
<input type="text" maxlength="64" name="mail" id="edit-mail" size="30" value="" class="form-text comment-processed">
<div class="description">El contenido de este campo se mantiene como privado y no se muestra públicamente.</div>
</div>

<div class="form-item" id="edit-subject-wrapper">
<label for="edit-subject">Asunto: </label>
<input type="text" maxlength="64" name="subject" id="edit-subject" size="60" value="" class="form-text">
</div>
<div class="form-item" id="edit-comment-wrapper">
<label for="edit-comment">Comentario: <span class="form-required" title="Este campo es obligatorio.">*</span></label>
<div class="resizable-textarea"><span><textarea cols="60" rows="15" name="comment" id="edit-comment" class=
"form-textarea resizable required processed"></textarea><div class="grippie" style="margin-right: -6px; "></div></span></div>
</div>
<input type="submit" name="op" id="edit-preview" value="Vista previa del comentario" class="form-submit">
<input type="submit" name="op" id="edit-submit" value="Enviar comentario" class="form-submit">
<div><font color="#08088A" size="3"><a name="comentar"><b>NOTA</b></a>:Participe, aportando su opinión enriquece
este sitio de manera que todos podemos aprender unos de otros.Los comentarios deben ser moderados, no aparecen
inmediatamente, son leídos por el administrador y publicados según el interés para otros lectores.

Se reserva el derecho de publicación de los comentarios introducidos.

</div></form>
</div>
</div>


</div> <div class="block block-quicktabs" id="block-quicktabs-1">
</body></html>

<HTML>
<HEAD>
<TITLE>Insertar.php</TITLE>
</HEAD>
<BODY>
<?
//Conexion con la base
mysql_connect("www.000webhost.com","a9770487","565977y29";
//Ejecucion de la sentencia SQL
mysql_db_query("nombre de la base de datos","insert into nombre de la tabla (usuario,nombre) values ('$usuario','$nombre')";
?>
<h1><div align="center">Registro Insertado</div></h1>
<div align="center"><a href="lectura.php">Visualizar el contenido de la base</a></div>
</BODY>
</HTML>

MMMgrafica

30/6/2011
Formulario
Gracias por el codigo, soy pricipiante y estava enrredada con eso.

yooo

01/10/2011
boton
y como se hace un boton para que cuando le des la informacion de dentro te la envie a un txt???

Mauro

30/7/2012
No logro que me muestre los campos de texto
Hola, estoy aprendiendo de cero php y mysql, y en php no logro generar un formulario.

el codigo es:

<html>
<head>
</head>
<body>
<form name="f_prof" id="f_prof"
action="formularioSimple.php" method="post">
Teclee su nombre:
<imput type="text" name="nombre" id="nombre">
<br />
¿Es usted soltero?
<imput type="checkbox" name="soltero" id="soltero" value"si">

<br />
Seleccione su edad:
<br />
de 0 a 20 a&ntilde;os:
<imput name="edad" type="radio" value="1">
<br />
de 21 a 40 a&ntilde;os:
<imput name="edad" type="radio" value="2">
<br />
m&aacute;s de 40:
<imput name="edad" type="radio" value="3">
<br />
<imput name="datoOculto" type="hidden" id="datoOculto" value="Este es un campo oculto">
<p>
<imput type="sumit"value="ENTRAR" name="ok" id="ok">
</p>
</form>
</body>
</html>

y la pagina me muesta lo siguiente:

Teclee su nombre:
¿Es usted soltero?
Seleccione su edad:
de 0 a 20 años:
de 21 a 40 años:
más de 40:

no logro encontrar el por que. Si alguien me puede dar una mano, muchas gracias.

daniela

06/4/2014
No me gusto para nada el articulo
es horrible no ensepa nada no me gusto

Jandico

26/5/2014
Como se puede bloquear la dimension del campo de texto
Pues quisiera saber si existe la posibilidad de bloquear el campo donde la gente escribe el mensaje o la consulta. Como bien se sabe, aparece una muesca en la esquina inferior derecha y desearia que no estuviera para quitar la posibilidad de agrandar dicho campo.

Gracias