La etiqueta INPUT y los cuadros de texto

Para la mayoría de los elementos de la forma, la palabra INPUT se utiliza para configurar el elemento. A continuación, escribes un espacio seguido de la palabra TIPO. Esto le dice al navegador qué tipo de elementos de forma para dibujar en su página. Si desea un cuadro de texto, el TIPO a utilizar es "Texto":

TIPO DE ENTRADA = "Texto";

(Observe que no hay una etiqueta final para la ENTRADA.)

A continuación, añades los atributos que quieres. Hay muchos atributos para los cuadros de texto. Las tres más comunes son Tamaño, Valor y Nombre. El tamaño se refiere a la longitud de la caja de texto en píxeles en lugar del número de caracteres que puede contener. Es una buena idea limitar el número de caracteres de texto que pueden caber en su cuadro de texto, y para ello se utiliza el atributo Maxlength:

TIPO DE ENTRADA = "Texto" Tamaño = 20 Valor = "" Nombre = "text1" Maxlength="15">

El atributo Valor significa el texto que se escribirá en el cuadro de texto. Usted puede establecer algún texto por defecto, si lo desea:

TIPO DE ENTRADA = "Texto" Tamaño = 20 Valor = "Texto por defecto aquí" Nombre = "text1";

Lo que haya entre las dos comillas de VALOR es lo que obtienes cuando el formulario se envía a alguna parte.

Se debe agregar un atributo de nombre para que puedas referirte a él en los scripts. Lo distingue de cualquier otro cuadro de texto que pueda tener en su formulario.

Algunos otros atributos del cuadro de texto son:

Accesskey
Altura
TabIndex
Anchura

La altura y la anchura se explican por sí solas. Accesskey se refiere a un atajo de teclado puedes añadir, mientras que TabIndex es un valor numérico y se refiere a donde el cursor terminará cuando presione la tecla Tab de su teclado. Como ejemplo, toma una mirada a los siguientes tres cuadros de texto:

TIPO DE ENTRADA = "Texto" TabIndex="2"
TIPO DE ENTRADA = "Texto" TabIndex="3"
TIPO DE ENTRADA = "Texto" TabIndex="1">

El tercero de los tres cuadros de texto de arriba se activará primero cuando la pestaña se pulsa la tecla. Vuelva a pulsar la tecla de tabulación y el cursor aparecerá en la parte superior cuadro de texto, seguido por el del medio. Realmente puedes molestar a tus visitantes si ¡te equivocas en el tabulador!

El botón de envío

Si desea que su formulario sea enviado a algún lugar, se necesita un botón de envío (aunque puedes escribir el código para tu propio botón de envío). Cuando se hace clic en el botón de envío, el navegador comprobará el atributo ACTION de la etiqueta FORM para ver dónde quieren que se envíen los datos. Luego comprueba el atributo METHOD para ver qué método quieren usar, Post o Get. El navegador intentará enviar los datos del formulario para ti.

El código para el botón de envío es este:

TIPO DE ENTRADA = "Someter" Valor = "Someter";

Esta vez, el TIPO está ajustado a "Enviar". El atributo VALUE es el texto que aparecerá en el propio botón. El ancho del botón está determinado por el ancho del texto para el atributo VALOR. Si quisieras un ancho realmente puedes usar este viejo truco:

Valor = " Someter ";

Aquí se añaden espacios a la izquierda y a la derecha del texto. El navegador ver los espacios como texto y adaptar el ancho en consecuencia.

El botón de reinicio

El botón de reinicio devuelve la forma al estado en el que estaba originalmente cuando estaba cargada. Cualquier valor predeterminado que haya agregado se conservará. El código para un descanso es este:

TIPO DE ENTRADA = "Reset" Valor = "Clear";

Note que el TIPO es ahora "Reset". El atributo de valor funciona en el mismo de la manera que lo hace el botón de envío - es el texto que aparecerá en el botón.

Para probar el elemento de la caja de texto y los botones, añada lo siguiente entre las etiquetas BODY de tu código HTML:

...y la forma en que se hace... TIPO DE ENTRADA="Texto"
...y el de los niños... TIPO DE ENTRADA="Someter" Valor="Someter";

El formulario es sólo un cuadro de texto y un botón. Fíjese que los dos están separados por una etiqueta P, de lo contrario estarían uno al lado del otro.

Guarde su trabajo y vea los resultados en su navegador. Deberías ver esto:

Escriba algo en su cuadro de texto y haga clic en el botón. Lo que encontrarás es que el texto desaparecerá. Si hubiera añadido los atributos de Método y Acción a la etiqueta FORM, entonces los datos del cuadro de texto serían enviados a una ubicación de su elección (dirección de correo electrónico, guión, etc.).

Ahora modifica tu línea INPUT TYPE="Text" y añade los atributos SIZE y VALUE:

TIPO DE ENTRADA="Texto" Tamaño="25" Value="Introduzca su nombre "*;

Cuando guardes y recargues, el navegador se verá así:

El cuadro de texto será más largo y se mostrará el texto predeterminado.

Botones de forma de estilo

Los botones, como cualquier elemento de formulario pueden tener un estilo CSS aplicado. En el código de abajo, hemos aplicado varios estilos a nuestro botón de forma:

#Botón1 {

Altura: 30px;
Anchura: 180px;
color de fondo: #820404;
fuente-familia: Arial, Helvética, sans-serif;
tamaño de letra: 18px;
color: #FFFFFF;

}

#Button1:hover {

color de fondo: #CCCCCC;

}

Añade un atributo de identificación a tu botón:

TIPO DE ENTRADA="Enviar" Valor="Enviar" ID="Botón1" ;

Entonces prueba algunos estilos CSS en tu propio código para ver cómo funcionan. Prueba el relleno y propiedades fronterizas para ver qué pasa. La propiedad border-color también es que vale la pena probar.

Antes de implementar cualquier estilo de botón, sin embargo, vale la pena revisar el resulta en más de un navegador, especialmente cuando se trata de fronteras.

Puedes usar las imágenes como botones, si quieres. Pero necesitan Javascript encendido en el navegador para hacerlos funcionar. El TIPO a usar es IMAGEN:

SRC="nombre_de_imagen.gif" ALT="alt text" onClick="submit_function()">

Si estás vendiendo cosas en tu sitio, entonces los botones de imagen pueden no ser un buen ya que algunos de sus usuarios no los verán.

En la próxima lección, verás cómo usar el CSS para dar formato a tus cajas de texto.

| Formas de etiquetas | Formato de cajas de texto con CSS