Aplicaciones Web

IES Augustbriga 2 SMR Aplicaciones Web rmonago

Vamos a crear un formulario elegante utilizando las nuevas

etiquetas de HTML5 y tambin vamos a necesitar la ayuda de
CSS3 para lograr una buena y dinmica apariencia
IES Augustbriga 2 SMR Aplicaciones Web rmonago

En el formulario <form> con una clase para darle un estilo.

Dentro tenemos una lista desordenada <ul> y cada elemento
<li> ser un campo para el formulario, esto lo podemos hacer
con <div>, <p> o tablas, pero en este caso utilizaremos los
tems de la lista <li>.
Especificamos los diferentes tipo de <input> para cada campo,
ejemplo <input type=text> que nos especifica que ese campo
es para una direccin de web, y cada campo lo asociamos con
su respectivo <label>
Para definir todos los campos como requeridos usamos la
propiedad required y por medio de los placeholder de cada
campo especificamos el valor esperado de cada campo de
entrada.
IES Augustbriga 2 SMR Aplicaciones Web rmonago
IES Augustbriga 2 SMR Aplicaciones Web rmonago

<form class="contact_form" action="#" method="post">

<ul>
<li> <h2>Contctanos</h2> </li>
<li> <label for="name">Nombre:</label>
<input type="text" placeholder="Johan Ricardo" required /> </li>

<li> <label for="email">Email:</label>

<input type="email" name="email" placeholder="jricar@ejem.com" required /> </li>

<li> <label for="website">Sitio Web:</label>

<input type="url" name="web" placeholder="http://tutosytips.com" required />
</li>

<li> <label for="Mensaje">Mensaje:</label>

<textarea name="Mensaje" cols="40" rows="6" required ></textarea> </li>

<li> <button class="submit" type="submit">Enviar</button> </li>

</ul>
</form>
IES Augustbriga 2 SMR Aplicaciones Web rmonago

h2
.contact_form h2 {
background: none repeat scroll 0 0 #F3F3F3;
border-radius: 5px;
color: #5CD053;
display: block;
font-family: sans-serif;
font-size: 20px;
padding: 5px;
text-shadow: 1px 1px 1px #CCCCCC;
width: 433px;
}
IES Augustbriga 2 SMR Aplicaciones Web rmonago

.contact_form label { label

color: #555555;
display: inline-block;
float: left;
font-family: sans-serif;
font-size: 13px;
font-weight: bold;
margin-top: 3px;
padding: 3px;
width: 90px;
}
IES Augustbriga 2 SMR Aplicaciones Web rmonago

.contact_form input {
height:20px;
input
width:220px;
padding:5px 8px;
} textarea
.contact_form textarea {
padding:8px;
width:300px;
} button
.contact_form button {
margin-left:90px;
}
IES Augustbriga 2 SMR Aplicaciones Web rmonago

Con el anterior cdigo damos estilos a los <input>,

damos un ancho, alto y padding, de igual manera al
textarea y al botn de enviar la damos un margin left
para posicionarlo.
Ahora daremos un aspecto visual agradable a los
campos de entrada de texto, entre ellos un borde, una
sombra interna por medio de box-shadow inset,
bordes redondeados, padding y una transicin que se
hace con el padding que simula una animacin que
cambia del estado normal a focus, en este estado
cambiamos el background el color del borde y el box-
shadow
IES Augustbriga 2 SMR Aplicaciones Web rmonago

.contact_form input, .contact_form textarea {

border:1px solid #aaa;
box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset;
border-radius:2px;
color: #888;
font-size: 12px;
padding-right:30px; aspecto visual agradable
-moz-transition: padding .25s;
-webkit-transition: padding .25s;
-o-transition: padding .25s;
transition: padding .25s; }

.contact_form input:focus, .contact_form textarea:focus {

background: #fff;
border:1px solid #555;
box-shadow: 0 0 3px #aaa;
padding-right:80px; }
IES Augustbriga 2 SMR Aplicaciones Web rmonago

.contact_form input:required:valid, .contact_form

textarea:required:valid { box-shadow: 0 0 5px #5cd053;
border-color: #28921f; }

.contact_form input:focus:invalid, .contact_form

textarea:focus:invalid {
box-shadow: 0 0 5px #d45252;
border-color: #b03535 ; }
IES Augustbriga 2 SMR Aplicaciones Web rmonago

Establecemos el estilo al botn de envo del formulario entre

ellos damos un degradado a ese botn, sombras en el botn y
en el texto, bordes redondeado entre otros.
Tambin damos los estilos en el estado hover del botn que
es cuando el mouse esta sobre l
Y el estado active que se ejecuta al momento de clickear el
botn.
button.submit {
padding: 9px 17px;
font-family: Helvetica, Arial, sans-serif; Botn dinmico
font-weight: bold;
line-height: 1;
color: #444; button.submit:hover {
border: none; opacity:.55;
text-shadow: 0 1px 1px rgba(255, 255, cursor: pointer;
255, 0.85);
color: #fff; }
background-image: -webkit-
gradient(linear, 0% 0%, 0% 100%,
from(#fff), to(#bbb));
background-image: -moz-linear- button.submit:active {
gradient(0% 100% 90deg, #BBBBBB, border: 1px solid #222;
#FFFFFF); box-shadow: 0 0 10px 5px #444
background-color: #fff; inset;
border: 1px solid #f1f1f1; }
border-radius: 10px;
box-shadow: 0 1px 2px rgba(0, 0, 0,
IES Augustbriga 2 SMR Aplicaciones Web rmonago

Prueba en vivo
http://www.tutosytips.com/wp-content/ejemplos/form-html5-y-css3/index.html

El cdigo
www.tutosytips.com/wp-content/download/form-html5-y-css3.zip