Código de HTML - Tipos de campos en un formulario de HTML5 y como mostrar sus valores con JavaScript

Imágen de perfil

Tipos de campos en un formulario de HTML5 y como mostrar sus valores con JavaScriptgráfica de visualizaciones


HTML

estrellaestrellaestrellaestrellaestrella(3)
Publicado el 29 de Abril del 2014 por Xavi
3.927 visualizaciones desde el 29 de Abril del 2014. Una media de 35 por semana
Código que muestra los tipos de campos que se pueden solicitar en HTML5.
También contiene una función en JavaScript para poder mostrar el tipo de campo, su nombre y su valor.

Versión 1
estrellaestrellaestrellaestrellaestrella(3)

Publicado el 29 de Abril del 2014gráfica de visualizaciones de la versión: Versión 1
3.928 visualizaciones desde el 29 de Abril del 2014. Una media de 35 por semana
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

NOTA; En algunos navegadores con versiones antiguas como Internet Explorer, puede que no funcionen correctamente.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<!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>



Comentarios sobre la versión: Versión 1 (3)

Imágen de perfil
Jose Luis
29 de Octubre del 2014
estrellaestrellaestrellaestrellaestrella
Realmente es muy bueno.
Responder
ll
07 de Enero del 2015
estrellaestrellaestrellaestrellaestrella
ll
Responder
Azkeel
05 de Noviembre del 2015
estrellaestrellaestrellaestrellaestrella
Me encantaría saber como lo implemento en los comentarios dejando las estrellas estáticas, sin que haya cambios de valoración por ningún otro usuario externo al comentario; le estaría muy agradecida!!
Responder

Comentar la versión: Versión 1

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios

http://lwp-l.com/s2660