Ofimática: CSS: Formulario con estilo

Esta entrada la voy a dedicar a hablar sobre los formularios en HTML, que son y como darle un aspecto visual agradable sin usar tablas ni APIS. Los formularios HTML nos ayudan a aumentar la interactividad de nuestra Web y nos permiten recibir información de los usuarios que la visitan, estos están compuestos por controles. Las principales etiquetas de un formulario es <form> que encierra todos los contenidos del formulario, ya sean botones, cuadros de texto, listas desplegables, la etiqueta <input> que permite definir varios tipos de elementos y la etiqueta <button>. Dentro de la etiqueta <form> encontramos dos atributos:

El atributo "action" indica la URL de la aplicación del servidor que se encarga de procesar los datos introducidos por los usuarios, además, esta aplicación también se encargará de generar la respuesta que muestra el navegador.
El atributo "method" establece la forma en la que se envían los datos del formulario al servidor. Este atributo hace referencia al método HTTP, por lo que no es algo propio de HTML. Los dos valores que se utilizan en los formularios son GET y POST.

Como ya he dicho el elemento "input" inserta uno de muchos tipos de controles en un formulario, el tipo de control mostrado depende del atributo "type" que puede tomar diez valores distintos, algunos de ello son:

text: Usado para mostrar entrada de texto.
password: Este control trabaja de manera exacta a los controles de tipo "text", con la excepción de que oculta visualmente los caracteres ingresados reemplazándolos por puntos o asteriscos.
checkbox: Este control permite a los usuarios cambiar entre dos valores: marcado y no marcado.
radio: Estos trabajan de forma muy similar a los anteriores, la diferencia radica en la exclusividad, ya que no pueden estar marcados los que contengan el mismo valor.

Antes para agregar un botón a nuestro formulario se usaba la etiqueta <input> indicándole que fuera de tipo botón, pero actualmente disponemos de la etiqueta <button> que dispone de más opciones, como usar una imagen de botón, algunos atributos de este control pueden ser:

submit: Es un botón de envío, el cual envía automáticamente el contenido del formulario a la página que procesará la información.
reset: Cuando es presionado, lleva la información en todos los controles del formulario a sus valores iniciales.
button: Este tipo de control crea un botón regular (que luce igual a los botones submit y reset) que, a diferencia de los anteriores, no tiene ninguna acción asociada predeterminada.

Otros elementos usados en los formularios, concretamente en el que vamos a ver más abajo son:

textarea: Con este control los usuarios podrán introducir texto en una o más líneas.
select: Para insertar menú y listas desplegables

Después de esta pequeña introducción, vamos a ver un ejemplo con los controles visto anteriormente, pero le vamos a dar un aspecto visual agradable, como dije antes, sin el uso de tablas. El aspecto del formulario sería:

Lo mejor es ver el código fuente, pero antes voy a explicar un poco los pasos realizados. He creado un "div" con "id=formulario" para poder darle unas características concretas, por ejemplo "sombra". Luego le he dado un estilo a los "label" como puede ser un tamaño fijo a todos por igual. Seguidamente he creado una clase ".input" para darle formato a los controles input, en este caso darles la misma apariencia, al igual que con "textarea". He echo lo mismo para los botones, crearles una clase y un "id" para poder configurarlos en todos sus aspectos de diseño y movilidad como por ejemplo centrarlos. También he creado un "hover" y "focus" para los campos donde hay que ingresar texto, para darle un aspecto distinto cuando se está actuando con ellos. Para terminar indicar que con el atributo "linear-gradient" sirve como su nombre indica para crear degradados de colores, aunque ya hablaré en otra entrada sobre ello, ya que hay que especificar unas etiquetas para representar a cada navegador.


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Title</title>

<style type="text/css">

body {
    font-family: Verdana, Arial, sans-serif;
    font-size: 100%;
    background-color: #000000;
}

#formulario{
    position:relative;
    margin:0 auto;
    background-color:#D8D8D8;
    width:700px;
    padding:2px 2px 2px 10px;
    border-style:solid;
    border-width:1px;
    border-radius:5px;
    box-shadow: 5px 10px 30px #358077;
}

label {
    background-color: #BDBDBD;
    display: block;
    float: left;
    font-size: 13px;
    font-weight: bold;
    height: 24px;
    margin: 0 10px 0 0;
    padding: 5px 2px 0px 5px;
    width: 150px;
  
}

.input {
    background-color: #F3F3F3;
    border: 1px solid #CCCCCC;
    height: 30px;
    padding: 7px;
    width: 200px;
}

textarea {
    background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
    height: 200px;
    padding: 7px;
    width: 435px;
    border-radius:10px;
    font-family: Arial;
}
textarea:hover, textarea:focus, textarea:visited, input:hover, 
input:focus, input:visited, select:hover {
    color: #435266;
    background: #EFDFB6;
    border: 1px inset #600;
    cursor: pointer;
}

.select {
    background-color: #F3F3F3;
    border: 1px solid #CCCCCC;
    height: 32px;
    padding: 4px;
    width: 435px;
}

.buton{
    border: 1px solid #DBE1EB;
    font-size: 18px;
    font-family: Arial, Verdana;
    padding-left: 7px;
    padding-right: 7px;
    padding-top: 5px;
    padding-bottom: 5px;
    border-radius: 4px;
    background: #A4A4A4;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    -o-border-radius: 4px;
    background: linear-gradient(left, #A4A4A4, #585858);
    background: -moz-linear-gradient(left, #A4A4A4, #585858);
    background: -webkit-linear-gradient(left, #A4A4A4, #585858);
    background: -o-linear-gradient(left, #A4A4A4, #585858);
    color: #000000;

}
   
.buton:hover
{
    background: #365D9D;
    color: #000000;
    border-color: #000000;
    background: linear-gradient(left, #365D9D, #436CAD);
    background: -moz-linear-gradient(left, #365D9D, #436CAD);
    background: -webkit-linear-gradient(left, #365D9D, #436CAD);
    background: -o-linear-gradient(left, #365D9D, #436CAD);
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    -o-border-radius: 4px;
    cursor: pointer;
}

h1{
    width:auto;
    text-align: center;
    color: #000000;
}

#boton{
    margin-left: 250px;
    width:200px;
}

</style>
</head>
<body>
<div id="formulario">
<form id="form" method="post" action="mipagina.php">
<h1>Formulario de sugerencias</h1>

<p><label>Nombre:</label>
<input type="text" name="name" class="input"></p>
<label>Password:</label>
<p><input type="password" name="password" class="input"></p>

<p><label>Consulta:</label>
<textarea class="textarea"></textarea></p>

<p><label>Provincia:</label>
<select name="provincia" class="select">
<option value="">- selecciona -</option>
<option value="1">A coru&#241;a</option>
<option value="2">&#193;lava</option>
<option value="3">Albacete</option>
<option value="4">Alicante</option>
</select></p>

<p>Marca la casillla si has leido las condiciones:
<INPUT type="checkbox" name="chk" value="condiciones"></p>
<p>Tipo de respuesta deseada:
<INPUT type="radio" name="respuesta" value="mail">Mail
<INPUT type="radio" name="respuesta" value="sms">SMS
<INPUT type="radio" name="respuesta" value="wasap">Whatsapp</p>

<div id="boton">
<button type="submit" class="buton">Enviar</button>
<button type="reset" class="buton">Limpiar</button
</div>

</form>
</div>

</body>
</html>

viernes, 9 de mayo de 2014

CSS: Formulario con estilo