HTML5 Manejo de Formularios III

html5-logo-pequeno  Aprendiendo HTML5     html5-logo-pequeno

Siguiendo con nuestros formularios en html5, veamos como se utilizan los campos de color, hora, reset de formulario, para ello aca les dejo el codigo fuente de dichos campos.

1
2
3
4
5
6
7
8
9
10
11
12
<form action="" method="Post" name="form"><label>Seleccione color</label>
<input name="color" type="color" />

<label>Seleccione color</label>
<input name="hora" type="time" />

<label>Reset formulario</label>
<input name="hora" type="reset" />

<input name="enviar" type="submit" value="Enviar" />

</form>

Y miremos como se aprecia esta novedad desde el navegador.

color

🛡 Los ataques informáticos crecen cada día
YouTube IconProtege tus Dispositivos - Usa Kaspersky Antivirus.

La paleta de colores que facilita html5 es buena, puesto que existe una gran gama de colores básicos, ademas podemos construir nuestro propio color, acá les dejo una captura para que observen.

paleta

Veamos ahora una nueva novedad de html5, la cual se conoce con el nombre de datalist, y su función es muy similar a la de los campos tipo select, puesto que añade una serie de opciones para que el usuario seleccione de la lista la opción deseada, veamos.

1
2
3
4
5
6
7
8
9
10
11
12
<form action="" method="Post" name="form"><label for="diasemana">¿Que día de la semana es hoy?</label>
<input id="diasemana" list="dias" name="diasemana" type="text" />
<datalist id="dias">
<option value="Lunes"></option>
<option value="Martes"></option>
<option value="Miércoles"></option>
<option value="Jueves"></option>
<option value="Viernes"></option>
<option value="Sábado"></option>
<option value="Domingo"></option></datalist>

</form>

Dicho código se ve en el navegador de la siguiente manera.

datalist

Hace falta recalcar que existen muchos mas elementos y propiedades listas para ser utilizadas por nosotros, pero he recopilado las mas utilizadas cuando estamos en proceso de desarrollo de sitios web bajo esta novedosa tecnología, la cual aun se encuentra en proceso de desarrollo.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *