En HTML 5 se han añadido unos Input type nuevos, en general son para indicar al navegador que tipo de información se va a insertar el usuario, ayuda a la hora de validar el cuestionario de una forma automática (según el navegador) &  da al usuario mas accesibilidad e interfaz mas intuitivo, ademas de mejorar la accesibilidad en los móviles Smartphone, Androide, Iphone, Tabletas etc….

<!DOCTYPE html>
<html>
<head>
<title>Cuestionarios HTML5 – 2 clase</title>
</head>
<body>
<h1>El Search Input</h1>
<p>El nuevo tipo de input – Search indica al navegador que este campo se va a usar para busquedas.</p>
<p>Segun el navegador se va a presentar en diferentes formas, en el futuro los navegadores pueden incorporar ultimas busquedas realizadas
o cosas sinilares</p>
<form action=”” method=”get”>
<input name=”Text1″ type=”search” />
<p><input type=”submit” value=”submit” /></p>
</form>
<h1>El URL Input</h1>
<p>Aqui decimos al navegador que en este campo se va a escribir una direccion URL (de web).</p>
<p>Los navegadores que lo soportan ofrecen validar formas correctas de URL(es).</p>
<form action=”” method=”get”>
<p><label>Campo normal de texto:</label><input name=”Text1″ type=”text” /></p>
<p><label>Campo de texto URL:</label><input name=”Text2″ type=”url” /></p>
<p><input type=”submit” value=”submit” /></p>
</form>
<h1>El Tel Input</h1>
<p>Aqui lo que el navegador espera es un numero de Tlf.</p>
<p>Por las grandes diferencias en las formas de los numeros de telefono al nivel mundial no se restringa a ningun tipo de forma de insertar los numeros.</p>
<form action=”” method=”get”>
<p><label>Campo normal de texto:</label><input name=”Text1″ type=”text” /></p>
<p><label>campo de Tlf:</label><input name=”Text2″ type=”tel” /></p>
<p><input type=”submit” value=”submit” /></p>
</form>
<h1>Range Input</h1>
<p>Aqui el navegador espera unos valores numericos dentro de unaseria (intervalo).</p>
<p>Aqui podemos añadir los atributos min, max, y step para ayudar al usuario elegir los valores adecuados (UI).</p>
<form action=”” method=”get”>
<p><label>campo texto normal:</label><input name=”Text1″ type=”text” /></p>
<p><label>Campo de serie:</label><input name=”Text2″ type=”range” value=”5″/></p>
<p><label>Campo de serie (Min & Max):</label><input name=”Text3″ type=”range” min=”0″ max=”120″ value=”5″/></p>
<p><label>Campo de serie (Step):</label><input name=”Text4″ type=”range” value=”5″ step=”5″/></p>
<p><label>Campo de serie (Min, Max, y Step):</label><input name=”Text5″ type=”range” min=”2″ max=”12″ step=”2″ value=”6″/></p>
<p><label>Campo de serie (Fracciones, Min, Max, y Step):</label><input name=”Text5″ type=”range” min=”0.0″ max=”2.0″ step=”0.2″ value=”0.8″/></p>
<p><input type=”submit” value=”submit” /></p>
</form>
<h1>Number Input</h1>
<p>Para valores numericos.</p>
<p>Aqui tambien podemos añadir los atributos min, max, y step para ayudar al usuario elegir los valores adecuados (UI).</p>
<p>Los navegadores que lo soportan ofrecen validar que el valor insertado es numerico.</p>
<form action=”” method=”get”>
<p><label>Campo normal:</label><input name=”Text1″ type=”text” /></p>
<p><label>Campo Numerico:</label><input name=”Text2″ type=”number” value=”5″/></p>
<p><label>Campo Numerico (Min y Max):</label><input name=”Text3″ type=”number” min=”2″ max=”12″ value=”5″/></p>
<p><label>Campo Numerico (Step):</label><input name=”Text4″ type=”number” value=”5″ step=”5″/></p>
<p><label>Campo Numerico (Min, Max, y Step):</label><input name=”Text5″ type=”number” min=”2″ max=”12″ step=”2″ value=”6″/></p>
<p><label>Campo Numerico (Fracciones, Min, Max, y Step):</label><input name=”Text5″ type=”number” min=”0.0″ max=”2.0″ step=”0.2″ value=”0.8″/></p>
<p><input type=”submit” value=”submit” /></p>
</form>
<h1>Date Input</h1>
<p>Ayuda al usuario escoger una fecha en una forma muy facil.</p>
<p>Tenemos una variedad de formas de difinir los valores de fechas.</p>
<form action=”” method=”get”>
<p><label>Campo normal:</label><input name=”Text1″ type=”text” /></p>
<p><label>Hora (Time Field):</label><input type=”time” value=”01:30″ step=”3600″></p>
<p><label>Fecha (Date Field):</label><input type=”date” value=”2011-12-22″></p>
<p><label>Hora & Fecha (DateTime Field):</label><input type=”datetime” value=”2011-12-22T01:30Z”></p>
<p><label>Hora & Fecha Local (Local DateTime Field):</label><input type=”datetime-local” value=”2011-12-22T01:30″></p>
<p><label>Semana (Week Field):</label><input type=”week” value=”2011-W11″></p>
<p><label>Mes (Month Field):</label><input type=”month” value=”2011-07″></p>
<p><label>Mes con Min y Max (Month Field (Min, Max)):</label><input type=”month” value=”2011-07″ min=”2011-01″ max=”2011-12″></p>
<p><input type=”submit” value=”submit” /></p>
</form>
<h1>Color Input</h1>
<p>Difinimos al navegador que el valor que se va a insertar es de un color (mirar en Opera).</p>
<form action=”” method=”get”>
<p>Cual es el color de tus ojos?</p>
<input name=”Text1″ type=”color” />
<p><input type=”submit” value=”submit” /></p>
</form>
<h1>Los Nuevos Elementos del FORM en HTML5</h1>
<h1>Elemento &lt;datalist&gt;</h1>
<p>El elemento &lt;datalist&gt; lo usamos para insertar una lista de sugerencias para el usuario aunque puede escribir su propio texto
. El &lt;datalist&gt; contiene una o mas etiquetas de &lt;option&gt; que aparecen a la hora de rellenar el campo de texto
. El &lt;datalist&gt; Esta vinculado al elemento del texto usando el atributo <code>list</code></p>
<h2>Ejemplo:</h2>
El codigo es asi:</p>
<pre>&lt;input name=&quot;Text5&quot; type=&quot;text&quot; <span class=”highlight”>list=&quot;suggestions&quot;</span>&gt;
&lt;datalist id=&quot;suggestions&quot;&gt;
&lt;option value=&quot;Suggestion Value 1&quot;&gt;&lt;/option&gt;
&lt;option value=&quot;Suggestion Value 2&quot;&gt;&lt;/option&gt;
&lt;option value=&quot;Suggestion Value 3&quot;&gt;&lt;/option&gt;
&lt;option value=&quot;Suggestion Value 4&quot;&gt;&lt;/option&gt;
&lt;option value=&quot;Clyde&quot;&gt;&lt;/option&gt;
&lt;/datalist&gt;</pre>
<form action=”” method=”post”>
<label id=”Label1″ for=”Text5″>Input Field With Suggestions: </label><input name=”Text5″ type=”text” list=”suggestions”>
<datalist id=”suggestions”>
<option value=”Suggestion Value 1″></option>
<option value=”Suggestion Value 2″></option>
<option value=”Suggestion Value 3″></option>
<option value=”Suggestion Value 4″></option>
<option value=”Clyde”></option>
</datalist>
</form>
<h1>El Elemento &lt;progress&gt;</h1>
<p>El elemento &lt;progress&gt; muestra en que estado esta el usuario en completar una tarea- Por ejemplo un cuestionario compuesto por varias paginas
, un elemento &lt;progress&gt; indica cuantos pasos se han completado de un numero total de pasos necesarios.</p>
<p><strong>Ojo:</strong>El elemento &lt;progress&gt; no se usa para medidas, como por ejemplo cuanto espacio de disco o de descarga
se ha quedado. para este fin tenemos el elemento &lt;meter&gt;.</p>
<h2>Ejemplo:</h2>
<p>Has completado la mitad!</p>
<form action=”” method=”get”>
<p>Avance / Progreso: <progress value=”50.0″ max=”100.0″>50%</progress></p>
</form>
<h1>Elemento &lt;meter&gt;</h1>
<p>El elemento &lt;meter&gt; se usa para mostrar un valor de medida de un maximo. Por ejemplo, se puede usar el &lt;meter&gt;
para mostrar el espacio de almacenaje que le queda al usuario.</p>
<p><strong>Ojo:</strong>El elemento &lt;meter&gt; no se usa para mostrar progreso de pasos.
Para este fin usamos el elemento &lt;progress&gt;.</p>
<h2>Ejemplo:</h2>
<p>Mostrando lo que queda del espacio en un disco duro</p>
<p>Estado actual de almacenaje: <meter value=”30.0″ min=”0.0″ max=”100.0″ low=”20.0″ high=”80.0″ optimum=”40.0″>300MB de 1GB usados</meter></p>
<h1>El elemento &lt;output&gt;</h1>
<script type=”text/javascript”>
function calculation() {
var o = document.getElementById(“result”);
var num1 = document.getElementById(“num1”);
var num2 = document.getElementById(“num2”);
o.value = parseFloat(num1.value) + parseFloat(num2.value);
}
</script>
<p>El &lt;output&gt; representa el resultado de un calculo.</p>
<h2>Ejemplo:</h2>
<p>Valor 1: <input type=”number” name=”num1″ id=”num1″/></p>
<p>Valor 2: <input type=”number” name=”num2″ id=”num2″/></p>
<p>Suma: <output name=”result” id=”result” for=”num1 num2″></output></p>
<p><button onclick=”calculation()”>Calcule!</button></p>
</body>
</html>