7. Curso HTML5. Novedades. Más tipos de input: time, datetime y color
- Vamos a continuar con nuestro curso de html . Después de ver en la entrada anterior algunas de las nuevas campos de formulario que traía html5. En este capítulo continuamos con nuevos tipos de input time,datetime y color.
- Vamos con los nuevos campos de formulario que veremos en este capítulo:
- Campo time: El tipo de campo time es similar a date, pero solo para la hora. Toma el formato de horas y minutos, pero su comportamiento depende de cada navegador . Normalmente el valor esperado tiene la sintaxis hora:minutos:segundos, pero también puede ser solo hora:minutos.
- Campo datetime: Este tipo de campo ofrecía una interface similar a date, pero solo para seleccionar una semana completa. Actualmente los navegadores no lo utilizan. (https://stackoverflow.com/questions/21263515/why-is-html5-input-type-datetime-removed-from-browsers-already-supporting-it)
- Campo color: Además de los tipos de campo para fecha y hora existe otro tipo que provee una interface predefinida similar para seleccionar colores
- Aquí os dejo un vídeo con ejemplos de uso de estos controles:
- Os dejo también el código html visto en el vídeo:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Pruebas</title>
<link href="StyleSheet1.css" rel="stylesheet" />
</head>
<body>
<form>
<article>
<header>
<h1>Mi primera página html</h1>
</header>
</article>
<nav>
<ul>
<li><a href="#">Uno</a></li>
<li><a href="#">Dos</a></li>
<li><a href="#">Tres</a></li>
<li><a href="#">Cuatro</a></li>
</ul>
</nav>
<article class="pagina">
<section class="contenedor">
<br />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNIIrOH9SJeXDSEeOFtMxez5Zfnozh9J3l27GClLeYM0LZSaUFN1zCiN3AG604Yxm03evhidS9gxy9bkM9TtOrgoBP1yPbk6CFIb6v8oiqpxWOMVcbEc-h66TLgHrRYXSZ0ZxPhSdtb0A/s640/Basedatosnba.png" />
<figcaption><mark> diseño de BBDD para web Scrapping</mark></figcaption>
</section>
<aside>
<input type="search" placeholder="Busqueda" />
<input type="email" placeholder="email" />
<input type="url" placeholder="url" />
<input type="tel" placeholder="telefono" /><br />
<input type="number" placeholder="numero" min="0" max="10" />
<input type="range" name="nunmero" id="numero" min="0" max="100" step="25" /> <br />
<input type="date" name="fecha" id="fecha" />
<input type="week" name="semana" id="semana" />
<input type="month" name="mes" id="mes" /> <br /><br />
<input type="time" name="hora" id="hora" checked />
<input type="datetime" name="fechahora" id="fechahora" />
<input type="color" name="micolor" id="micolor" /><br /><br />
<input type="submit" value="Enviar" />
</aside>
</article>
<article class="pagina">
<section class="contenedor">
<br />
<mark>ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ</mark> <br />
ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ<br />
ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ<br />
ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ<br />
</section>
<aside>
<p>YYYYYYYYYYYYYYYy</p>
</aside>
</article>
<article>
<footer>
<ul>
<li><a href="#">Derechos de uso</a></li>
<li><a href="#">Copyright</a></li>
</ul>
</footer>
</article>
</form>
</body>
</html>
No hay comentarios:
Publicar un comentario