Artistas Digitales

Campos de entrada datetime en html5

Campos de entrada datetime en html5

Digamos que diseñas un formulario donde requieres registrar fecha y hora en la que un cliente puede agendar una cita, indicando fecha y hora de la cita. La nueva especificación de html5 nos brinda campos de entrada específicos para este tipo de datos. la solución se puede implementar de las siguientes dos maneras.

Opción 1

Pedir la fecha y hora con un solo tag, la implementación es realmente sencilla

<html>
<body>
	<section>
	<h1>Ejemplo con fecha y hora en un solo tag</h1>
	<form method="post">
		<p>
			<label>Fecha y hora de la cita<input type="datetime" name="fechayhora" size="25"></label>
		</p>
		<p>
			<button type="submit">Cita</button>
		</p> 
	</form>
	</section>	
</body>
</html>

Opción 2

Puede que alguno de los dos campos no sea necesario dentro de tu formulario, para este caso puedes usar cualquiera de los dos por separado, en el ejemplo continuación se muestra como puedes utilizar estos tags por separado.

<html>
<body>
	<section>
	<h1>Ejemplo con fecha y hora en tags separados</h1>
	<form>
		<fieldset>
			<legend>Pedir una cita</legend>
			<p><label>Fecha <input type="date" name="fecha"></label></p> 
			<p><label>Hora <input type="time" name="tiempo"></label></p>
		</fieldset>
		<p><button type="submit">Agendar cita</button></p> 
	</form>
	</section>
</body>
</html>

¿Te gusto el artículo? Compartelo!!

Acerca del autor

Dejar un comentario