miércoles, 17 de febrero de 2016

Formulario: validar una URL, Email y Subir un archivo.

Los datos mas comunes son los de tipo texto, esta vez les muestro algo diferente apoyándonos con nuevos atributos de HTML5.
Vamos a crear  un formulario donde podamos ingresar una URL de una pagina web, un correo electrónico y un botón para subir un archivo, este ultimo ya existía pero quiero ponerlo ya que muchos no lo conocen.
Hay que tomar en cuenta que los campos son requeridos ósea no deben ir vacíos y debe contener el “http:// “ y contener un “.” En cuanto el email debe contener “@” y un “.”
Y lo vamos a obtener con lo siguiente:


<!DOCTYPE HTML>
<html>
            <head></head>
<body>
            <form name='form1' action='datos.php' method='post'>
                       <label>Url: </label><input type="url" required/></br>
                       <label>Email: </label><input type="email" required/></br>
                       <label>Archivo: </label><input type="file" required/></br>
                       <input type="submit" value="Enviar" />
            </form>

</body>
</html>

Si dejamos los campos vacíos y damos clic en enviar nos mostrara el siguiente mensaje.

Ahora si ingresamos una URL y un email incorrecto muestra esto:

y por ultimo cuando damos clic en seleccionar archivo muestra una ventanita.


Existen muchos mas tipos de input, por ahora estos serán de gran ayuda.

Resultado:



Etiquetas: ,