Scribd Logo
Upload

Welcome to Scribd!

  • Tutorial Crear Formulario HTML5

    Uploaded by

    JeSer Quintero Mtz
    47 views26 pages

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    DOC, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as DOC, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    47 views26 pages

    Tutorial Crear Formulario HTML5

    Uploaded by

    JeSer Quintero Mtz

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as DOC, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 26

    Tutorial crear formulario HTML, guardar y mostrar datos/consultas SQL con PHP

    Buenas tardes! Hoy os traigo un tutorial muy til y muy pedido por los usuarios. Se trata de como crear un formulario en HTML y al darle al botn de en iar se guarde en una base de datos SQL utilizando la programacin de PHP. !ste tutorial se puede di idir en arios arc"i os/p#ginas pero al tratarse de un e$emplo de un tutorial lo "e creado todo en el mismo arc"i o inde%.p"p. !l tutorial es bastante simple pero ser ir# para abrir los o$os a&uellos &ue est'n empe(ando en este mundo de las paginas )ebs y de las bases de datos.

    *o "e a+adido como se crean las tablas en SQL por&ue creo &ue ya esta bastante e%tenso. Pero si lo necesit#is pedirlo &ue lo a+adir'. Primero os mostrar' el cdigo completamente creado y comentado por m, y a continuacin abr#n dos lin-s, uno para er el e$emplo en i o del funcionamiento del formulario y er como muestra las consultas y el otro lin- ser# de descarga del arc"i o. .ntes de empe(ar decir &ue el arc"i o inde%.p"p al ser .p"p solo funciona en la parte del ser idor, es decir, &ue no se podr# e$ecutar en el Pc a no ser &ue tengas instalado un ser icio )eb. /o recomiendo este "osting gratuito y simple para "acer las pruebas0 "ttp0//adf.ly/1234253/"osting"o !mpecemos por el cdigo0 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tra !"t"# al//E$" "htt%&//'''.'3.#r(/T)/*html1/DTD/*html1-tra !"t"# al.+t+", <html *ml !-"htt%&//'''.'3.#r(/1.../*html"> </head> </ //Creamos la conexin a nuestra base de datos //Hay que sustituir el usuario contrasea 01# 2*"# - m3!4l51# 21t6"l#1alh#!t"7 "68!8ar"#9"7 "6%a!!'#r+9"9: //Aqu hay que sustituir la el nombre de la base de datos m3!4l5!2l21t5+;6"6;a!2 +2 +at#!9"7 01# 2*"# 9: /, <body> <p><#rm8lar"# %ara " !2rtar +at#! 2 =>L</p> <!-- Ahora creamos el formulario que enviar los datos --! <!-- "n el a#artado $action$ hay que #oner a que # %ina

    enviaremos los datos& en este caso y como e'em#lo lo enviaremos a index(#h#& es decir& a esta misma )eb --! <form "+-"?#rm1" am2-"?#rm1" m2th#+-"%#!t" a1t"# -"" +2*.%h%"> <table '"+th-"@00" ;#r+2r-"0"> <tr> <td '"+th-"A1">$#m;r2&</td> <td '"+th-"1@3"> <label ?#r-" #m;r2"></label> <input t3%2-"t2*t" am2-" #m;r2" "+-" #m;r2" /> </td> </tr> <tr> <td>$"1B&</td> <td><label ?#r-" "1B"></label> <input t3%2-"t2*t" am2-" "1B" "+-" "1B" /></td> </tr> <tr> <td>&nbsp;</td> <td al"( -"r"(ht"> <input t3%2-"!8;m"t" am2-"2 C"ar" "+-"2 C"ar" Cal82-"E C"ar" /> </td> </tr> </table> </form> </ //Com#rovamos si se han recivido datos del formulario //Como vemos se lo utili*ando el cam#o nombre if6"!!2t605PO=TDE #m;r2EF99G //+nsertamos los datos en ,-. en mi caso la tabla se //llama #ersonas y consta de dos celdas //la de nombres y la de nic/ 0" !2rtar - "I$=E)T I$TO %2r!# a! 6 #m;r27 "1B9 HILUE= 6E".05PO=TDE #m;r2EF."E7 E".05PO=TDE "1BEF."E9": m3!4l5482r360" !2rtar701# 2*"# 9: J /, M#!tram#! l#! r2!8lta+#! 482 ha3 2 =>L <br><br> </ //Creamos el ,elect #ara decir que cam#os queremos mostrar //en este caso de e'em#lo mostraremos los dos que hay 0!4l - "=ELECT #m;r27 "1B <)OM %2r!# a!": 0r2tCal - m3!4l5482r36 0!4l7 01# 2*"# 9: //Creamos un 0ucle que recorra toda la tabla de ,-. while60r#' - m3!4l5?2t1h5a!!#160r2tCal99G echo "$#m;r2& ".0r#'DE #m;r2EF."7 $"1B& ".0r#'DE "1BEF."<;r,": J /, </body> </html>

    6rear y escribir arc"i o de te%to .t%t con PHP

    7uenos d,as8 Hoy traigo un tutorial bien sencillo pero muy til a la e(. Se trata de crear un arc"i o 9en este e$emplo .t%t: en la ruta &ue especifi&uemos a tra 's de un .p"p. Podemos a+adir tantas l,neas como &ueramos y es til para almacenar informacin de las ariables recibidas en caso de ;ebug o simplemente para guardar informacin escrita por el usuario.

    . continuacin muestro el cdigo para crear nuestro arc"i o totalmente comentado. Para acceder al arc"i o tendr# &ue ser por <tp o algn sistema de fic"eros. </%h% //Creamos el archivo datos(txt //#onemos ti#o $a$ #ara aadir lineas sin borrar 0?"l2-?#%2 6"+at#!.t*t"7"a"9 or die6"Pr#;l2ma!"9: //vamos aadiendo el contenido ?%8t!60?"l27"%r"m2ra l" 2a"9: ?%8t!60?"l27"\n"9: ?%8t!60?"l27"!2(8 +a l" 2a"9: ?%8t!60?"l27"\n"9: ?%8t!60?"l27"t2r12ra l" 2a"9: ?1l#!260?"l29: /, / este ser# el resultado0

    Tambi'n podemos $ugar un poco con el codigo0 </%h% //Creamos el archivo datos(txt //#onemos ti#o $a$ #ara aadir lineas sin borrar

    0?"l2-?#%2 6"+at#!@.t*t"7"a"9 or die6"Pr#;l2ma!"9: //vamos aadiendo el lineas con bucle for60a-0:0a<@0:0aKK9G //bucle #ara caracteres #or linea for60;-0:0;<0a:0;KK9G 0t* - 0t*."-": J ?%8t!60?"l270t*9: ?%8t!60?"l27"\n"9: J ?1l#!260?"l29: /, / el resultado de $ugar es0

    Muchas gracias a todos! Espero vuestro comentarios!!!

    Tutorial Formulario de contacto en HTML5 Y CSS3


    digg
    1=>!mailS"are

    En este nuevo tutorial vamos a crear un simptico formulario de contacto para usarlo en nuestra web, Hace algun tiempo realizamos un tutorial de las nuevas propiedades de formularios en HTML5 (Ver tutorial lo vamos a !acer con las nuevas eti"uetas de HTML5 # tambi$n vamos a necesitar la a#uda de %&&' para lograr una buena # dinmica apariencia( Esto es lo "ue vamos a Lograr)

    Este formulario tendr buena apariencia en *E+plorer de , # versiones anteriores pero en las versiones modernas de los navegadores se ver mu# cool( -!ora si comencemos)

    1 El html
    . <?#rm 1la!!-"1# ta1t5?#rm" a1t"# -"L" m2th#+-"%#!t", <8l, / <l", ' <h@,C# tM1ta #!</h@, 0 </l", <l", 5 <la;2l ?#r-" am2",$#m;r2&</la;2l, 1 <" %8t t3%2-"t2*t" %la12h#l+2r-"N#ha )"1ar+#" r248"r2+ /, 2

    , 3 . 4 . . . / . ' . </l", 0 <l", . <la;2l ?#r-"2ma"l",Ema"l&</la;2l, <" %8t t3%2-"2ma"l" am2-"2ma"l" %la12h#l+2r-"Or"1ar+#P2O2m%l#.1#m" r248"r 5 </l", . <l", 1 <la;2l ?#r-"'2;!"t2",="t"# W2;&</la;2l, . <" %8t t3%2-"8rl" am2-"'2;" %la12h#l+2r-"htt%&//t8t#!3t"%!.1#m" r248"r2+ </l", 2 <l", . <la;2l ?#r-"M2 !aO2",M2 !aO2&</la;2l, , <t2*tar2a am2-"M2 !aO2" 1#l!-"Q0" r#'!-"A" r248"r2+ ,</t2*tar2a, . </l", 3 <l", <;8tt# 1la!!-"!8;m"t" t3%2-"!8;m"t",E C"ar</;8tt# , / </l", 4 </8l, / </?#rm, . / / / ' / 0 / 5 / 1
    En el !tml tenemos la forma del formulario, dentro de la eti"ueta 5form6 # con una clase para darle un estilo, dentro tenemos una lista desordenada 5ul6 # cada elemento 5li6 ser un campo para el formulario, esto lo podemos !acer con 5div6, 5p6 o tablas, pero en este caso utilizaremos los 7tems de la lista 5li6( Especificamos los diferentes tipo de 5input6 para cada campo, e8emplo 5input t#pe9:url:6 "ue nos especifica "ue ese campo es para una direcci;n de web, # cada campo lo asociamos con su respectivo 5label6 para definirlo todos los campos son re"ueridos por "ue tienen la propiedad re"uired # por medio de los place!older de cada campo especificamos el valor esperado de cada campo de entrada( <sicamente el c;digo de un formulario !tml5 bsico(

    Esto es lo "ue llevamos al momento(

    2 El Css
    . / ' .1# ta1t5?#rm h@ G ;a1B(r#8 +& # 2 r2%2at !1r#ll 0 0 L<3<3<3: 0 ;#r+2r-ra+"8!& R%*: 5 1#l#r& LRCD0R3: 1 +"!%la3& ;l#1B: ?# t-?am"l3& !a !-!2r"?: 2 ?# t-!"S2& @0%*: , %a++" (& R%*: 3 t2*t-!ha+#'& 1%* 1%* 1%* LCCCCCC: . '"+th& Q33%*: 4 J . .

    Este c;digo css fue para darle un poco de estilo al t7tulo !/ "ue est dentro del formulario(

    . / ' 0 5 1 2 , 3 . 4 . .

    /T--- 2!t"l#! %ara l#! 8l 3 l" +2l ?#rm8lar"# ---T/ .1# ta1t5?#rm 8l G '"+th&UR0%*: l"!t-!t3l2-t3%2& # 2: mar(" &0%*: %a++" (&0%*: J .1# ta1t5?#rm l"G %a++" (&1@%*: ;#r+2r-;#tt#m&1%* !#l"+ L222: %#!"t"# &r2lat"C2: J

    . /
    -plicamos los estilos para los 5li6 # 5ul6 del formulario "ue son los contenedores de cada campo con su label, damos una anc!ura a la lista # "uitamos los margin # padding # de igual posicionamos los 7tems 5li6 # colocamos bordes deba8o de cada 5li6(

    . / ' .1# ta1t5?#rm la;2l G 1#l#r& LRRRRRR: 0 +"!%la3& " l" 2-;l#1B: 5 ?l#at& l2?t: 1 ?# t-?am"l3& !a !-!2r"?: ?# t-!"S2& 13%*: 2 ?# t-'2"(ht& ;#l+: , mar(" -t#%& 3%*: 3 %a++" (& 3%*: . '"+th& .0%*: 4 J . .
    estilos para los lebel da cada 5li6

    . / ' 0 5 1 2 , 3 . 4 . . . /

    .1# ta1t5?#rm " %8t G h2"(ht&@0%*: '"+th&@@0%*: %a++" (&R%* V%*: J .1# ta1t5?#rm t2*tar2a G %a++" (&V%*: '"+th&300%*: J .1# ta1t5?#rm ;8tt# G mar(" -l2?t&.0%*: J

    %on el anterior c;digo damos estilos a los 5input6, damos un anc!o, alto # padding, de igual manera al te+tarea # al bot;n de enviar la damos un margin left para posicionarlo(

    . / ' 0 5 1 2 , 3 . 4 . . . / . ' . 0 . 5 . 1 . 2 . , . 3

    /T----- 2!t"l#! C"!8al2! +2 l#! 2l2m2 t#! --------T/ .1# ta1t5?#rm " %8t7 .1# ta1t5?#rm t2*tar2a G ;#r+2r&1%* !#l"+ Laaa: ;#*-!ha+#'& 0%* 0%* 3%* L1117 0 10%* 1R%* L222 " !2t: ;#r+2r-ra+"8!&@%*: 1#l#r& LVVV: ?# t-!"S2& 1@%*: %a++" (-r"(ht&30%*: -m#S-tra !"t"# & %a++" ( .@R!: -'2;B"t-tra !"t"# & %a++" ( .@R!: -#-tra !"t"# & %a++" ( .@R!: tra !"t"# & %a++" ( .@R!: J .1# ta1t5?#rm " %8t&?#18!7 .1# ta1t5?#rm t2*tar2a&?#18! G ;a1B(r#8 +& L???: ;#r+2r&1%* !#l"+ LRRR: ;#*-!ha+#'& 0 0 3%* Laaa: %a++" (-r"(ht&V0%*: J

    %on los estilos anteriores damos un aspecto visual agradable a los campos de entrada de te+to, entre ellos un borde, una sombra interna por medio de bo+=s!adow inset, bordes redondeados, padding # una transici;n "ue se !ace con el padding "ue simula una animaci;n "ue cambia del estado normal a focus, en este estado cambiamos el bac>ground el color del borde # el bo+=s!adow(

    . / ' 0 5 1 2 , 3 . 4

    /T --- E!t"l#! +2 Hal"+a1"#

    --- T/

    .1# ta1t5?#rm " %8t&r248"r2+&Cal"+7 .1# ta1t5?#rm t2*tar2a&r248"r2+&Cal"+ G ;#*-!ha+#'& 0 0 R%* LR1+0R3: ;#r+2r-1#l#r& L@V.@1?: J .1# ta1t5?#rm " %8t&?#18!&" Cal"+7 .1# ta1t5?#rm t2*tar2a&?#18!&" Cal"+ G ;#*-!ha+#'& 0 0 R%* L+QR@R@: ;#r+2r-1#l#r& L;03R3R J

    con el c;digo anterior lo "ue !acemos es darle las propiedades a los diferentes estados de los campos de entrada, el primero es verde # se coloca cuando !a# informaci;n # es vlida, esto va de acuerdo al tipo de entrada del campo, # se coloca ro8o cuando est en estado focus o la entrada es invalida(

    . /T --- E!t"l#! +2l ;#t# +2 E C"# --- T/ .!8;m"t G / ;8tt# %a++" (& .%* 1U%*: ' ?# t-?am"l3& H2lC2t"1a7 Ir"al7 !a !-!2r"?: 0 ?# t-'2"(ht& ;#l+: l" 2-h2"(ht& 1: 5 1#l#r& LQQQ: 1 ;#r+2r& # 2: 2 t2*t-!ha+#'& 0 1%* 1%* r(;a6@RR7 @RR7 @RR7 0.VR9: , ;a1B(r#8 +-"ma(2& -'2;B"t-(ra+"2 t6l" 2ar7 0W 0W7 0W 100W7 ?r#m6L???97 t#6L;;;99: 3 ;a1B(r#8 +-"ma(2& -m#S-l" 2ar-(ra+"2 t60W 100W .0+2(7 LBBBBBB7 L<<<<<<9: ;a1B(r#8 +-1#l#r& L???: .
    ;#r+2r& 1%* !#l"+ L?1?1?1:

    4 . . . / . ' . 0 . 5 . 1 . 2 . , . 3 / 4 / . / / / ' / 0 / 5

    J ;8tt# .!8;m"t&h#C2r G #%a1"t3&.RR: 18r!#r& %#" t2r: 1#l#r& L???: J ;8tt# .!8;m"t&a1t"C2 G ;#r+2r& 1%* !#l"+ L@@@: ;#*-!ha+#'& 0 0 10%* R%* LQQQ " !2t: J

    ;#r+2r-ra+"8!& 10%*: ;#*-!ha+#'& 0 1%* @%* r(;a607 07 07 0.R9:

    ? por ultimo damos los estilos al bot;n de env7o del formulario entre ellos damos un degradado a ese bot;n, sombras en el bot;n # en el te+to, bordes redondeado entre otros( Tambi$n damos los estilos en el estado !over del bot;n "ue es cuando el mouse esta sobre $l # el estado active "ue se e8ecuta al momento de clic>ear el bot;n(

    ? eso es todo, claro podemos seguir embelleciendo este sencillo formulario con las nuevas caracter7sticas de %&&', pero lo importante es tener bases para !acer cosas "ue necesitemos, "ue nos a#uden # nos despierten la curiosidad para !acer cosas me8ores(

    Ver el ejercicio Realizado en vivo

    Descarga el codigo completo del ejecicio


    @@@@@@@@ Ver la parte / de este tutorial enviar formulario) !ttp)AAwww(tutos#tips(comAtutorial=/=enviar= formulario=de=contacto=en=!tml5=con=p!pA - See more at: http://www.tutosytips.com/tutorial-formulario-de-contacto-en-html5-ycss3/#sthash.HZ48H !4.dpuf

    Formulario de contacto Creativo Html5, Css, JavaScript y P p ! parte "#


    5 Por Johanso En mayo 30th, 2013

    digg
    >4!mailS"are

    En este tutorial vamos a comenzar el proceso de creaci;n de un completo formulario de contacto, ma"uetado en HTML, estilizado con CSS, verificamos los datos o validamos los datos con JAVASCRIPT # por Bltimos lo procesamos con PHP. En un tutorial pasado realizamos un formulario de contacto bsico pero mu# funcional (tutorial= formulario=de=contacto=en=!tml5=#=css' , esta vez vamos a ser un poco mas creativo # vamos a utilizar t$cnicas un poco mas avanzada para realizarlo( Esto es lo "ue vamos a conseguir)

    Ver el ejercicio Realizado en vivo


    Cara una buena visualizaci;n de este formulario)

    D>, vamos a comenzar(

    El HTML
    . <?#rm a1t"# -"" 1la!!-"1# ta1t-?#rm", <+"C 1la!!-"?#rm8lar"#", / <+"C 1la!!-"1#l8m ", ' <la;2l ?#r-" #m;r2",$#m;r2 <!%a ,6r2482r"+#9</!%a ,</la;2l, 0 <" %8t t3%2-"t2*t" am2-" #m;r2" 1la!!-"?#rm-" %8t"/, 5 1 <la;2l ?#r-"2ma"l",Ema"l <!%a ,6r2482r"+#9</!%a ,</la;2l, <" %8t t3%2-"2ma"l" am2-"2ma"l" 1la!!-"?#rm-" %8t" /, 2 , <la;2l ?#r-"a!8 t#",I!8 t#</la;2l, 3 <" %8t t3%2-"t2*t" am2-"a!8 t#" 1la!!-"?#rm-" %8t" /, . </+"C, 4 . <+"C 1la!!-"1#l8m ", . <la;2l ?#r-"m2 !aO2",M2 !aO2 <!%a ,6r2482r"+#9</!%a ,</la;2l, <t2*tar2a am2-"m2 !aO2" 1la!!-"?#rm-" %8t",</t2*tar2a, .

    / . ' . 0 . 5 . 1 . 2 . , . 3 / 4 / .

    </+"C, <" %8t 1la!!-"?#rm-;t " t3%2-"!8;m"t" Cal82-"E C"ar M2 !aO2" /, </+"C, </?#rm,

    En el c;digo anterior vemos el formulario tradicional, mu# sencillo # fcil para entenderlo, tenemos las eti"ueta 5form6, los 5label6 # los 5input6, dentro de los label tenemos la eti"ueta 5span6 para mostrar el titulo de re"uerido, tenemos la eti"ueta 5input6 definiendo el tipo de entrada con el nombre identificativo del campo # le aEadimos una clase para darle estilos, igual para el 5te+tarea6, adicionalmente dividimos el formulario en / columnas por medio de 5div class9:column:6 en lado vamos a de8ar los campos de nombre, email # asunto, # en la otra columna el campo de te+to para el mensa8e # fuera de las columnas el bot;n de enviar con una clase class9:form=btn:(

    Seguimos con el CSS


    . / ' 0 5 1 2 , 3 . 4 . . . / . ' . 0

    .1# ta1t-?#rm G '"+th& VQA%*: %a++" (& 1R%*: mar(" & 0 a8t#: %#!"t"# & r2lat"C2: ;a1B(r#8 +-1#l#r& L??????: ;a1B(r#8 +-"ma(2& -'2;B"t-(ra+"2 t6l" 2ar7 l2?t t#%7 r"(ht ;#tt#m7 1#l#r-!t#%6RW7 L;?+1EU97 1#l#r-!t#%6RW7 L2+RU3U97 1#l#r-!t#%61RW7 L2+RU3U97 1#l#r-!t#%61RW7 L;?+1EU97 1#l#r-!t#%6@RW7 L;?+1EU97 1#l#r-!t#%6@RW7 L@?RU;U97 1#l#r-!t#%63RW7 L@?RU;U97 1#l#r-!t#%63RW7 L;?+1EU97 1#l#r-!t#%6QRW7 L;?+1EU97 1#l#r-!t#%6QRW7 L2+RU3U97 1#l#r-!t#%6RRW7 L2+RU3U97 1#l#r-!t#%6RRW7 L;?+1EU97 1#l#r-!t#%6ARW7 L;?+1EU97 1#l#r-!t#%6ARW7 L@?RU;U97 1#l#r-!t#%6URW7 L@?RU;U97 1#l#r-!t#%6URW7 L;?+1EU97 1#l#r-!t#%6VRW7 L;?+1EU97 1#l#r-!t#%6VRW7 L2+RU3U97 1#l#r-!t#%6.RW7 L2+RU3U97 1#l#r-!t#%6.RW7 L;?+1EU99: ;a1B(r#8 +-"ma(2& -'2;B"t-r2%2at" (-l" 2ar-(ra+"2 t613R+2(7 L2+RU3U 07 L2+RU3U R tra !%ar2 t 1A0%*9: ;a1B(r#8 +-"ma(2& -m#S-r2%2at" (-l" 2ar-(ra+"2 t613R+2(7 L2+RU3U 07 L2+RU3U R tra !%ar2 t 1A0%*9: ;a1B(r#8 +-"ma(2& -m!-r2%2at" (-l" 2ar-(ra+"2 t613R+2(7 L2+RU3U 07 L2+RU3U R tra !%ar2 t 1A0%*9:

    . 5 . 1 . 2 . , . 3 / 4 / . / ;a1B(r#8 +-"ma(2& -#-r2%2at" (-l" 2ar-(ra+"2 t613R+2(7 L2+RU3U 07 L2+RU3U R / tra !%ar2 t 1A0%*9: / ;a1B(r#8 +-"ma(2& r2%2at" (-l" 2ar-(ra+"2 t613R+2(7 L2+RU3U 07 L2+RU3U R ' tra !%ar2 t 1A0%*9: / -%"2-;a1B(r#8 +& l" 2ar-(ra+"2 t613R+2(7 0 L;?+1EU RW7 L2+RU3U RW7 L2+RU3U 1RW7 L;?+1EU 1RW7 / L;?+1EU @RW7 L@?RU;U @RW7 5 L@?RU;U 3RW7 L;?+1EU 3RW7 / L;?+1EU QRW7 L2+RU3U QRW7 1 L2+RU3U RRW7 L;?+1EU RRW7 L;?+1EU ARW7 L@?RU;U ARW7 / L@?RU;U URW7 L;?+1EU URW7 2 L;?+1EU VRW7 L2+RU3U VRW7 / L2+RU3U .RW7 L;?+1EU .RW9: , ;2haC"#r& 8rl6PIE.ht19: / t2*t-al"( & l2?t: 3 ' J 4 ' . ' / ' ' ' 0 ' 5 ' 1 ' 2
    -plicamos los estilos al contenedor principal del formulario, le damos un anc!o, padding un fondo blanco # en bac>ground=image le aplicamos un degradado lineal "ue podemos conseguir #a sea escribiendo el c;digo o utilizando una !erramienta para generar css' online, lo generamos para los

    diferentes navegadores # utilizamos el C*E(!tc para lograr compatibilidad con *E versi;n , # alineamos el te+to a la iz"uierda(

    ..?#rm8lar"# G / #C2r?l#'& h"++2 : %a++" (& Q0%* @0%*: ' ;a1B(r#8 +-1#l#r& L???: 0 J 5
    %lase para el subcontenedor del formulario(

    . / ' 0 5 1 2 , 3 . 4 . . . / . ' . 0 . 5 . 1 . 2 . , . 3 / 4 / . / / / ' / 0

    .?#rm-" %8t G +"!%la3& ;l#1B: h2"(ht& @Q%*: %a++" (& A%* 10%*: mar(" -;#tt#m& @0%*: ?# t& 1Q%* EH2lC2t"1a $282E7 H2lC2t"1a7 Ir"al7 !a !-!2r"?: ;#r+2r-ra+"8!& V%*: -m#S-;#*-!ha+#'& " !2t 0 0 1%* r(;a607 07 07 0.U97 0 1%* 0 r(;a6@RR7 @RR7 @RR7 0 -'2;B"t-;#*-!ha+#'& " !2t 0 0 1%* r(;a607 07 07 0.U97 0 1%* 0 r(;a6@RR7 @RR7 @RR7 0 ;#*-!ha+#'& " !2t 0 0 1%* r(;a607 07 07 0.U97 0 1%* 0 r(;a6@RR7 @RR7 @RR7 0 ;a1B(r#8 +-1#l#r& LAQAQAQ: -m#S-;#*-!ha+#'& " !2t 0 1%* 0 r(;a6@RR7 @RR7 @RR7 0.397 0 1%* @%* r(;a607 07 07 -'2;B"t-;#*-!ha+#'& " !2t 0 1%* 0 r(;a6@RR7 @RR7 @RR7 0.397 0 1%* @%* r(;a607 07 07 ;#*-!ha+#'& " !2t 0 1%* 0 r(;a6@RR7 @RR7 @RR7 0.397 0 1%* @%* r(;a607 07 07 ;2haC"#r& 8rl6PIE.ht19: '"+th& 3@0%*: ;a1B(r#8 +& L2+2+2+: ;#r+2r& R%* !#l"+ L+;+;+;: 1#l#r& L...: %#!"t"# & r2lat"C2: J t2*tar2a.?#rm-" %8t G h2"(ht& @00%*: #C2r?l#'& a8t#: '"+th& 3V0%*: %#!"t"# & r2lat"C2: J

    / 5 / 1 / 2
    Estilos para los diferentes 5input6, aplicamos sombras, redondeamos los bordes # utilizamos PIE.htc para las versiones de *E antiguas le damos anc!o # alto, color de fondo # color de te+to etc(

    . la;2l G / 1#l#r& LQQQ: ' ?# t-!"S2& 1R%*: 0J 5la;2l !%a G 1#l#r& L??Q1Q1: 1 ?# t-!"S2& 11%*: 2J ,
    Estilos para los labels, le damos un color # tamaEo, # los 5span6 "ue estan en los labels, "ue es el te+to "ue dice re"uerido lo colocamos de color ro8o # un poco mas pe"ueEo(

    . / ' 0 5 1 2 , 3 . 4 . . . / . ' . 0 . 5 . 1 . 2

    .?#rm-;t G %a++" (& 0 1R%*: h2"(ht& 30%*: ?# t& ;#l+ 1@%* EH2lC2t"1a $282E7 H2lC2t"1a7 Ir"al7 !a !-!2r"?: t2*t-al"( & 12 t2r: 1#l#r& L???: t2*t-!ha+#'& 0 1%* 0 r(;a607 07 07 0.U9: 18r!#r& %#" t2r: ;#r+2r& 1%* !#l"+ L0+3+Aa: ;a1B(r#8 +-1#l#r& L@<RUBU: 1l2ar& ;#th: ?l#at& r"(ht: J .?#rm-;t &h#C2r G 1#l#r& LVR.VCA: t2*t-!ha+#'& 0 1%* 0 r(;a607 07 07 0.U9: J

    Estilos para el bot;n de enviar # tambi$n aplicamos los estilos para su estado !over, es decir cuando me sitBe sobre el(

    ..1#l8m &?"r!t-#?-t3%2 G
    ?l#at& l2?t:

    / %#!"t"# & r2lat"C2: ' J 0 .1#l8m &la!t-#?-t3%2 G 5 ?l#at& r"(ht: 1 mar(" & 0 0 @0%* Q0%*: 2J ,
    Estilos para definir las / columnas con first=of=t#pe # last=of=t#pe lo "ue !acemos es ubicarlas con el float # a la ultima le aplicamos mrgenes( Esto es lo "ue !icimos) %lic> para ampliar

    - See more at: http://www.tutosytips.com/formulario-de-contacto-creati"o-html5-css#a"ascript-y-php/#sthash.$%&a'(y).dpuf

    $le%ante men& 'ertical tipo Slider con transiciones de CSS3


    .4 Por Johanso En octubre 30th, 2012

    digg
    >1!mailS"are

    <ienvenidos a otro For>s!op de HTML ? %&& En esta oportunidad vamos a crear otro menB tipo slider con efectos de transici;n de css' (Dtros E8ercicios de menB con propiedades de %&&') menB . G menB / , un e8ercicio donde crearemos un !ermoso menB "ue a la vez es mu# prctico, mu# sencillo # fcil para usar en algunos de nuestros pro#ectos( Esto es lo "ue vamos a conseguir, el resultado de nuestro e8ercicio de !o#) Cara una perfecta Visualizaci;n utiliza estos navegadores en sus respectivas versiones)

    Vamos a comenzarHH(

    EL HTML
    <+"C "+-"!l"+2r",

    . <8l, / <l", <a hr2?-"" 1la!!-"m2 8+2!%l"2(",HTMLR</a, ' <+"C, 0 <hR,HTMLR</hR, 5 <%,HTMLR 2!ta;l212 8 a !2r"2 +2 82C#! 2l2m2 t#! 3 atr";8t#! 1 2ll#! !# tY1 "1am2 t2 !"m"lar2! a la! 2t"482ta! 2 </%, <% 1la!!-"+2!%l"2(", , <a hr2?-"htt%&//2!.'"B"%2+"a.#r(/'"B"/HTMLR",L22r Ma!...< 3 </%, . </+"C, 4 </l", . <l", <a hr2?-"" 1la!!-"m2 8+2!%l"2(",C==3</a, . <+"C, . <hR,C==3</hR, / <%,C== t"2 2 8 a !" ta*"! m83 !2 1"lla7 482 8!a 8 a! 18a ta! %a . t#ma+a! +2l " (lY! %ara 2!%21"?"1ar l#! #m;r2! +2 !8! !2l21t# </%, ' <% 1la!!-"+2!%l"2(", . <a hr2?-"htt%&//2!.'"B"%2+"a.#r(/'"B"/C==3LC==53",L22r Ma!. 0 </%, . </+"C,

    5 . 1 . 2 . , . 3 </l", / <l", <a hr2?-"" 1la!!-"m2 8+2!%l"2(",PHP</a, 4 <+"C, / <hR,PHP</hR, . <%,PHP 2! 8 l2 (8aO2 +2 %r#(rama1"Z +2 8!# (2 2ral +2 !1r"%t +2 / 1# t2 "+# +" Mm"1#. / </%, <% 1la!!-"+2!%l"2(", / <a hr2?-"htt%&//2!.'"B"%2+"a.#r(/'"B"/PHP",L22r Ma!...</a, ' </%, / </+"C, 0 </l", <l", / <a hr2?-"" 1la!!-"m2 8+2!%l"2(",M3=>L</a, 5 <+"C, / <hR,M3=>L</hR, 1 <%,M3=>L 2! 8 !"!t2ma +2 (2!t"Z +2 ;a!2! +2 +at#! r2la1"# al / 1# mM! +2 !2"! m"ll# 2! +2 " !tala1"# 2!. </%, 2 <% 1la!!-"+2!%l"2(", / <a hr2?-"htt%&//2!.'"B"%2+"a.#r(/'"B"/M3!4l",L22r Ma!...</a , </%, / </+"C, </l", 3 <l", ' <a hr2?-"" 1la!!-"m2 8+2!%l"2(",N>82r3</a, 4 <+"C, ' <hR,N>82r3</hR, . <%,>82r3 2! 8 a ;";l"#t21a +2 NaCa=1r"%t7 1r2a+a " "1"alm2 t2 482 %2rm"t2 !"m%l"?"1ar la ma 2ra +2 " t2ra1t8ar 1# l#! + ' </%, / <% 1la!!-"+2!%l"2(", ' <a hr2?-"htt%&//2!.'"B"%2+"a.#r(/'"B"/N482r3",L22r Ma!...< ' </%, ' </+"C, </l", 0 ' </8l, 5 </+"C, ' 1 ' 2 ' , ' 3 0

    4 0 . 0 / 0 ' 0 0 0 5 0 1 0 2 0 , 0 3 5 4 5 . 5 / 5 ' 5 0 5 5 5 1 5 2 5 , 5 3 1 4 1 . 1 / 1 '


    En el c;digo !tml bsicamente tenemos un div contenedor 5div id9:slider:6, luego una lista desordenada 5ul6 en ella su respectivo 7tem 5li6 # el enlace 5a6 "ue al situarnos sobre el desplegara una acci;n, se despliega el 5div6 interior "ue a su vez tiene un titulo 5!56, un prrafo 5p6 "ue es el

    te+to de introducci;n # dentro de un prrafo 5p6 tenemos el enlace a ver mas( Esto es todo lo "ue tenemos en el c;digo !tml, Icil cierto( seria mas o menos algo asi)

    EL CSS
    . / ' 0 5 1 2 , 3 .4 .. ./ .' .0 .5 .1 .2 ., .3 /4 /. // /' /0

    L!l"+2r G h2"(ht& @V0%*: J L!l"+2r 8l&;2?#r2 G ;a1B(r#8 +& r(;6071R371R39: /T Ol+ ;r#'!2r! T/ ;a1B(r#8 +& -m#S-l" 2ar-(ra+"2 t6l2?t7 r(;6071R371R39 0W7 r(;6UQ71R371R39 AAW7 r(

    bac>ground) =web>it=gradient(linear, left top, rig!t top, color=stop(4J,rgb(4,.5',.5' , color=stop(1 bac>ground) =web>it=linear=gradient(left, rgb(4,.5',.5' 4J,rgb(20,.5',.5' 11J,rgb(.41,.,',.,/ bac>ground) =o=linear=gradient(left, rgb(4,.5',.5' 4J,rgb(20,.5',.5' 11J,rgb(.41,.,',.,/ ,1J bac>ground) =ms=linear=gradient(left, rgb(4,.5',.5' 4J,rgb(20,.5',.5' 11J,rgb(.41,.,',.,/ ,1 bac>ground) linear=gradient(to rig!t, rgb(4,.5',.5' 4J,rgb(20,.5',.5' 11J,rgb(.41,.,',.,/ ,1 filter) progid)KL*mageTransform(Microsoft(gradient( start%olorstr9MN443333M, end%olorstr9MN44333 border=radius) '4p+ 4 4 '4p+P bo+=s!adow) 'p+ 'p+ /p+ rgba(4, 4, 4, 4(15 P content) RRP !eig!t) .44JP margin=top) =04p+P position) absoluteP widt!) .,/p+P z=inde+) .44P S Nslider ul T list=st#le) none outside noneP margin=left) .4p+P

    /5 /1 /2 /, /3 '4 '. '/ '' '0 '5 '1 '2 ', '3 04 0. 0/ 0' 00 05 01 02 0, 03 54 5. 5/ 5' 50 55 51 52 5, 53 14 1. 1/ 1' 10 15 11 12 1, 13 24 2. 2/ 2' 20

    margin=top) .4p+P padding) 04p+ 4P position) relativeP widt!) .,/p+P S Nslider ul li T !eig!t) 04p+P widt!) .,/p+P S Nslider ul li a(menudesplieg T border=bottom) .p+ solid N44%I%-P color) w!iteP displa#) bloc>P font=famil#) MTrebuc!et M&MP font=size) .(1emP font=st#le) italicP letter=spacing) =.p+P padding=left) //p+P position) absoluteP te+t=decoration) noneP te+t=s!adow) 4 4 5p+ rgba(4, 4, 4, 4(5 P widt!) .14p+P z=inde+) ..4P S Nslider ul li div T bac>ground) none repeat scroll 4 4 rgba(4, 4, 4, 4(1 P border=radius) 4 .5p+ .5p+ 4P color) w!iteP !eig!t) /11p+P left) 4P opacit#) 4P overflow) !iddenP padding) 4 .5p+ .5p+P position) absoluteP top) 4P transition) .s left,.s widt!,.s opacit#P =web>it=transition) .s left,.s widt!,.s opacit#P =moz=transition) .s left,.s widt!,.s opacit#P =o=transition) .s left,.s widt!,.s opacit#P widt!) .5/p+P z=inde+) 54P S Nslider ul li)!over div T bac>ground) none repeat scroll 4 4 rgba(4, 4, 4, 4(1 P left) .,/p+P opacit#) .P widt!) /21p+P S

    25 21 22 2, 23 ,4 ,. ,/ ,' ,0 ,5 ,1 ,2 ,, ,3 34 3. 3/ 3' 30 35 31 32 3, 33 .4 4 .4 . .4 / .4 ' .4 0 .4 5 .4 1 .4 2

    Nslider ul li div !5 T border=bottom) .p+ solid N,,,P color) N443333P font=famil#) trebuc!et msP font=size) /(5emP margin) 4 4 5p+P te+t=align) centerP S Nslider ul li div p T font=famil#) trebuc!et msP font=size) .emP font=st#le) italicP font=weig!t) normalP overflow) !iddenP padding=top) .5p+P widt!) /21p+P S Nslider ul li div p(desplieg T float) rig!tP S Nslider ul li div p(desplieg a T bac>ground) none repeat scroll 4 4 NIIIIIIP border=radius) ,p+ ,p+ ,p+ ,p+P color) N443333P displa#) inline=bloc>P font=size) .5p+P font=weig!t) boldP !eig!t) .,p+P margin) .4p+ 4P padding) 0p+P te+t=decoration) noneP S

    El c;digo css "ue generamos tambi$n es mu# intuitivo # fcil de comprender, pero !are referencia a algunas propiedades( En el div Nslider ul)before "ue es la parte "ue nos mostrara los enlaces, damos algunas propiedades importantes, por e8emplo el Oradient o degradado, para eso utilizamos una !erramienta generadora de css online !ttp)AAwww(colorzilla(comAgradient=editorA para !acer este traba8o, # lo generamos para los distintos navegadores( ? la propiedad de transici;n "ue nos !ace este traba8o elegante se la aplicamos al 5div6 "ue se encuentra dentro del 7tem 5li6 de la lista 5ul6 del 5div slider6, igualmente generamos el c;digo transition para los diferentes

    navegadores segBn su prefi8o( Lo dems es c;digo css de posicionamiento # para !acer la parte visual mu# agradable( -dicionalmente te recomiendo ad8untar o incluir el c;digo reset css de !ttp)AAme#erweb(comAericAtoolsAcssAresetA o algun otro codigo css para resetear los css de los diferentes navegadores para tener un me8or control de nuestro e8ercicio( Esto es todo por este e8ercicio, pero se puede crear mas, aumentar su funcionalidad pero #a lo de8o a tu imaginaci;n( @@@ - See more at: http://www.tutosytips.com/ele*ante-menu-"ertical-tipo-slider-contransiciones-de-css3/#sthash.lmm+,+-..dpuf

    http://www.tutosytips.com// -plu*ins-utiles-menus-en-#.uery/

    You might also like