-
7/24/2019 Como Hacer Un Formulario HTML5 Totalmente Funcional
1/39
Diseo, Html Css Js,Informtica,Programacin,TODO
Como hacer un formulario con HTML, CSS, Javascript y PHP?-Parte 1!ntro"ucci#n y Ma$uetaci#n HTML%
Posted by savafon 1 !"lio, #$1%&$'( )istas# Comments
Hola, en esta entrada trataremos "n *"e t"torial estar se+arado en secciones debido a lo etenso *"e ser-a "n solo art-c"lo as- *"e a
+artir de este +ost comen.are "na serie de & +ost, /n la *"e crearemos "n form"lario de contacto totalmente f"ncional, es decir, *"etenga "n as+ecto agradable, sea validado antes de enviar y *"e +or "ltimo +"eda enviar correos0
http://idevnote.com/category/disenohttp://idevnote.com/category/programacion/html-css-jshttp://idevnote.com/category/programacion/html-css-jshttp://idevnote.com/category/informatica-2http://idevnote.com/category/informatica-2http://idevnote.com/category/programacionhttp://idevnote.com/category/todohttp://idevnote.com/category/todohttp://idevnote.com/formulario-html-css-javascript-php-parte-1-introduccion-maquetacion-htmlhttp://idevnote.com/formulario-html-css-javascript-php-parte-1-introduccion-maquetacion-htmlhttp://idevnote.com/author/savafhttp://idevnote.com/author/savafhttp://idevnote.com/formulario-html-css-javascript-php-parte-1-introduccion-maquetacion-htmlhttp://idevnote.com/formulario-html-css-javascript-php-parte-1-introduccion-maquetacion-htmlhttp://idevnote.com/formulario-html-css-javascript-php-parte-1-introduccion-maquetacion-html#commentshttp://idevnote.com/category/programacion/html-css-jshttp://idevnote.com/category/informatica-2http://idevnote.com/category/programacionhttp://idevnote.com/category/todohttp://idevnote.com/formulario-html-css-javascript-php-parte-1-introduccion-maquetacion-htmlhttp://idevnote.com/formulario-html-css-javascript-php-parte-1-introduccion-maquetacion-htmlhttp://idevnote.com/author/savafhttp://idevnote.com/formulario-html-css-javascript-php-parte-1-introduccion-maquetacion-htmlhttp://idevnote.com/formulario-html-css-javascript-php-parte-1-introduccion-maquetacion-html#commentshttp://idevnote.com/category/diseno -
7/24/2019 Como Hacer Un Formulario HTML5 Totalmente Funcional
2/39
Cada "no de los temas seran
Ma$uetaci#n "e &ormulario en HTMLen el *"e estamos2
Diseo de form"lario con 3o!as de estilo C44
)alidacin de form"lario de forma vis"al con Javascri+t
-
7/24/2019 Como Hacer Un Formulario HTML5 Totalmente Funcional
3/39
/nviar en correo a trav5s de "n form"lario con PHP
/n este +ost solo trataremos la ma*"etacin del htmldel form"lario, +or tanto d"rante la elaboracin de lo *"e e+ongo en esta
entrada, solo necesitamos "n editor de teto y "n navegador0 4i a"n no sabes *"e editor de teto "saras recomiendo "sar 6ote+ad 77,eccelente +ara las +ersonas *"e a+enas estn entrando en este m"ndillo de la 8eb0
Ma$uetaci#n
9a *"e tenemos las 3erramientas necesarias +ara +roceder con n"estro traba!o, em+ecemos creando "na estr"ct"ra bsica:
1
https://notepad-plus-plus.org/https://notepad-plus-plus.org/https://notepad-plus-plus.org/ -
7/24/2019 Como Hacer Un Formulario HTML5 Totalmente Funcional
4/39
#
&
%';
es recordare las clases *"e "samos en la ma*"etacin:
-
7/24/2019 Como Hacer Un Formulario HTML5 Totalmente Funcional
20/39
)amos a darle "nos estilos al 4o"y+ara definir "n color de fondo, establecer oboto como f"ente +rinci+al y tambi5n le daremos "n
tamao al div con la clase contacto y "n margen +ara centrarlo y des+egarlo de la +arte de arriba del navegador0
-
7/24/2019 Como Hacer Un Formulario HTML5 Totalmente Funcional
21/39
=3ora estableceremos la forma de 3# contacto, le daremos color de fondo, "n "n +adding y le *"itaremos los margenes, ademas lo
centraremos y le daremos "n anc3o del 1$$ de s" contenedor
1
#
&%
'
;% *"e nos +ermite validar "n
form"lario sin escribir "na sola linea Javascri+t ya vimos "na m"estra de ello en el +rimer t"torial:
Cierta mente es la validacin +or defecto de HTB>% en alg"nos navegadores es bastante b"ena, +or *"e nos a3orran traba!o en la
validacin de cam+os como el email, +ero en este t"torial solo 3aremos "na validacin vis"al, detonada +or el evento onbl"r c"ando
abandonas "n elemento2, *"e cambien el color de estas, algo m"y conveniente en ambiente mobile0
-
7/24/2019 Como Hacer Un Formulario HTML5 Totalmente Funcional
31/39
/n esta +arte 3aremos tanto HTB> solo "nas cositas2, C44 y +or s"+"esto Javascri+t, no sera algo m"y com+licado0
-
7/24/2019 Como Hacer Un Formulario HTML5 Totalmente Funcional
32/39
Veri+car i et,n vaco
HTML4olo 3aremos dos cambios a n"estro cdigo y es *"e agregaremos n"estro scri+t y en los in+"t, tetarea aadiremos alg"nos rece+tores
de eventos en este caso onbl"r0
%
)
3
.
5
/&
0
1
%*
%%
%)
%3
%
-
7/24/2019 Como Hacer Un Formulario HTML5 Totalmente Funcional
33/39
.
%5
%/
%&
%0
%1
)*
)%
))
)3
).
)5
)/
Yu are using an utdated %r9ser2 Please u)grade &ur %r9ser t im)r'e &ur e*)erience2
-
7/24/2019 Como Hacer Un Formulario HTML5 Totalmente Funcional
34/39
)&
)
0)1
3*
3%
3
)
33
3.
35
3
/
3&
30
3
-
7/24/2019 Como Hacer Un Formulario HTML5 Totalmente Funcional
35/39
1
.*
Javacri!tHaremos *"e los elementos *"e reciben onbl"r e!ec"ten "na f"ncin *"e verifi*"e si este elemento esta vaci veremos varios m5todos
de agregar clases css *"e cambien la a+ariencia de estos elementos0
%
)
3
.
5
/
&
0
$$Est funcina re'isand si ls in)ut & el te*tarea estan 'acis
functin'aciGelementH B
ifGelement2'alue==""HB
element2classist2addGmalH$$Li estan 'acis les dara la clase "mal"
S elseB
element2classist2rem'eGmalH$$tiliand la a)i classist rem'ems la clase mal si es .ue la
tiene
S
S
Como ven acabamos de aadir las clases lo verificaremos en el Ins+ector de elementos de s" navegador solo se vera si 3acen clic a
dentro y l"ego f"era del elemento2
-
7/24/2019 Como Hacer Un Formulario HTML5 Totalmente Funcional
36/39
-
7/24/2019 Como Hacer Un Formulario HTML5 Totalmente Funcional
37/39
9a *"e el Javascri+t f"nciona vamos a a+licar estilos a los elementos asi:
%
)
3
.
5
/
&
0
2cntact-frm in)ut2mal: 2cntact-frm te*tarea2mal B
%ac6grund@ rg%G(UI:;8:;8H
%rder@()*WecUcslid
S
2cntact-frm in)ut2mal@@-9e%6it-in)ut-)lacehlder:2cntact-frm te*tarea2mal@@-9e%6it-in)ut-)lacehlder
B clr@Wf S
2cntact-frm in)ut2mal@@-m-)lacehlder:2cntact-frm te*tarea2mal@@-m-)lacehlder B clr@Wf S $A
firef* ;R A$
2cntact-frm in)ut2mal@-ms-in)ut-)lacehlder:2cntact-frm te*tarea2mal@-ms-in)ut-)lacehlder
B clr@Wf S $A ie A$
2cntact-frm in)ut2mal@-m-)lacehlder:2cntact-frm te*tarea2mal@-m-)lacehlder B clr@Wf S
= +esar de *"e "samos la librer-a F+refiFfree los +refi!os necesarios +ara dar estilos a +lace3older no son c"biertos +or esta fantstica
librer-a fantstica librer-a0
-
7/24/2019 Como Hacer Un Formulario HTML5 Totalmente Funcional
38/39
Como vern ya tiene todo lo *"e *"er-amos
-
7/24/2019 Como Hacer Un Formulario HTML5 Totalmente Funcional
39/39
/n la sig"iente clase terminaremos el form"lario totalmente aadi5ndole el cdigo necesario +ara mandar "n correo "tili.ando "n
local3ost o "n servidor +"blico0