A continuación, asumo que crearás un archivo HTML adicional. En cualquier caso, lo guardo bajo el nombre kontakt.html. El contact.html está al mismo nivel que el index.html que ya conoces.
En esta primera parte, se hacen los ajustes básicos al formulario. Cosas como esquinas redondeadas, gradientes de color, etc. seguirán en el siguiente tutorial.
El formulario se crea dentro de contact.html. El formulario se define dentro del área div con la clase content. A continuación, piense en los campos que desea crear. Yo he decidido solicitar la siguiente información:
- Nombre
- Dirección de correo electrónico
- Comentario
Por supuesto, tiene que decidir usted mismo qué información quiere recopilar. En principio, sin embargo, le aconsejo que sólo pida los datos que realmente necesita. La mayoría de los visitantes de un sitio web rehúyen los formularios extensos. Así que sea breve.
La estructura básica de mi formulario es la siguiente
<div class="content"> <formclass="form" action="#" method="post"> <fieldset> <legend>Contacta con nosotros</legend> <ol> <li> <label for="name">Nombre:</label> <input type="text" name="nombre "id="nombre" value="" /> </li> <li> <label for="email">Dirección de correo electrónico:</label> <input type="text" name="email" id="email "value="" /> </li> <li> <label for="comment">Comentario:</label> <textarea cols="32" rows="7 "name="content" id="content"></textarea> </li> <li class="button"> <liinput type="submit" name="submit "id="submit" value="Enviar" /> </li> </ol> </fieldset> </form> </div>
El formulario no contiene ninguna característica especial. Se ha aplicado una definición fieldset alrededor de los campos del formulario. Ya se ha descrito suficientemente cómo se pueden crear campos de formulario y en qué consisten los elementos de etiqueta. Por lo tanto, en este punto nos concentraremos plenamente en el diseño del formulario.
Si abre el resultado en el navegador, verá inicialmente un formulario que no es especialmente atractivo.
Por supuesto, hay que mejorarlo.
En primer lugar, se proporciona información básica sobre el formulario.
form { padding: 3px 0 0; margin: 10px auto; width: 550px; }
Aquí se define el espaciado exterior e interior. Además, se establece un ancho de 550 píxeles para el formulario.
Continuamos con el diseño del fieldset.
fieldset { padding: 10px 20px 25px; }
El espaciado también se define aquí.
Los propios campos del formulario se crean dentro de una lista ol ordenada.
ol { list-style-type: none; margin: 0; padding: 0; }List-style-type: none; se utiliza para que esta lista no sea reconocible visualmente como una lista. Además, los márgenes y el espaciado interior se establecen en 0.
En el siguiente paso se definen las entradas de la lista. Éstas flotan a la izquierda y tienen un espaciado interior de 10 píxeles.
li { float: left; padding: 10px; }
Hay una característica especial con respecto al botón debajo del formulario. Este debe estar alineado a la derecha.
li.button { float: none; clear: both; text-align: right; }El encabezado del formulario
Centrémonos ahora en el elemento leyenda. Sobre él se define el encabezado del formulario.
La definición del encabezado es la siguiente
fieldset legend { font-weight: bold; font-size: 22px; margin: 20px 0 0 10px; }El etiquetado
Ya se ha encontrado con el elemento label en esta serie. Esta etiqueta puede utilizarse para crear un vínculo lógico entre el etiquetado del campo y el campo real del formulario. Por cierto, aquí hay una característica especial con respecto a la definición CSS.
label { display:block; cursor: pointer; font-weight: bold; line-height: 24px; }
Entre otras cosas, doto al elemento label de una especificación de cursor. Esto indica a los visitantes que se puede hacer clic en las etiquetas de los campos. Si hacen clic en la descripción de un campo, el cursor se coloca automáticamente en el campo correspondiente.
Diseño de los campos del formulario
El siguiente paso consiste en diseñar los campos reales del formulario. En primer lugar, se hacen especificaciones generales para input y textarea.
input, textarea { color: #3399FF borde: 1px sólido #3399FF; fuente: 13px Helvetica, Arial, Serif; padding: 8px 10px; ancho: 190px; }
Se trata exclusivamente de cuestiones de diseño. Hay que prestar especial atención a los marcos. En cuanto se coloca el cursor en un campo, el color del marco cambia. Por cierto, no se trata sólo de un aspecto estético. De hecho, también ayuda a los visitantes a rellenar el formulario. Siempre pueden ver inmediatamente en qué campo se encuentra el cursor.
He aquí algunos detalles sobre el campo de entrada de texto multilínea.
textarea { width: 430px; overflow: auto; }
La anchura de este campo es de 430 píxeles. La instrucción overflow: auto en relación con los campos de entrada multilínea puede parecer algo extraña a primera vista. Esta línea se debe a versiones antiguas de Internet Explorer. Este navegador mostraba barras de desplazamiento en los campos de entrada multilínea incluso cuando esto no era realmente necesario. Este problema de belleza puede evitarse con overflow: auto.
Diseño del botón Enviar
Por el momento, el botón Enviar no tiene ningún adorno. Esto cambiará ahora. El resultado tendrá este aspecto:
Se asignan varias propiedades al botón.
- Color de fondo
- Aspecto de la fuente
- Borde
- Espaciado
La sintaxis CSS correspondiente es la siguiente:
input[type="submit"] { background-color: #3399FF; color: #fff; cursor: pointer; font: bold 1em/1.2 Georgia, "Times New Roman ", serif; border: 1px solid #000; padding: 5px 10px; width: auto; }
Quizá también merezca la pena mencionar aquí la especificación input[type="submit"]. Este selector se utiliza para acceder a elementos de entrada que tienen la combinación atributo-valor type="submit".
