Los campos de entrada de los formularios se definen mediante el tag <input>
y sus diferentes valores. Estos valores nos permiten utilizar varios tipos de
cajas y de formas.
Vamos a ver a continuación distintos tipos de cajas y veremos como varían
sus características.
Las cajas de texto básicas: <input type= “text”>
La caja de texto básica se escribiría de la siguiente forma:
<input type="text" name="nombredelacaja">
y su apariencia sería la siguiente:
Hemos visto como el type= “text” le da a la caja una apariencia
sencilla. Este tipo de campos se usan para albergar informaciones cortas y concretas.
Podemos completar el estilo de esta caja gracias a los siguientes atributos:
size: mediante el atributo size podemos definir el tamaño de
la caja. Es decir, la apariencia de la misma. Si el texto que vamos a escribir
no cabe en la caja, éste se desplazará pero sin que la caja varíe
su tamaño. El texto irá desapareciendo por la izquierda.
maxlength: Este atributo nos sirve para definir la cantidad máxima
de letras que se pueden escribir en la caja. No se podrán escribir en
la caja más caracteres que los indicados por el maxlength.
value:Define si queremos que en la ventana haya
un texto ya preescrito. Este texto puede ayudar al usuario a saber cúal
es el tipo de dato que te piden en ese campo.
name:para ponerle un nombre al campo. Esto resulta
muy útil a la hora de gestionar la información que nos llegue.
Aquí vemos un tipo de caja “text” con un tamaño de
15 y un límite de caracteres de 30. Además, tiene un texto preescrito
en él. El resultado sería el siguiente:
Campos de texto largo: <textarea>
Un <textarea> es como una caja de texto sencilla, tipo “text”,
pero en la que dejamos al usuario espacio de sobra para poder escribir un texto
largo. Son útiles para que el usuario contacte con nosotros, plantee
sus dudas o sugerencias, etc.
Su etiqueta es <textarea> y su correspondiente cierre </textarea>.
Todo lo que vaya dentro de estas etiquetas formará parte del texto.
Sus atributos básicos son “rows” y “cols” que
servirán para definir el tamaño del textarea. Además, no
debemos olvidar el atributo “name”, que servirá para definir
el nombre de este campo.
Un textarea llamado “comentarios” y con unas dimensiones de 10
filas y de 40 columnas, tendría el código siguiente:
<textarea name="comentarios" rows="10"
cols="40">Escribe aquí tus comentarios</textarea>
Y se vería de la siguiente forma:
Textos con passwords
En muchos formularios se piden datos personales que el usuario no quiere que
se lean a su alrededor: contraseñas, etc. Para ello debemos crear una
caja que no muestre los datos que se escriben en ella y que los codifique. Esto
es más sencillo de lo que parece.
El siguiente código es de un campo con datos codificados:
