Formularios

Creación de un formulario de contacto

El formulario lo vamos a colocar en el fichero 'contacto.html', pero recuperando la base del html anterior (se mantiene el <header>, el <nav>.
y el <footer>).

<!doctype html>
<html>

  <head>
    <meta charset="utf-8"/>
    <title>Contacto</title>
    <link rel=stylesheet href="css/estilos.css" type="text/css"/>
    <style type="text/css">
    </style>
  </head>

  <body>
     <div id="franja"></div>
     <header>
 	<img src="img/logo.png" align="center">
 	 Aprende jugando, S.L.
     </header>

     <nav>
        <ul>
          <li><img src="img/icono1.png" align="top"><p>
              <a href="index.html">Quiénes somos</a></li>
          <li><img src="img/icono2.png" align="top"><p>
              <a href="servicios.html">Servicios</a></li>
          <li><img src="img/icono3.png" align="top"><p>
              Contacto</li>
        </ul>
     </nav>

   <section id="contenido2">
 	 <div id="titulo">
 	      <h2>Contacto</h2>
 	 </div>

 	 <!-- Formulario-->

   </section>

   <div id="franja_final"></div>
   <footer>
 	       &copy;2015. Aprende jugando, S.L.<br>
 	       c/ del Álamo rojo, 1, local. Barcelona.
   </footer>
 </body>
</html>

El texto resaltado en rojo es aquel que cambia respecto al código html de 'index.html'.

Modificamos el <title> de la página.

En el caso del primer elemento (Quiénes somos), como antes no era enlace y ahora sí, le añadimos la etiqueta <a href="index.html"> al principio de Quiénes somos y </a> al final.

En el caso del último elemento (Contacto) pasa lo contrario, en 'index.html' era un enlace, pero ahora no lo tiene que ser, por lo que eliminamos la etiqueta <a href="contacto.html"> que había al principio de Contacto y el </a> que había al final en la versión anterior.

En este caso hemos cambiado el nombre del <section> que contiene todo el contenido ya que necesitaremos cambiarle la anchura.

Modificamos el título que hay justo antes del contenido de la página por (Contacto).

A continuación sustituiremos  por todo el código de la página (en este caso el formulario y un mapa de Google Maps).

El siguiente código sustituye (o va detrás de)  del código anterior.

<!-- Formulario-->

<form action="enviar.php method="post">

  <fieldset>
    <legend>Datos personales</legend>

    Nombre:
    <input type="text"
    name="nombre"
    span class="rojo">size="38"
    autofocus
    autocomplete
    placeholder="Su nombre"
    title="Escriba su nombre para poder
    referirnos a usted correctamente"/><br>

    Correo electrónico:
    <input type="email"
    name="mail"
    size="28"
    required
    autocomplete
    placeholder="nombre@servidor.com"
    title="Escriba su correo electrónico para 
    poder comunicarnos con Ud.lo antes posible"/>
    <br>
  </fieldset>

  <fieldset>
     <legend>Datos del proyecto</legend>

     Breve descripción del proyecto:<br>
     <textarea name="descripcion"></textarea><p>

     Estado actual del proyecto:<br>
     <input type="radio"
     name="proceso"
     value="sinplantear"
     checked/>
     En fase de planteamiento

     <input type="radio"
     name="proceso"
     value="enplanificacion"/>
     En fase de planificación

     <input type="radio"
     name="proceso"
     value="enejecucion"/>
     En ejecución

     <input type="radio"
     name="proceso"
     value="finalizado"/>
     Ya finalizado<p>

     Presupuesto aproximado (en €):  
     <input type="number"
     name="presupuesto"
     value="1000"
     min="150"
     max="30000"
     step="50">
  </fieldset>
	
     <input id="boton_enviar"
     type="submit"
     value="Enviar">

</form>

Con <form ...> definimos el inicio del formulario. Con action="enviar.php" dónde tiene que enviar la información al pulsar el botón "Enviar" y con method="post" el método de envío.

Cada <fieldset> representa un apartado del formulario. y puede tener un título, que se añade con <legend>.

Cada <input..> representa una caja de texto del formulario con sus atributos:

<type> define el tipo de datos que debe introducir el usuario (text, email, password).

<name> define el nombre con el que se pasará los datos a PHP para que éste los envíe.

<size> define la longitud del campo de texto.

<autofocus> indica que cuando se acceda a esta página el cursor estará colocada en dicho campo de texto.

<autocomplete> indica que al escribir en este campo se ofrecerá consejos mostrando contestaciones anteriores.

<placeholder> define el texto que aparecerá escrito en gris en el campo de texto antes de que el usuario escriba algo.

<required> define si el campo de texto será obligatorio.

<title> da información sobre cada campo, tanto para cuando el usuario coloque el cursor encima como cuando se produzca algún error.

Un <textarea> es una gran caja de texto que está destinada a escribir una gran cantidad de texto.

Los <input..> de type="radio" son controles en los que se debe seleccionar una única respuesta de las 4 opciones planteadas.

Cada una de estas opciones se define con un <input type="radio"> diferente que tenga el mismo name="proceso".

El atributo value define el valor que se va a registrar (y enviar) cuando el usuario seleccione cada opción (es invisible para el usuario).

checked indica que este control estará actividado inicialmente.

En fase de planteamiento

El texto que hay detrás (por ejemplo 'En fase de planteamiento') será el que irá detrás del 'radio button' y por lo tanto será el que podrá leer el usuario para saber qué representa cada botón.

En este caso, como hay 4 <input type="radio"> con el mismo name (proceso) están interconectados, ya que representan a la misma pregunta.

Un <input ...> de tipo type="number" permite introducir únicamente datos numéricos a través de una serie de botones (que dependen del navegador).

value define el valor inicial.
min y max definen los valores mínimos y máximos que el usuario podrá seleccionar con los botones.
step define la cantidad de unidades que aumentará o disminuirá cada vez que el usuario pulse uno de los botones del campo de texto.

Antes de continuar con los CSS que van a maquetar los elementos del formulario es necesario comentar que el botón de enviar la información (el último <input>) tiene un id (id="boton_enviar"), ya que le daremos un aspecto diferente al del resto de elementos del formulario.

Únicamente vamos a comentar los selectores CSS y algunas propiedades propias de los formularios, ya que el resto de propiedades ya han sido tratadas en temas anteriores.

estilos.css

#contenido2{
   width:1100px;
   margin:0 auto;
}

form{
   font-size:14px;
   color:#6B121B;
   border-radius:7px;
   background-color:#D4DAE4;
   border:1px dotted #B8BFCB;
   padding:14px;
}

fieldset{
   border-radius:6px;
   border:1px dotted gray;
   margin-bottom:15px;
   padding:0 20px;
}

legend{
   color:gray;
   font-size:13px;
   margin-bottom:16px;
}

input{
   background-color:white;
   border-radius:4px;
   color:#264F96;
   font-size:16px;
   padding:3px 3px 3px 10px;
   outline: none;
}

#boton_enviar{
   padding:6px 30px;
   background-color:#2A477A;
   color:white;
   font-size:14px;
}

#boton_enviar:hover{
   cursor:pointer;
   background-color:#5376B2;
}

textarea{
   width:450px;
   height:50px;
   max-width:493px;
   min-width:300px;
   max-height:200px;
   min-height:50px;
   margin-top:4px;
   border-radius:4px;
   color:#264F96;
   font-size:16px;
   padding:3px 3px 3px 10px;
}

[required]{
   border-color:#4AA248;
   box-shadow:0 0 3px #4AA248;
}

:invalid{
   border-color:#FF7F7F;
   box-shadow:0 0 3px #FF7F7F;
}

contenido2 es la caja (o div) que agrupa a todo el contenido de la página de contacto. Como ésta tiene una anchura diferente a los 980 píxeles que tiene el contenido de 'index.html' se ha utilizado un nombre de id diferente (#contenido2).

El selector form{ agrupa a todo los elementos que hay dentro del formulario, aunque luego podamos dar propiedades a cada uno de los elementos del formulario por separado.

fieldset{ abarca a cada uno de los dos apartados (Datos personales y Datos del proyecto).

Con legend{ podemos indicar cómo se mostrará el texto de la leyenda de cada fieldset.

Con input{ podemos indicar cómo se mostrarán los textos que hay dentro de los diferentes campos de texto en los que el usuario tiene que introducir datos. Incluido el botón de "Enviar", pero excluyendo el <textarea>.

outline: none; elimina el halo o el borde de color del cada campo de texto (input) cuando lo seleccionamos para escribir cualquier dato.

Como al botón de enviar le hemos dado un nombre de id (<input id="boton_enviar"...>) le podemos dar unas propiedades únicas a través del selector #boton_enviar{.

Para que cuando el usuario coloque el cursor encima del botón de Enviar, éste cambie de color y de cursor utilizamos el selector #boton_enviar:hover{.

cursor: pointer; Cambia la forma del cursor, pasando a ser la mano con el dedo levantado, cuando el usuario pasa el cursor por encima del botón de enviar.

Para modificar las características del <textarea> utilizamos el selector textarea{, con las siguientes propiedades interesantes:

Con width y height definimos la anchura y altura inicial del <textarea>.

Si no queremos que el tamaño del <textarea> sea modificable por el usuario podíamos haber utilizado resize: none;, como no es este el caso hemos optado por poner los siguientes límites:

max-width:493px; fija la anchura máxima en 493 píxeles (en el caso de que el usuario haga más grande el <textarea>).

min-width:300px; fija la anchura mínima en 300 píxeles (en el caso de que el usuario haga más pequeño el <textarea>).

max-height:200px; fija la altura máxima en 200 píxeles (en el caso de que el usuario haga más grande el <textarea>).

min-height:450px; fija la altura mínima en 50 píxeles (en el caso de que el usuario haga más pequeño el <textarea>).

[required]{ indica cómo se tienen que mostrar aquellos campos de texto (input) que siendo obligatorios han sido correctamente rellenados.

:invalid{ indica cómo se tienen que mostrar aquellos campos de texto (input) que siendo obligatorios no han sido rellenados, o bien aquellos que no tienen datos correctos..

En la vamos a crear una función (en PHP) para que la información del formulario se envíe a una dirección de correo electrónico.