Puedes usar algo de CSS para dar formato a tus cajas de texto. Añade el siguiente ENLACE al La sección HEAD de tu código HTML:

TIPO DE HOJA DE ESTILO ="text/css" HREF="../css/forms_1.css">

Crea una nueva página CSS y guárdala en la carpeta correcta. Para el nombre del archivo type forms_1.css . Guardamos nuestra página HTML en una carpeta llamada páginas. Nosotros tienen una carpeta CSS que es una carpeta más arriba de esta, y así guardaron nuestro archivo CSS allí. Por eso nuestro HREF dice "../css/forms_1.css". Esto significa, "Mueve una carpeta hacia arriba desde donde está la página HTML, y busca una carpeta llamado css. Entonces usa el script CSS llamado forms_1.css."

Para el CSS, escribe lo siguiente:

Formateo de cajas de texto con CSS

Ahora tienes que modificar ligeramente el código de tu caja de texto. Cámbialo a esto:

TYPE="Texto" Value="Introduzca su nombre "*;

La primera línea del código CSS establece el estilo para una ENTRADA con el ID tb1 . Por eso hemos añadido un atributo ID con ese nombre al código.

El atributo SIZE ha sido eliminado porque estamos estableciendo el tamaño del texto caja usando CSS:

Altura: 30px;
Ancho: 300px;

Puedes dejar el atributo TAMAÑO en, si quieres, no afectará los resultados.

Las otras cuatro propiedades CSS para el cuadro de texto establecen el color de fondo, el la familia y el tamaño de la fuente, y el color del texto.

También hemos añadido dos pseudo clases para los elementos de ENTRADA. La primera es ...enfocar. Cuando haces clic dentro del cuadro de texto, el borde cambia de color. Añadiendo pistas visuales como esta ayudan a los usuarios cuando llenan sus formularios.

La otra pseudo clase es para el evento inválido . Verás como esta funciona cuando llegamos a los elementos del formulario HTML5. Pero pondrá un borde rojo alrededor una ENTRADA si el usuario ha cometido un error.

Refresca la página web en tu navegador. Con los nuevos estilos CSS aplicados, debería ...se ven así:

Formateo de cajas de texto con CSS

Cuando haga clic dentro del cuadro de texto, se verá así:

Formateo de cajas de texto con CSS

Con sólo unos pocos estilos CSS, entonces, realmente puedes mejorar la apariencia de sus elementos de forma.

Cajas de alerta de JavaScript

Para que puedas ver que algo está sucediendo aquí, podemos añadir algunas un simple JavaScript para llegar a nuestros valores de forma.

Añade un atributo NAME al código de tu cuadro de texto, resaltado en negrita abajo:

TYPE="Text" Value="Enter tu nombre" NAME="textBox1" ;

Una vez que un elemento del formulario tiene un atributo NAME, puedes referirte a él en código. (Usted también puede usar el atributo ID de un formulario en clave).

La forma en sí misma necesita un atributo de NOMBRE también. Así que añade esto a tu etiqueta FORM:

NOMBRE DE LA FORMA="frmOne";

Así que le hemos dado a la forma el NOMBRE de uno.

Para su botón de formulario, modifique el código a esto:

TIPO DE ENTRADA="Botón" Valor="Enviar" onClick="textBoxValue( )">

Fíjese que el TIPO ahora es "Botón" en lugar de "Enviar". Esto le permite escribir su propio código de envío, lo que le gustaría hacer para comprobar que los valores de la forma han sido rellenados correctamente.

La parte que va a hacer toda la acción, sin embargo, es esta:

onClick="textBoxValue( )"

onClick es algo llamado evento. Sólo significa que cuando el botón se hace clic para realizar alguna acción. La acción para nosotros es un pedazo de código que vamos a para añadir en la sección de CABEZA. Hemos llamado a este trozo de código textBoxValue( ) .

En la sección HEAD de tu código HTML, añade el siguiente JavaScript:

función textBoxValue() {

alert( document.frmOne.tb1.value );

}

Tu código HTML debería verse ahora así:

Formateo de cajas de texto con CSS

Todo lo que hace este guión es mostrar un cuadro de alerta emergente. El texto entre el los paréntesis redondos de alerta es este:

document.frmOne.textBox1.value

Comienza con la palabra documento , que se refiere a la página web actual que se muestra en la ventana de su navegador. A continuación, escriba el nombre del formulario (frmOne), seguido del nombre del elemento de forma (textBox1). Finalmente, se escribe el atributo a la que intentas acceder. Para nosotros, este es el VALOR que se escribe en el texto caja llamada textBox1 .

Guarda tu trabajo y actualiza la página en tu navegador. Haz clic en tu nuevo botón (que se verá exactamente como el anterior). Lo que sea que tengas en el cuadro de texto debería aparecer en una casilla de alerta. Aquí están los resultados en Internet Explorer:

Formateo de cajas de texto con CSS

El navegador web Firefox muestra el siguiente cuadro de alerta:

Formateo de cajas de texto con CSS

Ejercicio
Elimina el texto predeterminado. Escriba algo más en su cuadro de texto, luego presione el botón de envío. Debería encontrar las nuevas pantallas de texto en su casilla de alerta.

En la próxima lección, verá cómo agregar etiquetas a los cuadros de texto y cómo botones de forma de estilo.

| Etiquetas, áreas de texto |