El documento describe cómo crear un formulario elegante utilizando etiquetas HTML5 y CSS3. Se crea un formulario con una clase de estilo dentro de una lista desordenada, con campos como nombre, correo electrónico, sitio web y mensaje. Se agregan estilos a los campos, etiquetas, botón y estados como foco y envío para lograr una apariencia atractiva y dinámica.

1. Aplicaciones Web

2. IES Augustóbriga – 2º SMR – Aplicaciones Web rmonago
 Vamos a crear un formulario elegante utilizando las nuevas
etiquetas de HTML5 y también vamos a necesitar la ayuda de
CSS3 para lograr una buena y dinámica apariencia

3. IES Augustóbriga – 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 dirección 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.

4. IES Augustóbriga – 2º SMR – Aplicaciones Web rmonago

5. IES Augustóbriga – 2º SMR – Aplicaciones Web rmonago
<form class="contact_form" action="#" method="post">
<ul>
<li> <h2>Contáctanos</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>

6. IES Augustóbriga – 2º SMR – Aplicaciones Web rmonago
.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;
}
h2

7. IES Augustóbriga – 2º SMR – Aplicaciones Web rmonago
.contact_form 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;
}
label

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

9. IES Augustóbriga – 2º SMR – Aplicaciones Web rmonago
 Con el anterior código damos estilos a los <input>,
damos un ancho, alto y padding, de igual manera al
textarea y al botón 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 transición que se
hace con el padding que simula una animación que
cambia del estado normal a focus, en este estado
cambiamos el background el color del borde y el box-
shadow

10. IES Augustóbriga – 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;
-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; }
aspecto visual agradable

11. IES Augustóbriga – 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 ; }

12. IES Augustóbriga – 2º SMR – Aplicaciones Web rmonago
 Establecemos el estilo al botón de envío del formulario entre
ellos damos un degradado a ese botón, sombras en el botón y
en el texto, bordes redondeado entre otros.
 También damos los estilos en el estado hover del botón que
es cuando el mouse esta sobre él
 Y el estado active que se ejecuta al momento de clickear el
botón.

13. button.submit {
padding: 9px 17px;
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
line-height: 1;
color: #444;
border: none;
text-shadow: 0 1px 1px rgba(255, 255,
255, 0.85);
background-image: -webkit-
gradient(linear, 0% 0%, 0% 100%,
from(#fff), to(#bbb));
background-image: -moz-linear-
gradient(0% 100% 90deg, #BBBBBB,
#FFFFFF);
background-color: #fff;
border: 1px solid #f1f1f1;
border-radius: 10px;
box-shadow: 0 1px 2px rgba(0, 0, 0,
button.submit:hover {
opacity:.55;
cursor: pointer;
color: #fff; }
button.submit:active {
border: 1px solid #222;
box-shadow: 0 0 10px 5px #444
inset;
}
Botón dinámico

14. IES Augustóbriga – 2º SMR – Aplicaciones Web rmonago
 Prueba en vivo
http://www.tutosytips.com/wp-content/ejemplos/form-html5-y-css3/index.html
 El código
www.tutosytips.com/wp-content/download/form-html5-y-css3.zip