Unidad 8. Formularios (III)



8.4. Tipo text

text. Define un campo de texto, es el atributo más usado y se usa para introducir una línea de texto. Se puede introducir cualquier carácter, letras, números, etc. Los navegadores lo presentan como una caja de texto de una longitud de 20 caracteres. Esta longitud se puede variar con el atributo size, este valor se refiere a la longitud de visualización de la caja, pero el usuario puede introducir más caracteres; si queremos controlar esa cantidad podemos utilizar los atributos maxlength y minlength que indican el máximo y el mínimo de caracteres que puede introducir el usuario.

Por ejemplo, en el siguiente formulario el campo nombre tiene la longitud por defecto pero el usuario puede introducir más caracteres; el campo apellidos tiene una longitud de 15 caracteres y hemos limitado a 15 los caracteres que puede introducir; el campo localidad tiene una longitud de 18 y como mínimo el usuario debe introducir 2 caracteres.

<form action="#" method="post" >
  <p>Nombre: <input type="text" name="nombre" ></p>
  <p>Apellidos: <input type="text" name="ape" size="15" maxlength="15"></p>
  <p>Localidad: <input type="text" name="localidad" size="18" minlength="2"></p>
  <p><input type="submit" value="Enviar"></p>
</form>

Nombre:

Apellidos:

Localidad:

Si el usuario introduce un número de caracteres que no cumple con las condiciones de maxlength y minlength, aparecerá de forma automática un globo indicándole el error, como muestra la siguiente imagen para el caso de introducir menos de dos caracteres en el campo Localidad.

Un atributo importante es name que permite dar un nombre diferente a cada campo, de esta forma el programa que reciba los datos podrá identificar cada campo, en el ejemplo anterior al campo para introducir los apellidos le hemos dado el valor ape en el atributo name.

Otro atributo muy utilizado es value que permite establecer un valor por defecto. Por ejemplo, en el campo localidad hemos escrito value="Valencia" de forma que el texto Valencia aparecerá cuando se carge el formulario, el usuario podrá dejar este valor o modificarlo.

Para mostrar información dentro de un campo disponemos del atributo placeholder que muestra un texto al cargarse el formulario, pero a diferencia del atributo value, estos datos no se envían, son sólo informativos. Los datos se borran cuando el usuario coloca el cursor en el campo.

El atributo required hace que sea obligatorio rellenar ese campo, es decir, no se puede dejar en blanco.

En el siguiente ejemplo puedes ver el comportamiento diferente de los atributos value y placeholder; así como comprobar que si no rellenas el campo nombre aparecerá un globo indicando que debes completar ese campo, puesto que tiene el atributo required.

 

<form action="#" method="post" >
<p>Nombre: <input type="text" required name="nombre"  ></p>
<p>Apellidos: <input type="text" placeholder="Escribe los dos apellidos" name="ape" size="25" ></p>
<p>Localidad: <input type="text" value="Valencia" name="localidad" size="18" minlength="2"></p>
<p><input type="submit" value="Enviar"></p>
</form>

Nombre:

Apellidos:

Localidad:

También podemos limitar los valores que permitimos mediante una lista desplegable, para ello debemos utilizar el atributo list con un nombre de lista, luego debemos crear la lista con la etiqueta datalist, y crear los valores de la lista con la etiqueta option, tal y como muestra el siguiente código:

<p>Elegir memoria USB:<input  list="listaUsb"></p>
<datalist id="listaUsb" >
  <option value="8" >
  <option value="16" >
  <option value="32" >
  <option value="64" >
</datalist>

Elegir memoria USB:

Este atributo list se puede utilizar en otros muchos campos como text, date, ...


Enero-2019 (V 2.0)
Pág. 8.3
Atrás Inicio Adelante






Página inicial  Cursos Informática Gratuitos

Síguenos en:   Facebook       Sobre aulaClic            Política de Cookies


© aulaClic. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.