SlideShare a Scribd company logo
1 of 8
Validando un formulario 
con HTML5 
www.codejobs.biz
Validando un formulario con HTML5 
• Hola chicos, como ya todos sabemos HTML5 
nos viene a facilitar la vida un poquito en el 
tema de la validación de formularios que en 
realidad lo recomendable es que no nada más 
hagamos la validación con lo que HTML5 nos 
ofrece sino que también coloquemos otro 
código de validación como respaldo, pero a 
continuación quiero dejarte por aquí el tema 
de hacer validaciones con HTML5.
El atributo required 
• Si bien, este atributo es quien nos ayudara a 
que el campo sea “requerido” como su 
nombre lo indica. require es un atributo de 
tipo booleano y debemos colocarlo dentro del 
elemento <input> por ejemplo: 
<input type="text" name="nombre" required/>
Y punto importante si añadimos el atributo tittle 
podemos hacerle saber al usuario un texto que le 
diga por eje 
<input type="text" title="El nombre es requerido" name="nombre" required/> 
Lo único que hicimos anteriormente es validar que 
el usuario haya colocado su nombre, el siguiente 
atributo es pattern quien nos ayudara para hacer la 
validación del Email que el usuario inserte en el 
formulario, es decir, que el Email este escrito 
correctamente.
<input type="text" 
pattern="^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~- 
]+@[a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)*$" 
name="Email" 
required/>
También podemos enviarle un mensaje extra al 
usuario haciendo uso de tittle como lo hicimos 
con el campo nombre de la siguiente manera: 
<input type="text" pattern="^[a-zA-Z0- 
9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:.[a-zA- 
Z0-9-]+)*$" title="mail@ejemplo.com" 
name="Email" required/>
Ahora bien, si te resulta fastidioso escribir todo 
lo que conlleva pattern entonces solo escribe 
type ="email " y quieres hacerlo más 
simplificado entonces haz lo siguiente: 
<input type="email" placeholder ="Escribe tu 
Email" title="mail@ejemplo.com" 
name="Email" required/>
Si quieres el código completo visítanos 
en: 
http://www.codejobs.biz

More Related Content

Viewers also liked (8)

Aplicaciones graficas-con-python-y-glade
Aplicaciones graficas-con-python-y-gladeAplicaciones graficas-con-python-y-glade
Aplicaciones graficas-con-python-y-glade
 
Introducción a Google Dart + HTML5
Introducción a Google Dart + HTML5Introducción a Google Dart + HTML5
Introducción a Google Dart + HTML5
 
HTML5 y CSS3 ¿Imprescindibles?
HTML5 y CSS3 ¿Imprescindibles?HTML5 y CSS3 ¿Imprescindibles?
HTML5 y CSS3 ¿Imprescindibles?
 
Desarrollo Web: HTML + Bootstrap
Desarrollo Web: HTML + BootstrapDesarrollo Web: HTML + Bootstrap
Desarrollo Web: HTML + Bootstrap
 
Html5 Java Script Apis
Html5 Java Script ApisHtml5 Java Script Apis
Html5 Java Script Apis
 
Bootstrap
BootstrapBootstrap
Bootstrap
 
Bootstrap
BootstrapBootstrap
Bootstrap
 
Introduction to Go programming
Introduction to Go programmingIntroduction to Go programming
Introduction to Go programming
 

Similar to Validando un formulario html5

Taller de programación web sesion 7,8,9,10 & 11
Taller de programación web   sesion 7,8,9,10 & 11Taller de programación web   sesion 7,8,9,10 & 11
Taller de programación web sesion 7,8,9,10 & 11
ibcalu
 
Aprendiendo php 3
Aprendiendo php 3Aprendiendo php 3
Aprendiendo php 3
Erick Trejo
 

Similar to Validando un formulario html5 (20)

Guía Formulario
Guía FormularioGuía Formulario
Guía Formulario
 
Formulario
FormularioFormulario
Formulario
 
Taller de programación web sesion 7,8,9,10 & 11
Taller de programación web   sesion 7,8,9,10 & 11Taller de programación web   sesion 7,8,9,10 & 11
Taller de programación web sesion 7,8,9,10 & 11
 
Tema3[Php]
Tema3[Php]Tema3[Php]
Tema3[Php]
 
Semana 2 Etiquetas semánticas y HTML 5
Semana 2   Etiquetas semánticas y HTML 5Semana 2   Etiquetas semánticas y HTML 5
Semana 2 Etiquetas semánticas y HTML 5
 
INTRODUCCIÓN A HTML – XHTML – Clase 03
INTRODUCCIÓN A HTML – XHTML – Clase 03INTRODUCCIÓN A HTML – XHTML – Clase 03
INTRODUCCIÓN A HTML – XHTML – Clase 03
 
Formularios y Validaciones
Formularios y ValidacionesFormularios y Validaciones
Formularios y Validaciones
 
Clase 1 Plataforma introducción a Diseño Web
Clase 1 Plataforma introducción a Diseño WebClase 1 Plataforma introducción a Diseño Web
Clase 1 Plataforma introducción a Diseño Web
 
284
284284
284
 
Curso HTML 5 & jQuery - Leccion 4
Curso HTML 5 & jQuery - Leccion 4Curso HTML 5 & jQuery - Leccion 4
Curso HTML 5 & jQuery - Leccion 4
 
1
11
1
 
Symfony2: Interacción con CSS, JS y HTML5
Symfony2: Interacción con CSS, JS y HTML5Symfony2: Interacción con CSS, JS y HTML5
Symfony2: Interacción con CSS, JS y HTML5
 
Formularios
FormulariosFormularios
Formularios
 
Html 5: formularios
Html 5: formulariosHtml 5: formularios
Html 5: formularios
 
Atributos del INPUT.pdf
Atributos del INPUT.pdfAtributos del INPUT.pdf
Atributos del INPUT.pdf
 
Introducción a Javascript: Formularios
Introducción a Javascript: FormulariosIntroducción a Javascript: Formularios
Introducción a Javascript: Formularios
 
Aprendiendo php 3
Aprendiendo php 3Aprendiendo php 3
Aprendiendo php 3
 
Html investigacion
Html investigacionHtml investigacion
Html investigacion
 
Html investigacion
Html investigacionHtml investigacion
Html investigacion
 
Formularios en html
Formularios en htmlFormularios en html
Formularios en html
 

Validando un formulario html5

  • 1. Validando un formulario con HTML5 www.codejobs.biz
  • 2. Validando un formulario con HTML5 • Hola chicos, como ya todos sabemos HTML5 nos viene a facilitar la vida un poquito en el tema de la validación de formularios que en realidad lo recomendable es que no nada más hagamos la validación con lo que HTML5 nos ofrece sino que también coloquemos otro código de validación como respaldo, pero a continuación quiero dejarte por aquí el tema de hacer validaciones con HTML5.
  • 3. El atributo required • Si bien, este atributo es quien nos ayudara a que el campo sea “requerido” como su nombre lo indica. require es un atributo de tipo booleano y debemos colocarlo dentro del elemento <input> por ejemplo: <input type="text" name="nombre" required/>
  • 4. Y punto importante si añadimos el atributo tittle podemos hacerle saber al usuario un texto que le diga por eje <input type="text" title="El nombre es requerido" name="nombre" required/> Lo único que hicimos anteriormente es validar que el usuario haya colocado su nombre, el siguiente atributo es pattern quien nos ayudara para hacer la validación del Email que el usuario inserte en el formulario, es decir, que el Email este escrito correctamente.
  • 5. <input type="text" pattern="^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~- ]+@[a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)*$" name="Email" required/>
  • 6. También podemos enviarle un mensaje extra al usuario haciendo uso de tittle como lo hicimos con el campo nombre de la siguiente manera: <input type="text" pattern="^[a-zA-Z0- 9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:.[a-zA- Z0-9-]+)*$" title="mail@ejemplo.com" name="Email" required/>
  • 7. Ahora bien, si te resulta fastidioso escribir todo lo que conlleva pattern entonces solo escribe type ="email " y quieres hacerlo más simplificado entonces haz lo siguiente: <input type="email" placeholder ="Escribe tu Email" title="mail@ejemplo.com" name="Email" required/>
  • 8. Si quieres el código completo visítanos en: http://www.codejobs.biz