-Caja de textos básicos- 



La caja de texto básica se escribiría de la siguiente forma:

<tipo de entrada="texto" nombre="nombredelacaja">

Hemos visto como el type= “text” le da a la caja una apariencia sencilla. Este tipo de campos se usan para albergar información corta y concreta.

Podemos completar el estilo de esta caja gracias a los siguientes atributos:

Tamaño: 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.

valor: Defina si queremos que en la ventana haya un texto ya preescrito. Este texto puede ayudar al usuario a saber cuál es el tipo de dato que te piden en ese campo.

nombre: para ponerle un nombre al campo. Esto resulta muy útil a la hora de gestionar la información que nos llegue.

Mira el siguiente código:

<tipo de entrada="texto" tamaño="15" maxlength="30" valor="Nombre" name="nombre">

Aquí vemos un tipo de caja “texto” con un tamaño de 15 y un límite de caracteres de 30. Además, tiene un texto preescrito en él.

Campos de texto largo: <textarea>

Un <textarea> es como una caja de texto sencilla, tipo “text”, pero en la que deja 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 cierre correspondiente </textarea>. Todo lo que vaya dentro de estas etiquetas formará parte del texto.

Sus atributos básicos son “filas” y “cols” que servirán para definir el tamaño del área de texto. Además, no debemos olvidar el atributo “name”, que servirá para definir el nombre de este campo.

Un área de texto llamada “comentarios” y con unas dimensiones de 10 filas y de 40 columnas, tendría el siguiente código:

<textarea name="comentarios" rows="10" cols="40">Escribe aquí tus comentarios</textarea>



VIDEO EXPLICATIVO