como hacer un formulario html5 totalmente funcional

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


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


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/


4/39

#

&

%';

es recordare las clases *"e "samos en la ma*"etacin:


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


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


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


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

%


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


34/39

)&

)

0)1

3*

3%

3

)

33

3.

35

3

/

3&

30

3


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


36/39


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


38/39

Como vern ya tiene todo lo *"e *"er-amos


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

como hacer un formulario html5 totalmente funcional

Documents