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.
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
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.
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