Tutorial Crear Formulario HTML5

Contctanos

Nombre:

Email:

Sitio Web:

Mensaje:

Enviar

y cada elemento

ser un campo para el formulario, esto lo podemos hacer con,o tablas, pero en este caso utilizaremos los tems de la lista

. Especificamos los diferentes tipo depara cada campo, ejemploque nos especifica que ese campo es para una direccin de web, y cada campo lo asociamos con su respectivopara definirlo todos los campos son requeridos por que tienen la propiedad required y por medio de los placeholder de cada campo especificamos el valor esperado de cada campo de entrada. Bsicamente el cdigo de un formulario html5 bsico.

Esto es lo que llevamos al momento.

2 El Css1

2

3

4

5

6

7

8

9

10

11.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;}

Este cdigo css fue para darle un poco de estilo al ttulo h2 que est dentro del formulario.

1

2

3

4

5

6

7

8

9

10

11

12/*--- estilos para los ul y li del formulario ---*/.contact_form ul {width:750px;list-style-type:none;margin:0px;padding:0px;}.contact_form li{padding:12px; border-bottom:1px solid #eee;position:relative;}

Aplicamos los estilos para los

y

del formulario que son los contenedores de cada campo con su label, damos una anchura a la lista y quitamos los margin y padding y de igual posicionamos los tems

y colocamos bordes debajo de cada

.

1

2

3

4

5

6

7

8

9

10

11.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;}

estilos para los lebel da cada

1

2

3

4

5

6

7

8

9

10

11

12.contact_form input {height:20px; width:220px; padding:5px 8px;}.contact_form textarea {padding:8px; width:300px;}.contact_form button {margin-left:90px;}

Con el anterior cdigo damos estilos a los , damos un ancho, alto y padding, de igual manera al textarea y al botn de enviar la damos un margin left para posicionarlo.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19/*----- estilos visuales de los elementos --------*/.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;}

Con los estilos anteriores damos 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.

1

2

3

4

5

6

7

8

9

10/* === Estilos de Validacion === */

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

con el cdigo anterior lo que hacemos es darle las propiedades a los diferentes estados de los campos de entrada, el primero es verde y se coloca cuando hay informacin y es vlida, esto va de acuerdo al tipo de entrada del campo, y se coloca rojo cuando est en estado focus o la entrada es invalida.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25/* === Estilos del boton de Envio === */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, 0.5);}button.submit:hover {opacity:.55;cursor: pointer; color: #fff;}button.submit:active {border: 1px solid #222;box-shadow: 0 0 10px 5px #444 inset; }

Y por ultimo damos los estilos 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.

Y eso es todo, claro podemos seguir embelleciendo este sencillo formulario con las nuevas caractersticas de CSS3, pero lo importante es tener bases para hacer cosas que necesitemos, que nos ayuden y nos despierten la curiosidad para hacer cosas mejores.

Ver el ejercicio Realizado en vivoDescarga el codigo completo del ejecicio

Ver la parte 2 de este tutorial enviar formulario:http://www.tutosytips.com/tutorial-2-enviar-formulario-de-contacto-en-html5-con-php/- See more at: http://www.tutosytips.com/tutorial-formulario-de-contacto-en-html5-y-css3/#sthash.HZ48H0M4.dpufFormulario de contacto Creativo Html5, Css, JavaScript y Php / parte #1

5PorJohansoEn mayo 30th, 2013

digg 10EmailShareEn este tutorial vamos a comenzar el proceso de creacin de un completo formulario de contacto, maquetado enHTML, estilizado conCSS, verificamos los datos o validamos los datos conJAVASCRIPTy por ltimos lo procesamos conPHP.En un tutorial pasado realizamos un formulario de contacto bsico pero muy funcional (tutorial-formulario-de-contacto-en-html5-y-css3), esta vez vamos a ser un poco mas creativo y vamos a utilizar tcnicas un poco mas avanzada para realizarlo.

Esto es lo que vamos a conseguir:

Ver el ejercicio Realizado en vivoPara una buena visualizacin de este formulario:

Ok, vamos a comenzar.

El HTML

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

Nombre (requerido)

Email (requerido)

Asunto

Mensaje (requerido)

En el cdigo anterior vemos el formulario tradicional, muy sencillo y fcil para entenderlo, tenemos las etiqueta, losy los, dentro de los label tenemos la etiquetapara mostrar el titulo de requerido, tenemos la etiquetadefiniendo el tipo de entrada con el nombre identificativo del campo y le aadimos una clase para darle estilos, igual para el , adicionalmente dividimos el formulario en 2 columnas por medio deen lado vamos a dejar los campos de nombre, email y asunto, y en la otra columna el campo de texto para el mensaje y fuera de las columnas el botn de enviar con una claseclass=form-btn.

Seguimos con el CSS

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37.contact-form {width: 846px;padding: 15px;margin: 0 auto;position: relative;background-color: #ffffff;background-image: -webkit-gradient(linear, left top, right bottom, color-stop(5%, #bfd1E7), color-stop(5%, #ed5737),color-stop(15%, #ed5737), color-stop(15%, #bfd1E7),color-stop(25%, #bfd1E7), color-stop(25%, #2f57b7),color-stop(35%, #2f57b7), color-stop(35%, #bfd1E7),color-stop(45%, #bfd1E7), color-stop(45%, #ed5737),color-stop(55%, #ed5737), color-stop(55%, #bfd1E7),color-stop(65%, #bfd1E7), color-stop(65%, #2f57b7),color-stop(75%, #2f57b7), color-stop(75%, #bfd1E7),color-stop(85%, #bfd1E7), color-stop(85%, #ed5737),color-stop(95%, #ed5737), color-stop(95%, #bfd1E7));background-image: -webkit-repeating-linear-gradient(135deg, #ed5737 0, #ed5737 50px, transparent 50px, transparent 80px, #2f57b7 80px, #2f57b7 130px, transparent 130px, transparent 160px);background-image: -moz-repeating-linear-gradient(135deg, #ed5737 0, #ed5737 50px, transparent 50px, transparent 80px, #2f57b7 80px, #2f57b7 130px, transparent 130px, transparent 160px);background-image: -ms-repeating-linear-gradient(135deg, #ed5737 0, #ed5737 50px, transparent 50px, transparent 80px, #2f57b7 80px, #2f57b7 130px, transparent 130px, transparent 160px);background-image: -o-repeating-linear-gradient(135deg, #ed5737 0, #ed5737 50px, transparent 50px, transparent 80px, #2f57b7 80px, #2f57b7 130px, transparent 130px, transparent 160px);background-image: repeating-linear-gradient(135deg, #ed5737 0, #ed5737 50px, transparent 50px, transparent 80px, #2f57b7 80px, #2f57b7 130px, transparent 130px, transparent 160px);-pie-background: linear-gradient(135deg, #bfd1E7 5%, #ed5737 5%,#ed5737 15%, #bfd1E7 15%,#bfd1E7 25%, #2f57b7 25%,#2f57b7 35%, #bfd1E7 35%,#bfd1E7 45%, #ed5737 45%,#ed5737 55%, #bfd1E7 55%,#bfd1E7 65%, #2f57b7 65%,#2f57b7 75%, #bfd1E7 75%,#bfd1E7 85%, #ed5737 85%,#ed5737 95%, #bfd1E7 95%);behavior: url(PIE.htc);text-align: left;

}

Aplicamos los estilos al contenedor principal del formulario, le damos un ancho, padding un fondo blanco y en background-image le aplicamos un degradado lineal que podemos conseguir ya sea escribiendo el cdigo o utilizando unaherramienta para generar css3 online, lo generamos para los diferentes navegadores y utilizamos el PIE.htc para lograr compatibilidad con IE versin 8 y alineamos el texto a la izquierda.

1

2

3

4

5.formulario {overflow: hidden;padding: 40px 20px;background-color: #fff;}

Clase para el subcontenedor del formulario.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27.form-input {display: block;height: 24px;padding: 6px 10px;margin-bottom: 20px;font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;border-radius: 8px;-moz-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.7), 0 1px 0 rgba(255, 255, 255, 0.1);-webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.7), 0 1px 0 rgba(255, 255, 255, 0.1);box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.7), 0 1px 0 rgba(255, 255, 255, 0.1);background-color: #646464;-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.7);-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.7);box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.7);behavior: url(PIE.htc);width: 320px;background: #ededed;border: 5px solid #dbdbdb;color: #999;position: relative;}textarea.form-input {height: 200px;overflow: auto;width: 380px; position: relative;}

Estilos para los diferentes, aplicamos sombras, redondeamos los bordes y utilizamosPIE.htcpara las versiones de IE antiguas le damos ancho y alto, color de fondo y color de texto etc.

1

2

3

4

5

6

7

8label {color: #444;font-size: 15px;}label span {color: #ff4141;font-size: 11px;}

Estilos para los labels, le damos un color y tamao, y losque estan en los labels, que es el texto que dice requerido lo colocamos de color rojo y un poco mas pequeo.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17.form-btn {padding: 0 15px;height: 30px;font: bold 12px 'Helvetica Neue', Helvetica, Arial, sans-serif;text-align: center;color: #fff;text-shadow: 0 1px 0 rgba(0, 0, 0, 0.7);cursor: pointer;border: 1px solid #0d3d6a;background-color: #2F57B7;clear: both;float: right;}.form-btn:hover {color: #8598C6;text-shadow: 0 1px 0 rgba(0, 0, 0, 0.7);}

Estilos para el botn de enviar y tambin aplicamos los estilos para su estado hover, es decir cuando me site sobre el.

1

2

3

4

5

6

7

8.column:first-of-type {float: left;position: relative;}.column:last-of-type {float: right;margin: 0 0 20px 40px;}

Estilos para definir las 2 columnas con first-of-type y last-of-type lo que hacemos es ubicarlas con el float y a la ultima le aplicamos mrgenes.

Esto es lo que hicimos:

Click para ampliar

- See more at: http://www.tutosytips.com/formulario-de-contacto-creativo-html5-css-javascript-y-php/#sthash.zGCaLxyO.dpufElegante men Vertical tipo Slider con transiciones de CSS3

10PorJohansoEn octubre 30th, 2012

digg 14EmailShareBienvenidos a otro Workshop de HTML Y CSS En esta oportunidad vamos a crear otro men tipo slider con efectos de transicin de css3 (Otros Ejercicios de men con propiedades de CSS3:men 1men 2), un ejercicio donde crearemos un hermoso men que a la vez es muy prctico, muy sencillo y fcil para usar en algunos de nuestros proyectos.

Esto es lo que vamos a conseguir, el resultado de nuestro ejercicio de hoy:

Para una perfecta Visualizacin utiliza estos navegadores en sus respectivas versiones:

Vamos a comenzar!!.

EL HTML

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

HTML5HTML5HTML5 establece una serie de nuevos elementos y atributos que reflejan el uso tpico de los sitios web modernos. Algunos de ellos son tcnicamente similares a las etiquetas Leer Mas...

CSS3CSS3CSS tiene una sintaxis muy sencilla, que usa unas cuantas palabras claves tomadas del ingls para especificar los nombres de sus selectores, propiedades y atributos.Leer Mas...

PHPPHPPHP es un lenguaje de programacin de uso general de script del lado del servidor originalmente diseado para el desarrollo web de contenido dinmico.Leer Mas...

MySQLMySQLMySQL es un sistema de gestin de bases de datos relacional, multihilo y multiusuario con ms de seis millones de instalaciones.Leer Mas...

JQueryJQueryQuery es una biblioteca de JavaScript, creada inicialmente por John Resig,que permite simplificar la manera de interactuar con los documentos HTMLLeer Mas...

En el cdigo html bsicamente tenemos un div contenedor, luego una lista desordenada

en ella su respectivo tem

y el enlaceque al situarnos sobre el desplegara una accin, se despliega elinterior que a su vez tiene un titulo, un prrafoque es el texto de introduccin y dentro de un prrafotenemos el enlace a ver mas. Esto es todo lo que tenemos en el cdigo html, Fcil cierto.seria mas o menos algo asi:

EL CSS

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107#slider {height: 280px;}#slider ul:before {background: rgb(0,153,153); /* Old browsers */background: -moz-linear-gradient(left, rgb(0,153,153) 0%, rgb(74,153,153) 66%, rgb(106,183,182) 86%, rgb(0,153,153) 99%); /* FF3.6+ */background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgb(0,153,153)), color-stop(66%,rgb(74,153,153)), color-stop(86%,rgb(106,183,182)), color-stop(99%,rgb(0,153,153))); /* Chrome,Safari4+ */background: -webkit-linear-gradient(left, rgb(0,153,153) 0%,rgb(74,153,153) 66%,rgb(106,183,182) 86%,rgb(0,153,153) 99%); /*Chrome10+,Safari5.1+ */background: -o-linear-gradient(left, rgb(0,153,153) 0%,rgb(74,153,153) 66%,rgb(106,183,182) 86%,rgb(0,153,153) 99%); /* Opera 11.10+ */background: -ms-linear-gradient(left, rgb(0,153,153) 0%,rgb(74,153,153) 66%,rgb(106,183,182) 86%,rgb(0,153,153) 99%); /* IE10+ */background: linear-gradient(to right, rgb(0,153,153) 0%,rgb(74,153,153) 66%,rgb(106,183,182) 86%,rgb(0,153,153) 99%); /* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#009999', endColorstr='#009999',GradientType=1 ); /* IE6-8 */

border-radius: 30px 0 0 30px;box-shadow: 3px 3px 2px rgba(0, 0, 0, 0.65);content: "";height: 100%;margin-top: -40px;position: absolute;width: 182px;z-index: 100;}#slider ul {list-style: none outside none;margin-left: 10px;margin-top: 10px;padding: 40px 0;position: relative;width: 182px;}#slider ul li {height: 40px;width: 182px;}

#slider ul li a.menudesplieg {border-bottom: 1px solid #00CFCA;color: white;display: block;font-family: 'Trebuchet MS';font-size: 1.6em;font-style: italic;letter-spacing: -1px;padding-left: 22px;position: absolute;text-decoration: none;text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);width: 160px;z-index: 110;}#slider ul li div {background: none repeat scroll 0 0 rgba(0, 0, 0, 0.6);border-radius: 0 15px 15px 0;color: white;height: 266px;left: 0;opacity: 0;overflow: hidden;padding: 0 15px 15px;position: absolute;top: 0;transition: 1s left,1s width,1s opacity;-webkit-transition: 1s left,1s width,1s opacity;-moz-transition: 1s left,1s width,1s opacity;-o-transition: 1s left,1s width,1s opacity;width: 152px;z-index: 50;}#slider ul li:hover div {background: none repeat scroll 0 0 rgba(0, 0, 0, 0.6);left: 182px;opacity: 1;width: 276px;}

#slider ul li div h5 {border-bottom: 1px solid #888;color: #009999;font-family: trebuchet ms;font-size: 2.5em;margin: 0 0 5px;text-align: center;}#slider ul li div p {font-family: trebuchet ms;font-size: 1em;font-style: italic;font-weight: normal;overflow: hidden;padding-top: 15px;width: 276px;}#slider ul li div p.desplieg {float: right;}#slider ul li div p.desplieg a {background: none repeat scroll 0 0 #FFFFFF;border-radius: 8px 8px 8px 8px;color: #009999;display: inline-block;font-size: 15px;font-weight: bold;height: 18px;margin: 10px 0;padding: 4px;text-decoration: none;}

El cdigo css que generamos tambin es muy intuitivo y fcil de comprender, pero hare referencia a algunas propiedades. En el div #slider ul:before que es la parte que nos mostrara los enlaces, damos algunas propiedades importantes, por ejemplo el Gradient o degradado, para eso utilizamos una herramienta generadora de css onlinehttp://www.colorzilla.com/gradient-editor/para hacer este trabajo, y lo generamos para los distintos navegadores. Y la propiedad de transicin que nos hace este trabajo elegante se la aplicamos alque se encuentra dentro del tem

de la lista

del, igualmente generamos el cdigo transition para los diferentes navegadores segn su prefijo. Lo dems es cdigo css de posicionamiento y para hacer la parte visual muy agradable.

Adicionalmente te recomiendo adjuntar o incluir el cdigo reset css dehttp://meyerweb.com/eric/tools/css/reset/o algun otro codigo css para resetear los css de los diferentes navegadores para tener un mejor control de nuestro ejercicio.Esto es todo por este ejercicio, pero se puede crear mas, aumentar su funcionalidad pero ya lo dejo a tu imaginacin.

- See more at: http://www.tutosytips.com/elegante-menu-vertical-tipo-slider-con-transiciones-de-css3/#sthash.lmmYBYKq.dpufhttp://www.tutosytips.com/10-plugins-utiles-menus-en-jquery/

Tutorial Crear Formulario HTML5

Documents

Transcript of Tutorial Crear Formulario HTML5