<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<script type="text/javascript">
/**
* Función que muestra los tipos de campos del formulario con sus
* valores
*/
function mostrar(){
var resultado="";
var form = document.getElementById("formulario");
for (i=0;i<form.elements.length;i++)
{
// muestra el nombre del input
resultado += "Nombre: <strong>" + form.elements[i].name + "</strong><br>";
// muestra el tipo del input (text, button, password, email, ...)
resultado += "Tipo: <strong>" + form.elements[i].type + "</strong><br>";
// muestra el valor del input
if(form.elements[i].type=="checkbox")
{
// si es del tipo checkbox
resultado += "Valor: <strong>" + form.elements[i].checked + "</strong><hr>";
}else{
resultado += "Valor: <strong>" + form.elements[i].value + "</strong><hr>";
}
}
// mostramos la información en al apntalla
document.getElementById("resultado").innerHTML=resultado;
}
</script>
<style>
div {
height:30px;
}
div input, div select {
position:absolute;left:300px;
}
input[type=radio],input[type=button],input[type=submit] {
position:relative;left:auto;
}
textarea {
width:300px;height:100px;
}
</style>
</head>
<body>
<h1>Tipos de campos en un formulario de HTML5 y como mostrar sus valores</h1>
<form id="formulario">
<div>Texto<input type="text" name="text1" value="tipo texto"></div>
<div>Color <input type="color" name="color1" value="#ff0000"></div>
<div>Fecha: <input type="date" name="fecha1"></div>
<div>Hora: <input type="time" name="hora1"></div>
<div>Cumpleaños (date and time): <input type="datetime" name="datetime1"></div>
<div>Cumpleaños (date and time): <input type="datetime-local" name="datetime-local1"></div>
<div>E-mail: <input type="email" name="email1"></div>
<div>Cumpleaños (month and year): <input type="month" name="month1"></div>
<div>Semana: <input type="week" name="week1"></div>
<div>Numeros: <input type="number" name="numeros1" min="1" max="5"></div>
<div>Range <input type="range" name="range1" min="1" max="10"></div>
<div>Search: <input type="search" name="search1"></div>
<div>Telefono: <input type="tel" name="telefono1"></div>
<div>Url: <input type="url" name="url1"></div>
<div>Contraseña: <input type="password" name="password1"></div>
<div>
<input type="radio" name="tipo1" value="leche">Coche
<input type="radio" name="tipo1" value="Agua" checked>Tren
<input type="radio" name="tipo1" value="Vino">Avion
</div>
<div>Checkbox: <input name="check1" type="checkbox"></div>
<div>
Select:
<select name="select1">
<option selected>Selecciona</option>
<option>Perro</option>
<option>Gato</option>
<option>Tortuga</option>
</select>
</div>
<div style='height:120px'><textarea name="textarea1">textarea</textarea></div>
<div><input type="button" value="mostrar resultados" name="boton1" onclick="mostrar()"></div>
<div><input type="submit" value="enviar" name="submit1"></div>
</form>
<div id="resultado"></div>
</body>
</html>