Hojas de Estilo en Cascada (CSS) Código se utiliza a menudo para dar formato al texto y bloques de contenido en las páginas web, pero muchos otros elementos HTML pueden ser abordados por código CSS también. Elementos de la interfaz que se utilizan para solicitar información de un usuario en un formulario de contacto, tales como campos de texto, botones, casillas de verificación y menús desplegables, pueden ser estilizadas con CSS también. Utilice clases CSS para dar formato a los diferentes elementos en su formulario HTML.

Instrucciones

1

Cambiar el tamaño de elementos de la interfaz de contacto formulario con los propiedades de "altura" "width" y. Por ejemplo, agregue el código siguiente entre las etiquetas "cabeza" de su documento HTML:

<Style type = "text / css">

.bigbutton {

width: 100px;

altura: 50px;

}

</ Style>

Asignar un botón de envío a la clase "bigbutton" para que sea grande:

<Input type = "submit" class = "bigbutton" value = "Big Button" />

Este botón grande hace que su forma más conveniente para los usuarios con discapacidad visual. Aumentar el tamaño de las entradas de texto utilizados para recopilar nombres, direcciones, direcciones de correo electrónico y números de teléfono, así que los usuarios puedan leer sus entradas con mayor facilidad. Es más fácil para estilizar componentes específicos de formulario utilizando un selector de clase que el anterior, porque la mayoría de ellos son elementos "de entrada", y un selector de tipo afectaría a todos. Utilice "auto" para el "ancho" o "altura" valor de la propiedad para escalar automáticamente esa dimensión.

2

Cambiar el color de fondo de los elementos de formulario con la propiedad "background". Agregue el código siguiente entre las etiquetas "estilo" en la sección de la cabeza:

.red {

fondo: MistyRose;

}

Puede utilizar cualquiera de los nombres de colores CSS o un valor hexadecimal como "# 00FF00". Dado que los elementos pueden pertenecer a más de una clase, hacer un botón grande con un fondo de color rojo claro con este código:

<Input type = clase "botón" = "bigbutton roja" value = "Big Red Button" />

Rojo es útil para indicar partes importantes de su forma, como un campo de número de la seguridad social, mientras que otros colores podrían indicar campos opcionales. Entradas de texto, los elementos "textarea", "seleccionar" elementos "Opciones" elementos, y los elementos de "forma" a sí mismos se ven afectadas por la propiedad "background". Las casillas de verificación y botones de radio no lo son.

3

Añadir bordes y / o esquemas para formar elementos con otra declaración de la clase:

.bordered {

frontera: 2px # 00f000 sólido;

bosquejo: 1px gris discontinua;

}

Las casillas de verificación y botones de radio no tienen fronteras aplicadas a ellos, pero pueden tener contornos. Todos los demás elementos de formulario pueden tener ambas cosas. Consulte W3schools.com para obtener una lista de posibles estilos de borde y de esquema. Utilice las fronteras y los contornos de distinguir más importantes campos del formulario de contacto de los vecinos similares, como los campos de número de teléfono primario y secundario.

4

Cambie las propiedades de la fuente y el estilo de texto para elementos de formulario para completar las personalizaciones. Por ejemplo, agregue la siguiente clase:

.styletext {

font-size: 16px;

text-shadow: 1px 1px gris;

}

Botones, entradas de texto, elementos "textarea" y "seleccionar" elementos pueden tener su texto con estilo de esta manera. También puede utilizar las propiedades como "font-weight", "font-family" y "font-style". Colorea el texto usando la propiedad "color". Un elemento individual "opción" puede haber texto en color diferente que sus vecinos. Pruebe su código en diferentes navegadores web para asegurar que su forma hace correctamente.

Consejos y advertencias

• Otro enfoque para el estilo de su formulario de contacto es la creación de diferentes clases para los diferentes tipos de información solicitados por el formulario. Por ejemplo, cree una clase para el campo de entrada de nombre, uno para el campo de número de teléfono, otra para la dirección de correo electrónico, y así sucesivamente. Cada uno de estos campos es de estilo por una clase diferente, así que por ejemplo, el campo de nombre podría aparecer más grande que los demás o el campo de correo electrónico podría emplear un color diferente.