Validando un formulario html5
Descargar como PPTX, PDF0 recomendaciones378 vistas
El documento aborda la validación de formularios en HTML5, destacando el uso del atributo 'required' para campos obligatorios y 'pattern' para validar correos electrónicos. Se presentan ejemplos prácticos de implementación, incluyendo el uso del atributo 'title' para proporcionar mensajes adicionales al usuario. Además, se menciona una alternativa simplificada utilizando 'type=email' para facilitar la entrada de datos.
![<input type="text"
pattern="^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-
]+@[a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)*$"
name="Email"
required/>](https://image.slidesharecdn.com/validandounformulariohtml5-141105122930-conversion-gate01/85/Validando-un-formulario-html5-5-320.jpg)
![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/>](https://image.slidesharecdn.com/validandounformulariohtml5-141105122930-conversion-gate01/85/Validando-un-formulario-html5-6-320.jpg)
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