21 noviembre 2010

Ejemplo de formulario

Para esta entrada he creado un pequeño formulario que es una encuesta sencilla que solo te pide el nombre, el sexo, y luego te hace dos preguntas, en una de ellas te da las opciones de respuesta en forma de radio botones y en la segunda están las respuestas posibles en una caja desplegable.

<html>
<head>
 <title>Formulario</title>
 <link href="estilo-form.css" rel="stylesheet" type="text/css"/>
</head>
<body onload = "document.forms[0][\'foco\'].focus()">
<div id="entrada">
 <h2>Encuesta</h2>
 <form name="acceso" action="mailto:cuenta@dominio.com" method="post">
 <p>
  Nombre:
  <input class="box" type="text" name="nombre" maxlength="20" id="foco"/><br/>
  <input type="radio" name="sexo" value="Hombre"/>Hombre
  <input type="radio" name="sexo" value="Mujer"/>Mujer
  <br /><br/>
  <b>&#191;Qu&eacute; fruta te gusta m&aacute;s?</b><br />
  <input type="radio" name="fruta" value="Mango"/>Mango<br/>
  <input type="radio" name="fruta" value="Naranja"/>Naranja<br/>
  <input type="radio" name="fruta" value="Manzana"/>Manzana<br/>
  <br />
  <b>&#191;Cu&aacute;l es tu color preferido?</b><br />
  <select name="color">
    <option>Selecciona</option>
    <option value="Azul">Azul</option>
    <option value="Verde">Verde</option>
    <option value="Amarillo">Amarillo</option>
    <option value="Rosa">Rosa</option>
  </select><br />
  <br />
  <input class="boton" type="submit" value="Enviar"/>
 </p>
 </form>
</div>
</body>
</html>

Los datos de la encuesta en este caso como lo observamos dentro de la etiqueta form van dirigidos a una dirección de correo, pero también podríamos mandarlos a un script que los guarde en alguna base de datos.

Y también le he añadido un CSS para darnos cuenta que también es posible aplicar un estilo diferente al predeterminado, a las cajas de texto y los botones.

#entrada {
 margin: 0px auto;
 width: 300px;
 border: 1px solid #336699;
 font-size: 12px;
}
#entrada h2 {
 height: 30px;
 margin: 0px;
 background: #116855;
 color: #FFFFFF;
 text-align: center;
 font-family: Arial, Helvetica, sans-serif;
 font-weight: bold;
 font-size: 1.8em;
}
#entrada p {
 margin: 0px;
 padding: 10px;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 15px;
 color: #787878;
}
.box {
 border: 1px solid #E9851D;
 font-family: Arial;
 font-size: 15px;
}
.boton {
 font-weight: bold;
 font-size: 14px;
 color: #FFFFFF;
 background: #DF7401;
 width: 100;
 height: 25px;
 border: 1px #003399 solid;
}

La siguiente imagen muestra como se ve el formulario desde un navegador web, en mi caso use Google Chrome para mostrarles el ejemplo.


Espero sea de ayuda a aquellos que empiezan a crear este tipo de páginas web con formularios.

1 comentario: