Veamos los diferentes elementos de un formulario de HTML que nos ayudan a introducir texto. Como por ejemplo lo que se conoce como cajas de texto, listas de opciones o cajas de validación.
Las cajas de texto se crean por la etiqueta <input>. Esta etiqueta admite los atributos: type y name. Un ejemplo sería:
<input type=”text” name=”nombre”>
Así se vería en el navegador:
El atributos name y type son importante porque nos permite identificar los diferentes campos del formulario para su posterior uso y clasificación de los datos. Estas cajas de texto se usan para la recogida de palabras o conjunto de ellas relativamente cortas.
Pero además existen otros atributos para la etiqueta <input> como:
El atributo size determina el tamaño de la caja en número de caracteres. Si al escribir llegamos al final de la caja, el texto ira desapareciendo por la izquierda.
El atributo maxlength indica el tamaña máximo del texto que puede recoger el formulario.
El atributo value le asigna un valor determinado al campo en cuestión del formulario. Lo que en algunos casos es interesante, bien para ayudar a rellenar el formulario o para darle una idea al usuario. Veamos un ejemplo:
<input type=”text” name=”nombre” value=”Federico Fdez.”>
En el navegador daría un resultado de este tipo:
Esta etiqueta de HTML también nos deja ocultar el texto escrito por medio de asterisco con lo que el usuario obtiene cierta confidencialidad. Para conseguirlo tenemos que colocar en el atributo type=”password”.
La etiqueta <textarea> y </textarea> son especificas para que el usuario puede introducir textos más largos que los que podía con la anterior etiqueta <input>. Se usan por ejemplo para que el usuario exprese su opinión o comentario.
Para esta etiqueta es importante el atributo name, que como en la anterior, la <input> nos ayuda a diferenciar y clasificar los diferentes campos del formulario. Tiene igualmente otros atributos esenciales para las dimensiones de este campo:
El atributo rows que define el número de líneas de texto que tiene este campo.
El atributo cols que determina el número de líneas de texto que tiene este campo.
Un ejemplo de este tipo de etiqueta sería como el siguiente:
<textarea name=”comentario” rows=” 10” cols=”50”></textarea>
El resultado que visualizaríamos en el navegador sería:
De la misma que en el caso de la anterior etiqueta, la <input>, podemos prefijar el contenido de este campo. Para ello escribiremos dentro de la etiqueta el contenido de lo que queramos que aparezca. Sería algo así:
<textarea name=”comentario” rows=” 10” cols=”50”>Escribe aquí tu comentario…</textarea>
Veríamos en el navegador lo siguiente: