Inicio > Computación, HTML5, Informática, Programación > Controles de entrada de datos en HTML5

Controles de entrada de datos en HTML5


En HTML5 tenemos nuevos tipos de datos de entrada que nos permitirán validar los datos fácilmente de manera que el usuario solo pueda ingresar los datos correctos.
podemos usar diferentes tipos y solo tenemos que ponerle en la propiedad lo que deseamos ingresar ejemplo:


type=”search”:  se usa para campos de búsqueda
type=”mail”:  se usa para campos de mail
type=”url”:  se usa para campos de url
type=”datetime”:  se usa para campos de fecha y hora, despliega un calendario
type=”color”:  se usa para seleccionar un color, en el value se guardar el valor RGB
type=”range”: se usa para seleccionar un valor con un rango permitido, generalmente sale una barra deslizante

Adicional puedes colocar la propiedad required en los input para indicar que el campo es requerido de esa manera hasta que no se seleccione o ingrese un valor o permitirá realizar el submit y adicional el mensaje de validación será generado automáticamente por el explorador.

anteriormente se usaba mucho Javascript para cada uno de estos casos pero ya con HTML5 podemos hacerlo mas fácil,  acá les muestro algunos ejemplos:

<label for=”search”>Buscar en esta web</label>
<input id=”search” name=”search” type=”search” placeholder=”Ingrese su busqueda” >

<label for=”email”>E-mail</label>
<input id=”email” name=”email” type=email>

<label for=”blog”>URL</label>
<input id=”blog” name=”blog” value=”” type=url required>

<label for=”edad”>Tu edad</label>
<input id=”edad” name=”edad” type=”number” step=”5″>

<label for=”telefono”>Teléfono</label>
<input id=”telefono” name=”telefono” type=tel value=”1111″ readonly>

<label for=”cantidad”>¿Cuántos cafés puedes beber por día?</label>
<input id=”cantidad” name=”cantidad” type=range min=5 max=10 >

<label for=”cumple”>¿Cuándo es tu siguiente cumpleaños?</label>
<input id=”cumple” name=”cumple” type=date>

<label for=”alarma”>Día y hora para la alarma</label>
<input id=”alarma” name=”alarma” type=datetime>

<label for=”hora”>Hora de alarma</label>
<input id=”hora” name=”hora” type=time>

<label for=”color”>Color preferido</label>
<input id=”color” name=”color” type=color>

campos_de_ingreso_HTML5

por desgracia no esta soportado por todos los exploradores especialmente el caso de internet explorer que solo lo soporta la versión 10, recuerden que pueden verificar la compatibilidad por acá: https://mteheran.wordpress.com/2013/01/31/compatibilidad-de-los-exploradores-de-escritorio-y-moviles-con-html5/

  1. Aún no hay comentarios.
  1. No trackbacks yet.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: